Category: Jquery

In jQuery, there are various methods like – switchClass(), toggleClass(), addClass() and removeClass() by using them you can easily add or removes classes in the elements.

For using switchClass() method you need to include jQuery UI library within your page but you can simply use toggleClass(), addClass() and removeClass() without any dependency other than jQuery.

In this tutorial, I discuss about addClass() and removeClass() method.

.addClass() and .removeClass() methods in jQuery


The CSS media queries are very helpful when making the responsive website. They automatically execute the changes when the window size is in its range.

There is another way to detect Browser window size and execute changes is with jQuery that gives you window width and height.

You can use those values to complete your task.

Capture Browser window resize with jQuery



In HTML it is not possible to add an element in the dropdown list. You need to customize it.

For example –

If you try to add a search box in an <option> or add a country flag image following with country name. When you run it you don’t see any changes in the dropdown.

You can do both operations with select2 jQuery plugin.

Insert image in dropdown lists with jQuery


In CSS !important is use to increase the priority of a CSS property. This ignores the overriding properties.

In jQuery, you can use the css() method to manipulate style property of the selector but this doesn’t allow to set !important to property.

For example –

$('#txt').css('width', '100px !important');

The above code doesn’t work when you run it.

I show How you can add !important to CSS property with jQuery.

How to add !important to CSS property with jQuery


The user gets frustrated when its fill all information in the form and submits it then the data not being submitted because of invalid input.

In this case, instead of checking all values on your server side script you can also do this in Client side with jQuery JavaScript.

Now the user only able to input valid character from its keyboard.

For example, you has doesn’t require alphabets in age field then you can restrict the input element to take only numbers.

In this tutorial, I show how you restrict keyboard character with jQuery.
keyboard character


When you send AJAX request to fetch the long list of data from the server then it may take some time to process your request and return.

During this case, at the user end, there is no change is being displayed and it doesn’t know either its request is in progress or not. If the user is on the slow network then its take some more time.

You can display a loading Text message on the screen or show an image loader.

In this tutorial, I show you How to display loading image when you are making AJAX request. But you can do the same with Text message.

Display loading image when AJAX call is in progress

AJAX Jquery

While using jQuery UI Datepicker in your project you want to allow users to select only days between your specified date range.

jQuery UI Datepicker has two options – minDate, and maxDate that allow you to specific date range to your Datepicker.

It simply disables other days which are not between the defined range.

In this tutorial, I show you how to use both options in your jQuery UI Datepicker.

How to Set minimum and maximum date in jQuery UI Datepicker


You have seen on many Mobile apps when you pull down from the top and release it the content is been refreshed.

The common example of this you see in Chrome, Opera mini browser for mobile.

In this tutorial, I show How you can add the similar type of functionality to your web page in desktop view.

What in the demonstration?

I will create two examples,

  • Reload page when the user pulls down the button at the specified height.
  • Reload page when the user releases the button.

How to make Pull down to refresh webpage with jQuery

How To Jquery

jQuery not only allow us to attach Event Handlers on the element it also allows to take control the flow of the events.

You can enable and disable an event whenever you want in your program.

When it’s required?

  • The event is no longer needed on the element.
  • Enable event when the specific condition is TRUE otherwise disables it. The most common example, of this you see on Registration page of many websites where they don’t enable click event until the user is not checked I agree on terms & conditions.

jQuery has on() and off() method that helps you to enable and disable your specific selector.

Enable and Disable Event from element with jQuery