jQuery

Recent Tutorial

Responsive Image Upload using jQuery Drag and Drop

October 20, 2017
While uploading image files using drag and drop method the drop area should be responsive based on the viewport. In this tutorial, we are going to create a responsive container to upload multiple images using drag and drop. In a previous tutorial, we have seen example code for uploading multiple images by choosing files using regular file […]
This tutorial was added to jQuery.

Meme Generator using jQuery

October 12, 2017
In this article, we are going to see the code for generating Meme images using jQuery. In this example, I have provided options to upload a meme image and to add text on top of the image. I have used jQuery UI library to change the position of the meme text over the background image […]
This tutorial was added to jQuery.

jQuery Ajax Image Resize with Aspect Ratio

September 26, 2017
In this tutorial, we are going to see how to resize the uploaded image with the aspect ratio. The aspect ratio will be calculated by using the dimensions of the original image. Based on this aspect ratio the width or height of the thumbnail image will be scaled.  In this tutorial, I have used jQuery […]
This tutorial was added to jQuery.

jQuery Custom Dropdown with Checkbox

September 23, 2017
In this tutorial, I will present about creating a custom dropdown box which has list of options with checkboxes. In this custom UI field, multi-select option is also available. I have managed to develop this with just few lines of code by using jQuery functions like toggle(), show() and hide(). In this example, I have […]
This tutorial was added to jQuery.

jQuery Parallax Slider

August 29, 2017
In this tutorial, we are going to see how to create a jQuery slider with parallax animation effect. In a previous tutorial, we have already seen jQuery slider, carousel and more. In this example, I have implemented the parallax slider simply with few lines of code (less than 40 lines and 3kb only). I have coded […]
This tutorial was added to jQuery.

Responsive Datatables with Automatic Column Hiding

June 27, 2017
Responsive Datatables allows automatic column hiding based on the size of the viewport. The responsiveness can be added by specifying class=’responsive’ in the HTML or by setting the responsive option as true while initializing Datatable. The automatic column hiding will happen from the right by default. That is, the rightmost columns will be hidden when the […]
This tutorial was added to jQuery.

Dynamic Content Modal via AJAX with jQuery

May 21, 2017
In this tutorial, we are going to load dynamic content for a jQuery modal via an AJAX request. I have added an example for loading dynamic content by requesting a PHP file via an AJAX call. In this PHP file, I have declared a content array containing the dynamic data to be loaded to the jQuery […]
This tutorial was added to jQuery.

Calculate Sum (Total) of DataTables Column using Footer Callback

May 12, 2017
DataTables provides callback functions to manipulate header and footer HTML data and add value to the presentation. Using these callback functions we can do various modifications to the resultant table dynamically. We can add information that adds value to the header and footer portion of the DataTables. For example, we can add column specific header information, […]
This tutorial was added to jQuery.

Creating Web Calendar in PHP using jQuery AJAX

May 1, 2017
Creating a calendar interface is easy in PHP. There are many date functions available in core PHP, I have used them to create a calendar UI in a web application. The functions for getting days/weeks count, weekday names, previous/next month dates are handy in creating the calendar view. The weekday names are displayed in the calendar header. […]
This tutorial was added to jQuery.

How to Create Tooltips with Bootstrap

April 27, 2017
In HTML, we can add a title attribute for an element. The text specified in this attribute is shown as a tooltip on the mouse over event. In this tutorial, we are going to create tooltips by using Bootstrap and it has good additional features over the standard tooltip. We initialize the Bootstrap tooltip by referring […]
This tutorial was added to Bootstrap.

Tags using Bootstrap Tags Input Plugin with Autocomplete

April 22, 2017
Tags are a way to group and organize content. For example, in WordPress, it provides tags as an inbuilt taxonomy to group the content. In this tutorial, we are going to see how to add tags using “Bootstrap Tags Input” plugin. This is a jQuery plugin that provides Bootstrap UI to add tags using a […]
This tutorial was added to jQuery.

Bootstrap Autocomplete with Dynamic Data Load using PHP Ajax

April 14, 2017
In this tutorial, we are going to see how to load data dynamically for an autocomplete suggestion list, Bootstrap Typeahead input field. I use jQuery AJAX to call the PHP MySQL script to read the data from the database and autocomplete dynamically. The loaded data will be returned to the source of the Typeahead script to […]
This tutorial was added to jQuery.

How to Create Typeahead (Auto-Complete) Field using Bootstrap

April 12, 2017
In this tutorial, we are going to see how to create an auto-complete field using Typeahead Library. It is a Twitter Bootstrap library used to add the auto-complete feature to the form input field. By initializing the Typeahead library with the form input field, it shows a list of auto-complete suggestions while typing data in this […]
This tutorial was added to jQuery.

jQuery AJAX Image Upload

April 3, 2017
When you use AJAx in the right sense, it will improve the user experience largely. In this article, let use see how to do image upload using jQuery via AJAX and add great experience. Showing preview without page refresh, showing the progress bar, adding preview with fade-in effect kind of minor feature additions to your image upload […]
This tutorial was added to jQuery.

Inline Insert using jQuery AJAX

March 8, 2017
In this tutorial, we are going to see how to do inline insert the HTML5 table data to a database table using jQuery and AJAX. HTML5 allows editing table cells by setting contentEditable attribute as true. After adding data to the table cells, we can pass the cell data to PHP via jQuery AJAX. In the PHP page, we create insert […]
This tutorial was added to jQuery.

↑ Back to Top