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
Using TouchSwipe plugin in jQuery
If you want to swipe on touch devices like iPad, iPhone, Android device etc there is a jQuery plugin that can be used for this purpose. It can read any single or multiple finger swipes on touch device and mouse 'drags' on the desktop brow...
How to use jQuery Lazy Load Plugin
In this article you will learn about lazy loading plug-in from jQuery. It first loads your web page then request is sent to load the images of that page.
By using Lazy load plug-in you can decrease time for loading the page and also it can incre...
webui-popover plugin in jQuery
It is a plugin with jQuery which can be used to show popover . It can work with bootstrap but it can be used without bootstrap. It requires jquery1.7+
It supports browsers IE8+, Chrome, Safari, firefox, Opera.
These are the features of this p...
jQuery CDN
CDN is Content Delivery Network which is fundamentally an extensive conveyed arrangement of servers which sent in various server centers over the web. It helps in reducing load time of a page by offering documents at a higher data trans...
Scroll Fixed Header in jQuery
In this article, you will learn how to fix the header all the time while scrolling your website page. There are different jQuery plugin available for this purpose but we will use a simple jQuery based solution to make a header fixed on the top of...
DataTables: Table plug-in for jQuery
DataTables is a jQuery plug-in designed for creating flexible HTML tables.
It has following features:
* It provides Instant search, Pagination and multi-column ordering
* It has Supports for any data source like DOM, Javascript, Ajax and s...
How to add class (active) on specific li on user click with jQuery
Mostly every website contains a navigation menu so it's constantly great to make it so the guests or client on the website knows on which page or part of the website he is on. This can be proficient by including a "dynamic class" or...
Appending and Removing Div using jQuery
Append and Remove Method:
We can use append method to add a div using jQuery and using remove method we can easily delete added div.
Append Syntax:
$(selector).append(content,function(index,html))
Remove Syntax:
$(selector).rem...
Displaying div on radio check using jQuery
Hiding/Showing div on checking radio:
We can easily hide or display a div by checking the radiobox options using jQuery. We can do this by checking radio options attribute and according to attribute we can hide or show a div.
Example:
...
jQuery Effects methods
Hello Readers,
jQuery provides a simple way to apply wonderful effects in your application. jQuery effects methods are very amazing and easy to implement with minimum configuration. So in today's post, we will discuss the jQuery effects me...
Full Calendar Implementation
1- Place the JS files in js directory.
fullcalendar.min.js
jquery.min.js
moment.min.js
2- Place CSS files in CSS folder.
fullcalendar.css
fullcalendar.print.css
3- Paste the bellow javascript code i...
Tabbed Content Area with CSS and jQuery
In this blog I build tabbed contents using CSS and jQuery, Tabbed content is a beautiful way of displaying the content in the precise and concise manner. This structure could be possible using the unordered list that act as a tabbed in a row and ...
How to change the background color of even elements in the list?
We can change the background color of the members of the list using filter() function in jQuery.
Note: The filter() function matches each element with the supplied selector and creates a subset of the matching elements.
Let us under...
Chaning accordion icons using JQuery or CSS
In this blog i will explain how to change the accordion icon.
I have used two methods here:
Using Jquery
Using CSS
Here is the boostrap accordion html :
<div class="panel-group" id="accordion" role="tablist" aria-multisele...
jQuery queue() Method
queue() Method:
Queue method is used to display the queue of functions waiting to be get executed on selected html element. In a queue there can be one or more functions waiting to execute on selected html element. We can also manipulate the q...
Different way of writing multiple click functions
jQuery make it possible to interact with user by adding events to the web page, It includes many Events Methods like hide(), bind(), blur(), change(), click() and dbclick(). Here in this blog I just want to create one "click" function t...
Google URL shortener API with Javascript
Hello Readers,
goo.gl service at Google URL shortener API takes long URLs and squeezes them into less characters to make a small link so that can be easily share on social media and email to friends. This API is free with a daily limit o...
Shortened URL with Bitly API and jQuery
Hello Readers,
Bitly API is a way to shrink long URLs so that we can share it on social media. For example on twitter we can't share long URL so it is a very easy way to shorten long URLs. The most important thing is no ser...
How to create Dynamic Content load on click using JQuery?
Hello reader
In this blog! I am going to tell you how to create Dynamic Content Load using jQuery. Generally, we see the content loader on many websites and on some registration form when we click on the next step button after completed the...
Theme Changing Application
Hello Readers! In this blog we will be creating an application through which we can change the theme of a device. For an example we can consider a mobile theme application. In mobile, when we select particular theme the settings changes according...
Learn how to create a comment with word limit using jQuery
Hii,
In this blog, I am going to share an example in which i have created a comment box using few html tags like input box and text area and i have used jquery to set the word limit and to count the number of characters typed.
Go through ...
Accessing JSON object in JavaScript
JSON is used to read data from a web server, also it is used to display the data in a web page. In this blog we will be accessing the values of JSON object with the help of the jquery's getJSON() method. GetJSON() method is used to load the J...
Trigger() method in jQuery
Trigger() method:
It is used to trigger an event for selected element and also trigger default behaviour of an event for the selected html element. It works similar to the triggerHandler() method, but triggerHandler() does not trigger default ...
Display content on the basis of drop down value selected without using id concept
Hello Reader! Usually, when we are asked to get the contents to be displayed as per the value selected from the drop down we use to get it done with the concept of id. Consider a scenario where the list contains more than 10 items, than generatin...
Creating Slideable Grid Using JQuery
Hello readers , Today in my blog I have tried to create Slideable Grid with the help of jQuery .
As we all add columns to our web pages either for dividing the data as per the screen size so that the content would not get overlapped ...
Change Event in jQuery
Change Event:
Change event triggers when value of an element changes. It works only for form fields (<input>,<textarea> and <select> elements).
In case of select menu,checkboxes, and radio buttons change event occurs wh...
Jquery Arrays: Creation and Manipulation
jQuery.makeArray() is used to transforms any array like object to JavaScript Array. This function is useful for making an element into a array list. Here in this line of code i used one div for explaining the box, in which the data of LI can be d...
use of one() method in jQuery
one() method:
One() method is used to attach events to selected elements and also used to specify a function when the event occurs. It is similar to on() and bind() method but the events attached using one() method executes only once for each ...
jQuery nextAll() Method
The jQuery nextAll() method gives back all next sibling components of the component which we have selected.
By using nextAll() method we can select all the next siblings of the component which we have selected and then w...
is() method in jQuery
is() method:
It is used to filter html elements by checking with selectorElement. It returns true if there is minimum one match from the given selectorElement or some other argument provided.
Syntax:
$(selector).is(selectorElement,func...
on() method in jQuery
on() method:
On() method is used to attach events to selected elements and also used to specify a function when the event occurs. It is similar to bind method but on() method also attach event handler to elements generated using script while b...
Hover() method in jQuery
Hover() method:
This method is used to perform some changes on mouse over and mouse out for html elements. It requires two parameters which are as follows:
over −This function triggers when the mouse is moved over a matched element...
Create Moving Marker Functionality on Google Map with jQuery and HTML
How to move markers on a google map api without clicking on any object ?
The above can be achieved with simple logic . ie update the marker position after a particular time ( Let say 1 second in our example )
The following HTML and jquery c...
jQuery next() Method
The jQuery next() method gives back the next sibling components of the component which we have selected.
By using next() method we can select the next siblings of the component which we have selected and then we can use ...
Jquery Chaining
jQuery - Chaining
In general terms, An associated adaptable arrangement of metal connections utilized for affixing or securing items and pulling or supporting burdens is known as chaining.
In Jquery, Chaining mean...
Live() method in jQuery
live() method:
Live method is used to attach events to selected elements and also used to specify a function when the event occurs. It is similar to bind method but live method also attach event handler to elements generated using script while...
jQuery siblings() method
The jQuery siblings() method gives back all siblings components of the component which we have selected.
By using sibling() method we can select all the siblings of the component which we have selected and then we can use them.
Syntax...
How to create to-do list using jQuery?
In this blog, I am going to explain how to make a simple to-do list with the help of jQuery. The to-do list which we are going to create will contain an input box and an add button, so when we put our task to the input box and click the add butto...
eq() filtering in Jquery
It helps in reducing the set matched of elements in a form of the index. It is a zero based indexing. By zero-based indexing we mean that the indexing begins from zero. First, an element is indexed as zero and thus simultaneously indexing goes on...
Callback Function in jQuery
Callback Functions:
It is used to prevent executing further code until earlier effects has not executed completely. As we know in jQuery effects takes time to complete and sometime next line code get executed while the earlier effects are stil...
How to finds odd table rows using jQuery
If you want to find odd number of table rows then it's not a difficult task now, we can do this easily with the help of jQuery :odd selector.
The :odd selector will choose all those components which have odd index i.e 1,2,5 etc.
Most of...
How to find browser details ?
Jquery have a nice feature to know about browser details. it is deprecated, If the functionality is removed, it will likely be easily accessible using a plugin.
It is safe to use it to determine whether or not to call $(document...
How to get height and width of a html element?
Hello Reader's If you are dealing with JQuery in your website and want to get the height and width of any html element then this blog will very helpful to you.
So lets get started working of getting the height and width of a div .
F...
How to finds even table rows using jQuery
If you want to find even number of table rows then it's not a difficult task now, we can do this easily with the help of jQuery :even selector.
The :even selector will choose all those components which have even index i.e 0,2,4,6 etc.
M...
How to make find and replace in page using jQuery?
Hello Readers. If you want to make replacement of words on any webpage then jquery offers you to do this. The benefit of using the Jquery is to run code on real time front end.
So let's get started working on it.
Step 1: Create a si...
What is the difference between jQuery.get() and jQuery.ajax()?
jQuery.get()
jQuery.get('testing.txt',function(data){
console.log(data)
},'text');
In this blog first we are using the jQuery.get() method. You pass function in arguments instead of passing in an object when you are using jQuery.g...
How to get the current coordinates of the element
If we want to find the current coordinates of the element then we can easily do that with the help of jQuery. jQuery have offset() method which makes us to find the coordinates of the element which you want to find in respect to the document.&nbs...
Unbind() method in jQuery
Unbind() method:
Unbind() method is used to remove events attached to html element while bind() method is used to attach events to selected html elements .
It is mainly used to prevent the events to be executed when needed and when no...
jQuery Mobile Touch Events
An event is something which triggers when something happens.In jquery we have gone through many of them. In this particular blog we explain about the Touch event. The touch event is triggered when the user taps on an element.
In the following ...
Getting width and height of a div with the help of jQuery
If anyone want to get the width and height of a div then he/she can do this with the help of jQuery width() or height() method.
The width() method will find the width of that element which we want to find. It do not take the padding or m...
