Category: Jquery

Twitter only allows maximum 140 characters of a tweet. At the time of entering input, it shows how many characters are remaining.

Remaining character value changes on every character input.

Similar to Twitter other websites also uses the same functionality.

For example – In the medium, you could see this in Bio section there it allows 160 character input after that it didn’t take any inputs.

In this tutorial, I am creating the similar type of functionality with jQuery.

Twitter like remaining character count using jQuery

Javascript Jquery

With sorting the list it is easier for the user to locate items in a sorted list than unsorted. It rearranges the data in specific order (ascending or descending).

You can either use PHP or AJAX to get the sorted data.

I am using AJAX to sort the list in this tutorial.

In the demonstration, I am displaying the employee’s list and attach click event on the table column header. Whenever header gets clicked then send an AJAX request with column name to sort with.

Sorting the Table by clicking Header with AJAX

AJAX Jquery PHP

A tooltip is a small pop-up element which shows information when moving the mouse pointer to the element. You can dynamically update the tooltip content with AJAX if you don’t want to fix the content while creation.

You can add the tooltip to the element with Bootstrap, jQueryUI, or any other library.

I am using jQuery UI library in the tutorial.

In the demonstration, I am displaying the list of users and dynamically load information on the tooltip with AJAX on mouse hover.

Dynamically show data in the Tooltip using AJAX

AJAX Jquery PHP

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 there is the large list of records are available. This small feature makes little easier for the users to perform an action.

You may have seen it on 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

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