jQuery Tutorials and Examples

jQuery jsonp and cross domain ajax

JSONP or “JSON with padding” provides a method to request data from a server having a different domain. Typical web browser prohibit cross domain request due to same read more

jQuery post form data using ajax

Javascript code snippet to submit a form using POST to server and process returned data. Here when submit button is clicked we serialize whole form read more

jQuery how to load a url into an element

jQuery .load() can be used to make an Ajax call (GET or POST) and load the results into an element by settings result into its read more

jQuery – load a script with cache enabled

jQuery method jQuery.getScript() can be used as a shorthand to load a script given its url. This by default disables cache by appending extra random read more

jquery ajax – post form having file uploads

To post a form using jQuery Ajax, we can directly call jQuery .ajax() methods passing form data. The form data can be constructed using FormData. read more

Jquery – change table cells color based on value

It is sometimes useful to change color of table cells based on values for better presentation and readability. Here is quick code snippet to do read more

jQuery – check if element is visible in viewport ofter scroll

To check if an element is visible in window viewport after vertical scrolling the following approach can be used using jQuery. Note that this approach read more

How to display auto fade out message using jQuery

Sometimes we need to display a message and then fade it out. jQuery fadeOut will make an element fadeOut (by animating css property opacity) will read more

How to use fitvids.js for automatically resizing videos

Fitvids (github link) is an open source javascript library built by Chris Coyier and Paravel which makes the width of videos in a web page fluid. To be read more

jQuery – get class list of DOM element

jQuery code snippet to get class list of an element. We are using jQuery attr(“class”) to get the class list as string and then splitting read more

jQuery toggleClass() examples

jQuery toggleClass can be used to toggle a class (add or remove depending upon current state) in an element (or set of matched elements). In read more

jQuery – make a div stick at top on scroll

To make a div stick at top on scroll we can use css position property fixed. Here are the steps: Find initial position of div read more

HTML table with alternate color rows

We often need to display a table with alternate rows having different colors. We can do it either using CSS3 nth-child selector or using jQuery. read more

Javascript/jQuery – disable right click

Right click can be disable by attaching a even listener to contextmenu event. It can be done using jQuery or vanilla Javascript. disable right click read more

jQuery – text input field – change keyup and paste events

jQuery can be used to handle these events on an input text field. change (when text input field changes and loses focus) $(‘input#field1’).on(‘change’, function(evt) { read more

How to trigger click using jQuery or Javascript

Sometime we need to manually trigger a click event on an element (e.g. button). Here are Javascript and jQuery code snippets for this. This is read more

jQuery – difference between html() and text()

Jquery can be used to set content on and element (div, etc.) using text() and html() methods. Methods text(content) will first convert the content using read more

jQuery – check if an element exists

jQuery when used with selectors like element tag, class, id can potentially return a jQuery object with no element in it. Since jQuery contains number read more

jQuery – find total number of DOM elements

To get total DOM elements including children use the following code (this includes root html element also) $(‘*’).length To get all DOM elements in body read more

jQuery encode string to html entities

jQuery .text() method sets text for an element (after taking care of html entities) and .html() gets the html for a dom element. Combining these read more

jQuery – read and modify iframe content

Sometime we need to read and modify same domain iframe content using jQuery. Here is code snippet which will modify the content of an iframe.

jQuery – create iframe with content

Sometimes we need to create inline iframe with content generate from jQuery/Javascript. This iframe will not have src attribute. One use case is to run read more

jQuery – find select element selectedIndex, value and text

jQuery code to access select element’s selected index, selected value and selected option node text.

jQuery – get checkbox value and checked state

jQuery can be used to access checkbox value using jQuery.attr(“value”) and it checked state using jQuery.prop(“checked”). Note that we can not use jQuery.attr() for checked read more

jQuery – get javascript object

jQuery when applied on a css selector, returns a wrapper object which contains 0 or more javascript objects. To get the javascript object from it, read more

jQuery – how to get version info

to get jQuery version info the variable jQuery.fn.jquery (or $.fn.jquery if $ is being used for jQuery object) can be used. Some examples. jQuery version read more

jQuery – add text to existing div

jQuery .append() can be used to add text to an div. The text can contains tags inside it.

jQuery sliding effect – slideUp, slideDown, slideToggle

jQuery slideDown, slideUp, slideToggle can be used to display, hide or toggle and element in sliding motion. .slideDown( [duration ] [, complete_callback ] ) .slideDown( read more

jQuery ui – make an element draggable

jQuery ui can be used to make an element draggable/movable by mouse drag. Note that it does not work with touch events. Syntax: // After read more

jQuery ui slider and input text box – one way binding

jQuery ui can be used to create a slider with updated value also getting displayed. Syntax: Example – slider and input text box – one read more

jQuery ui slider and input text box – two way binding

jQuery ui can be used to create a slider with updated value getting displayed in an input text box and any update in text box read more