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

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.

How to Capture Browser Window resize with jQuery

JQuery

JQuery

In HTML it is not possible to add an element to 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.

This can simple done with the jQuery plugins which adds more features to the simple dropdown element.

In this tutorial, I show how you can insert an image in the dropdown with select2 and Easyautocomplete plugins.

Insert Image in Dropdown lists with jQuery

JQuery

In CSS !important is used 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.

In this tutorial, I show how you can add !important to CSS property with jQuery.

How to add !important to CSS property with jQuery

JQuery

It is better to restrict the user from entering invalid input and submit the form.

If the inputted data is invalid then the request is not been executed on the server-side script if added validation and the user needs to again fill the details.

If a field does not require a specific type value like – number, character, special character then stop the user from entering.

In this tutorial, I show how you can restrict keyboard character input with jQuery and JavaScript.

Restrict keyboard character input with jQuery

Javascript JQuery

When an AJAX request is sent to fetch records from the server then it may take times depending on the data processing or the number of records.

If the AJAX request takes more time then at the Client side there is no visible change is been displayed and the user doesn’t know whether its request is in progress or not.

You can display a loading image or text message on the page when AJAX request is in progress and hide it after getting a response.

In the demonstration, I am displaying a loading image when sending an AJAX request.

Display loading image when AJAX call is in progress

AJAX JQuery

With jQuery UI it is easier to add Datepicker on the textbox element or in any other HTML elements.

If you like to restrict access of users to select a date within a range then there is minDate and maxDate options are available in jQuery UI.

Using this you can set the date range of the Datepicker.

After defining this options the other days will be disabled which are not in defined range.

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

How to Set Minimum and Maximum Date in jQuery UI Datepicker

JQuery