jQuery Tutorials

Recent Tutorial

Highcharts – Compare Data using Column Chart

February 1, 2017
Highcharts provides various type of beautiful chart components. It is useful to present data in an interactive graphical representation. There are the pie chart, bar chart, column chart, line chart and lot more different chart formats. It is a client-side chart component based on Javascript and it can be easily implemented in our web projects.  […]
This tutorial was added to jQuery.

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 a 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 […]
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 the web and the other is for the mobile viewport. We are having a jQuery function to switch CSS based on window size. This […]
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 of a two-column template. These two […]
This tutorial was added to jQuery.

jQuery News Ticker

March 7, 2016
jQuery News Ticker is used to marquee 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 an HTML element. This attributes used to keep more information on 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 a useful feature for an HTML drop-down list. Especially it will increase user convenience to select items from the drop-down having a long list. In this tutorial, we are going to list country dropdown with a search option. In a previous tutorial, we have seen countries and its dependent dropdown list. In this […]
This tutorial was added to jQuery.

jQuery Color Picker – Predefined Colors

December 8, 2015
This tutorial is to see how to do simple color picker using jQuery. In a 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 the 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 an 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 mouse over, mouse out events. These functions are used to add/remove CSS class selectors […]
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 the jQuery resizable() 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 […]
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 a jQuery code for doing favorite star rating. It displays a 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 […]
This tutorial was added to jQuery.

↑ Back to Top