jQuery Tutorials

Recent Tutorial

Change Theme using jQuery Split Button

April 4, 2016
In this post we are going to see how to change theme color using jQuery. We have an example with a split button having two parts. One is for default theme and the other is to browse more themes. In this example we have three themes Mercury, Sky, Gold and separate CSS files for these […]
This tutorial was added to jQuery.

Switch CSS Class Using jQuery

March 24, 2016
In this post we are going to switch the CSS class using jQuery. In previous post we have seen how to switch CSS file based on the screen size to make page responsive. We have an example showing an image icon which is smaller on page load. And then we are switching the class attribute […]
This tutorial was added to jQuery.

Switch CSS Based on Window Size using jQuery

March 17, 2016
Here we are going to see an example to switch CSS file dynamically based on the window size. In this example code we are having two CSS files. One is for web and the other is for mobile viewport. We are having a jQuery function to switch CSS based on window size. This function will […]
This tutorial was added to jQuery.

Equal Height Columns with jQuery

March 16, 2016
In a multi column template, the columns height is based on the content length. If the content lengths are varied then the columns will not be even and will not have a good look and feel. We can do this dynamically to equate the column heights. We have an example with a two-column template. These […]
This tutorial was added to jQuery.

jQuery News Ticker

March 7, 2016
jQuery News Ticker is used to marque list of text one by one. Previously I launched MangoTicker a responsive news ticker plugin using Javascript. Now we are going to see a simple news ticker example using jQuery. In this example, we are going to achieve it using few lines of code. And, we are not […]
This tutorial was added to jQuery.

Read HTML5 Data Attribute via jQuery

March 6, 2016
In HTML5, it has data-* attribute which is used to store custom data with a HTML element. This attributes used to keep more information with HTML elements. When we access these elements from javascript, the adequate information stored will make our work easy. We are going see an example to read HTML5 data-* attribute via […]
This tutorial was added to jQuery.

DropDown with Search using jQuery

January 12, 2016
Search is an useful feature for a HTML dropdown list. Especially it will increase user convenience to select items from the dropdown having long list. In this tutorial, we are going to list country dropdown with a search option. In previous tutorial we have seen countries and its dependent dropdown list. In this tutorial we […]
This tutorial was added to jQuery.

jQuery Color Picker – Predefined Colors

December 8, 2015
This tutorial is to see about how to do simple color picker using jQuery. In previous tutorial we have seen date picker by using jQuery UI Library. There are various jQuery plugins providing color picker feature. This tutorial gives a simple example code as a guideline to start writing your own jQuery color picker plugin. […]
This tutorial was added to jQuery.

Clone HTML using jQuery

March 24, 2015
In this tutorial we are going to see how to copy and insert HTML element dynamically. In previous tutorial we have added HTML form elements dynamically by using jQuery load() function. In this example, we are using jQuery clone() to copy html element. And then by using jquery insert function we are adding element to […]
This tutorial was added to jQuery.

jQuery Table Row Column Highlight on Hover

February 28, 2015
This jQuery tutorial helps to highlight table row and column on the mouseover event. There are several event handling functions in jQuery to highlight table row/column. In this tutorial we are using jQuery hover() to pass functions to be called on mouseover, mouseout events. These functions are used to add/remove css class selectors to highlight […]
This tutorial was added to jQuery.

jQuery Accordion

February 4, 2015
This tutorial is used to show and hide content by using jQuery accordion function. This jQuery show and hide effect is created on the click event of the header element. In this example, we have a question/answer list within accordion DIV container. When we click on the question, then the DIV containing the corresponding answer […]
This tutorial was added to jQuery.

Resize HTML DOM using jQuery

January 28, 2015
In this tutorial we are going to see about how to resize HTML DOM element using jQuery. We are using jQuery rezisable() function for changing the size of an HTML element dynamically. In this example we are going to call this jQuery function for our resizable DIV by using id selector. We can obtain several […]
This tutorial was added to PHP.

Moving DIV Element using jQuery

November 28, 2014
In this tutorial we are going to learn how to move a DIV element to the top, right, bottom, left direction using jQuery. In previous older tutorials we have seen about jQuery DIV drag and drop animation. We are having icons to trigger jQuery function to move the DIV element to the corresponding direction. In […]
This tutorial was added to jQuery.

Favorite Star Rating with jQuery

November 10, 2014
In this tutorial, we are having an jQuery code for doing favorite star rating. It displays list of HTML stars by using li tags. These stars are highlighted by using CSS and jQuery based on the favorite rating selected by the user. View DemoDownload HTML Code for Displaying Rating Stars This HTML code displays list […]
This tutorial was added to jQuery.

jQuery ThickBox

November 27, 2013
jQuery ThickBox is a kind of popup dialog overlay on top of the browser window. This is a UI widget written in JavaScript by Cody Lindley using jQuery library. ThickBox can be displayed based on events like onClick, onMouseDown, etc. jQuery ThickBox Features While showing ThickBox, it disables background screen and prevents user to interact […]
This tutorial was added to jQuery.

↑ Back to Top