Featured
-
Top 10 Template Engines for JavaScript
What is a Template engine? Template Engines are
by nishant.mishra -
jQuery Accordion
Hello readers! In this Blog we will gain knowled
by vishwanath.rana -
How to make Numbered and bulleted list in HTML Editor with JavaScript
Hello all, Working with HTML Editor we wanted t
by gaurav.gautam -
How to hide particular div with just one click?
Hi, you want a condition in which the particula
by abhishek.tiwari.458 -
How to Create and Retrieve Array in Javascript?
If you want to store multiple values in a single v
by siddharth.shahi
Tags
script for copy to clipboard
Copy to clipboard.. You can see this option in most of the blogs. You can simply click on the link and it will copy the text which set as target. Today we are going to discuss the implementation of this feature. We can see different ways to do th...
Get the device which is used by the user
Sometimes we have to write down the different scripts for different devices. Now a days most used devices are mobiles/tablets. If you want to get the device type which user is using then you need to simply add this script in your code and call th...
How to pass values from one div to another div in same page
Hello reader!
If you want to send the value from one div to another div in your same webpage, you can do this by help of JavaScript function.
Lets do this with example-
This is the div from which the value is taken
<div id='td1'>T...
Foreach loop in javascript
If we need to use foreach loop in javascript then we can use jQuery $.each() function:
var data = [];
data[1] = "Mike";
data[2] = "Tom";
data[5] = "Harry";
data[12] = "John";
$.each(data, function( index, value ) {
alert( index + ": " ...
How to get mouse current position
According to my below code, when we will move the mouse to anywhere like left or right up and down we get the current status of the swipe. Here i have used mousemove() method .
$(function() {
//Enable swiping...
$("#test"...
How can we resolve conflict between prototype and jQuery?
To resolve a conflict between jQuery and prototype, use below method
jQuery.noConflict
and using jQuery instead of
$('code').code;
jQuery.noConflict();
jQuery(function($)
// $ is the jQuery object in here
// and doesn't conflict ...
How to bind onclick event function in JQuery
In the example below, I have created a bind onclick event function. when we will click on the button, element will dynamically added to DOM and it will bind the click event only to the elements that exist at the time of binding. To bind the cl...
How to Create a Responsive Image Slider in jQuery
By using jquery image slider plugin we can create Responsive Image slider .In below example, I am using rslider plugin.
Step-1. Link files
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
&l...
What is the difference between '@' and '=' in directive scope
'@' is used to send the property from parentScope to isolatedScope. By transfer, you are not able to change the property of parentScope that is being pass. It is called one-way binding.
If the binding property is a primitive type, like interpo...
Error [jquery.form] terminating; zero elements found by selector jquery ajax image upload
If you are getting error while using the ajax uploading for an image and using jquery form.js script and getting the issue "[jquery.form] terminating; zero elements found by selector" .
Then for resolving this issue you have to avoid the neste...
Fetching JSON using angular JS
The controller defines a dependency to the $scope and the $http module. An HTTP GET request to the countries.json end point is carried out with the get method. It returns a $promise object with a success and an error method. Once successful, the ...
How to use upload files with JQuery
Here is the example for *How to use upload files with JQuery. *
If you having trouble with such issues, then use the below code.
Here is the HTML
<div class="flie-btn clearfix">
<input class="fileinput" type="file" name="d...
how to bind click event on dynamically created elements
Below is the example for how to bind click event on dynamically created elements.
If you having trouble with such issues, then use the below code.
Here is the HTML
<a href="#" class="button">Button</a>
<div class="lis...
Trigger function in JQuery
Trigger function has an interesting concept as it is used to execute all handlers and behaviors attached to the matched elements for the given event type.
For example, If I want to have a click event on a button without clicking, we can use this...
Ajax call using Javascript and JQuery
Ajax :
It is s process of getting or reteriving the content without refreshing the whole page.
We can do this using javascript and JQuery.
There are different method for ajax call in javascript and jquery.
Javascript :
<script...
Difference between attr() and prop() in JQuery
Many of us uses JQuery.attr() and JQuery.prop() and get the same result, as there is a small difference between the two.
Lets discuss it one by one.
JQuery.attr() :
It generates the value of an attribute for the first element in the set of m...
Select multiple elements with same ID using JQuery
ID's in HTML are generally used as unique identifiers for the elements present in the DOM but it is not a compulsion to have only one element with a unique ID, which means you can have multiple elements with the same ID.
JQuery selector $("#id...
How to Get height width or element using Jquery
Hello reader's,
Below is the example for Getting height width or element using Jquery
If you having trouble with such issues, then use the below code to resolve such issues.
Here is the HTML
<button id="dummy-height">Get div Heigh...
Jquery Chaining
Jquery Chaining:
Till now we know that Jquery statements are executed line by line i.e one line after the another, but there is a technique that allows executing multiple Jquery commands in a single line just one after ...
jQuery Filtering
jQuery Filtering:
When we have to select a specific element out of various given elements filtering is required.
In Jquery there are some filtering methods divided into two groups:
1. Methods that s...
How to hide particular div with just one click?
Hi,
you want a condition in which the particular div, para or any other tag need to be disappear with just a single click see my code written in jquery as simplest.
<script>
$(document).ready(function(){
$("p").click(function()...
Kendo UI : Creating a data grid
This series would be introducing simple examples of the widget along with the problems and the solutions that were used during execution of a project.
Kendo UI is a set library extended from Jquery developed and managed by Telerik.com.
It h...
How to Add/Remove multiple classes in Jquery
If you want to remove mutiple classes on click of a button:
HTML:
<div class="container">
<span class="class1 class2 class3"></span>
<button id="clear" type="button"></button>
</div>
JS:
$("#cl...
How to trigger an event using Javascript "addEventListener()" method.
Hello Readers,
Their are many ways in javascript and jquery where we can trigger an event using Id or Class. Here's the example of how we can trigger the event using "addEventListener()" method.
Let's suppose we have have button having id="...
Making use of selectize.js for rich user experience
Ever needed something like tagging in your project if yes then we have the latest and most optimised jQuery based library which helps you in tagging, contact lists, country selectors, and so on.
The goal of this library is to provide with an e...
Things to know in javascript and jQuery
Difference Between this and $(this)?
They both refer to same element. This is used traditional sense but we add $ sign in jquery. When we use $(this), it become a jquery object.
Comparision between bind(), live() and delegate()?
Bind() and liv...
Jquery Animation
Jquery animate() method is used to animate any element in the web page. It allow us to create custom animations.The syntax for this:
$(selector).animate({params},speed,callback);
The parameters of animate() mehod are:
The params parameter de...
How to add list dynamically
This is very simple way to add list dynamically using jquery. In this first you have to give Id to select tag then add the script.
<html>
<select id="memoryCategories">
<option>Categories</option>
</select&...
Creating CSV from HTML using jQuery
In one of the project, I needed to create the CSV file from the html using jQuery.
To make this possible, I created the below code to convert the html into csv file using jQuery.
<script type="text/javascript" src="jquery.min.js"><...
Dynamic horizontal scroller
Hello All,
The following code will help you to make dynamic horizontal scroller. This means that on adding content or images the width of the container automatically increases using jquery.
If anyone wants to make horizontal scroller which is i...
How to export data to csv using javascript and jquery
Sometimes you face the problem to export the data into csv file using clientside platform. In this case you can use javascript and jquery.
Below is the code to find out the solution:
Javascript Code:
$(document).ready(function () {
...
auto-fill drop-down options on basis of previous seclection
Following example illustrate filling state (province) drop-down on basis of country.
Drop-down HTML
<select id="countryDropBox">
<option value="">--Select Country--</option>
<option value="1">India</option...
Method eq() in jquery
Description:
The eq ( index ) method reduces the set of matched elements to a single element or we can say that
find the element that matches or equals the index provided.
Syntax:
Here is the simple syntax to use this method:
selector.eq ( i...
How To Create A Simple Animation With The Help Of Jquery
Simple Animations With The Help Of Jquery
You can slide elements or any content of HTML and even stop animations in mid-sequence. To slide elements up or down.
$("#Element").slideDown("fast", function() {
// For slide down
...
What Are The Use Of after() and before() Methods In JQuery
**Use Of after() and before() Methods In JQuery**
The jQuery after() method inserts content AFTER the selected HTML elements.
And
The jQuery before() method inserts content BEFORE the selected HTML elements.
**Example**
$("p").after("S...
Check file-size using jQuery without uploading file
A simple code snippet for checking the file-size of a file before uploading it. It will not only help to save time but also network resource as we can implement the file check at the initial point only.
The current code allows the user to sel...
Making Custom Select Box Using JQuery
While designing an HTML form, a lot of time there is a requirement of custom form elements. Below is a tutorial on how to create some nice custom select box with CSS and jQuery.
<div class="selectBox">
<div c...
Changing the Behavior of a Dialog Box with Effects
The options used when creating the dialog box can be modified by the dialog ("option", param, value) method. The param parameter is the name of the option, while the value corresponds to its new value.
lets change the effect for the opening and ...
Finding the Dimensions of an Element
You want to determine the space occupied by an element.
The width and height methods can be applied to any element, and they are useful for
determining the computed width or height of an element. However, they fall short if
you need to deter...
Finding the Dimensions of the Window and Document
You want to get the width and height of the window and document in pixels.
jQuerys width and height methods provide easy access to the basic dimensions of the window or document:
$(function() {
alert('Window height:'+jQuery(window).height(...
Preventing child element from firing on click of Parent element
Suppose, we have this html where div element have 2 child p elements and 1 child anchor element.
<div>
<p> I am para one</p>
<p> I am para two</p>
<a href="http:nowheretogo.com">I am a link<...
Adding and Removing Select Options
A drop-down box for colors and want to add new colors to it, as well as remove options from it.
<label for="colors">Colors</label>
<select id="colors" multiple="multiple">
<option>Black</options>
<option>...
Adding data to jqxtree dynimacally on click of nodes of a tree using AJAX call
There might be a case where user wants to add data to jqxtree on click of each individual node. Below is the code which help us to achieve the above
functionality where user can get data from JSON file or database on click of each individual tre...
Disabling All Effects
Your user or web application may require that all animations are disabled, but the effect of revealing information or scrolling (or whichever animation type) may still be required. jQuery has a way to disable all animations from one access point...
Delete a row from list on a click of a button
If you want to delete a particular list (li) from the listing, you can easily do this with the following code.
$('#demo ul li[rel="'+id2+'"]').remove();
<div is="demo ">
<ul>
<li rel="id1">This is just a demo....
Append tag using jQuery
If you want to append HTML in pre-defined HTML :
$("#detail").append('<div class="demo"><p class="modify">He has all the ability and a perfect attitude.</p></div>')
Forming Valid Query Strings in jQuery
The jQuery serialize()
method turns the form values into a valid querystring, as such you can simply append to the string:
firstName=Maurizio&lastName=Tarchini
Useful, right?
Lets take an example:
<p><em></em>...
Selecting a text field with name using JQuery
JQuery has loads of selectors that can be used to select an HTML Element from a page.
One of the common scenario with development for even a simple case of validation requires to check for input fields and to do so we can use a selector that s...
