Category: JQuery

Add tooltip widget to the control or an element to show a short description or some additional information about the control e.g. – what it does, what values the users can input on it.

It will show when the user moves the mouse pointer over the element.

In this tutorial, I am using jQuery UI to add tooltip that can be attached to any HTML control like – label, input element, span, paragraph, etc.

Easily add Tooltip to the control using jQuery UI Plugin

JQuery

The accordion is an expandable collapsable container layout which takes less space within the page. It is divided into multiple sections or parts and each has contents.

How it’s Work?

The user only able to view one section at a time for seeing other sections content he/she need to expand that section. When a section header gets clicked then it expands and show its content and collapsed previously opened section.

When its require?
When you page contains many forms or contents here, you can use it to divide them into various sections the effect of this is that now its look more user-friendly and easy to navigate.

Using jQuery UI to create an Accordion

JQuery

By adding file upload to the project, there may case arrives where you have to check image width and height before upload if you only allowed image files for uploading.

This is very common in Job Application Forms where the user has only can upload its profile photo of given dimensions other it’s not uploaded.

In this tutorial, I explain you with an example how to implement it. For uploading, I am using AJAX and PHP and done restriction with JavaScript.

How to Validate Image width And Height Before Upload Using JavaScript

AJAX Javascript JQuery PHP

The switchClass and toggleClass are jQuery methods that are used to swap classes from the element.

You can use these methods to change of state of the element according to the condition, toggling classes within the elements or maybe in some other cases.

In this tutorial, I am creating various examples to explain both methods.

How to use switchClass and toggleClass in jQuery

Javascript JQuery

The check and uncheck all functionality basically is seen where the large list of records are available. This small feature makes a little easier for the users to perform an action.

It is very useful when need to perform the same operation on all records instead of a specific record.

You may have seen this in Gmail, WordPress Admin dashboard.

In this tutorial, I show how you can implement this functionality with jQuery and JavaScript.

How to Check and uncheck all using jQuery and JavaScript

How To Javascript JQuery

It gives more flexibility to the user by allowing them to hide and show those columns which they don’t want to see on the list.

You can do this with jQuery by toggling the specific columns according to the selection.

In the demonstration, I am creating a table layout for listing the employee details and use check boxes to hide and show the table columns using jQuery.

How to Hide and Show the Table column using jQuery

JQuery PHP

JQuery PHP