The hovering effect As you bring the mouse over an element, the hover event occurs. You may perform certain things by using jQuery as this occurs. In this tutorial, I am using the “jQuery-hover-effects” plug-in, which is a light-weight, just 6Kb JS file for creating hover effects on elements. Basically, this plug-in will show the … Read more
The jQuery-CSS-Carousel plug-in In this tutorial, I am going to show how you can use a simple jQuery plug-in that acts as carousel and image rotator. The plug-in is light-weight and only requires adding a few lines of code in your web page where you intend to use it. Before explaining how to set up … Read more
The parallax scrolling? The parallax scrolling is a concept where background (that generally is the image(s) with 3D effects) moves slower than the foreground. This concept is particularly popular for one-page websites. There are many plug-ins that enable creating the parallax animation or effect in your web pages. In this tutorial, I am going to … Read more
Animating HTML elements In jQuery animate method’s tutorial, I showed how you can use the $.animate method for simple animations of HTML elements like a div, circle, and other UI elements. Similarly, in the free template section, I used animate.css plug-in for creating animations in different elements that used different effects like bounceIn, bounceOut, etc. … Read more
Why use $.Conflict method in jQuery In your web projects, you may be using different JS libraries for different tasks including jQuery. Different libraries use an alias for calling its methods or for some other syntax. The default alias or shortcut used in jQuery is “$” sign. For example: $(document).ready(function(){ $(‘button’).click(function(){ And so on. The “$” is … Read more
jQuery $.live and $.on methods In this tutorial, I will explain how $.on method has replaced the deprecated jQuery live method from the version 1.7 of jQuery. Replacement of jQuery $.live by $.on method This is how $.live method was used to attach event handlers to the current or future specified elements: $(“div”).live(“click”, function_name) Where div … Read more
The cookies in jQuery Although there is no direct way provided in the jQuery library, as of today when writing about this, you can use third-party plug-ins for creating, accessing, and deleting cookies by using jQuery in your web projects. Just to remind you, the cookies are used to create a small piece of information on … Read more
Why do we use jQuery children and find methods? The $.children and $.find methods are used to get the decedent of the specified elements like a div, paragraph, span, HTML table, etc. It can be a selector or jQuery object as well that you can specify in these two methods. What is the difference? The … Read more
The purpose of parent method in jQuery The $.parent and $.parents methods of jQuery are used to travel through up in the DOM structure for the specified element. The difference between the two methods is that the parent method traverses just one level up while the parents jQuery method travels all ancestors of the specified … Read more
The HTML select dropdown and jQuery In certain scenarios, you need to work with forms in web projects and get value selected by the user, particularly in the select dropdown to perform a certain action without refreshing the web page. In this tutorial, I will show you examples of using HTML select to get the … Read more
The hover method in jQuery The jQuery hover method binds two handlers as the mouse enters and leaves a specified element like a link, a paragraph, lists, and others. You may execute the code in those handlers like changing the background colors, fonts, adding text, or some other actions. Syntax of using hover method This … Read more
Using substring method in jQuery In a series of JavaScript tutorials, I explained with examples of how you can use the substring and substr methods to get substrings. As such, jQuery is the library of JavaScript; you can use these methods in jQuery as well to get the substrings. See the following examples of using … Read more
The $.get method of jQuery The jQuery $.get method is used to load data from the server by HTTP GET request asynchronously. The $.get method is the shorthand of main AJAX method that makes it simple to make ajax calls. The $.get method is the shorthand of main AJAX method that makes it simple to … Read more
How to use toggleClass method The toggleClass method is used to add or remove class(es) in the specified HTML elements. If the class is already applied, it will be removed at first action. If a class does not exist in that element, then the specified class will be added. Syntax of jQuery toggleClass Following is … Read more
The removeClass method The jQuery removeClass method is used to remove one or more classes from the specified elements. For example: $(“div”).removeClass(“class_to_remove”); The above code will remove the given class from all div elements in the web page. To remove more than one class, separate it by space: $(“div”).removeClass(“class_1 class_2 class_3”); To remove all … Read more