Tuesday, July 14FreeJQuery

TUTORIALS

How To Add a Class to Your HTML with jQuery
2019, jQuery, TUTORIALS

How To Add a Class to Your HTML with jQuery

Add a Class to Your HTML with jQuery this Article Is About Add a Class to Your HTML with jQuery makes it super easy to dynamically add a class or several classes to any HTML element's using only one line of code and the .addClass() method. This trick can be really useful if you want to change the styling of a particular element depending on certain conditions, which you can define using jQuery code.Add a class name to the first <p> element: $("button").click(function(){ $("p:first").addClass("intro"); }); Let’s say you’d like to use jQuery to add a new class that will change the text to make it blue:Your CSS class might look something like this:1 blue{2 color: blue;3. }To apply the .blue class to the p tag, you’ll want to use jQu...
Using jQuery’s .resize() Method
2019, jQuery, TUTORIALS

Using jQuery’s .resize() Method

Using jQuery resize Method In This Article We discuss About Using jQuery resize Method is a cool way to have an event triggered or have a function executed when something is resized. For the purposes of this tutorial, we’re going to show you how to use the .resize() method to trigger an alert method whenever the window is resized. You might be surprised at how easy this functionality is to add to any of your code.In terms of syntax, the .resize() method is used in much the same was as any other jQuery method. Take a look at the snippet below to get a look for yourself:$(window).resize(function(){alert("The window has been resized!");})That’s all it takes to use the resize method to trigger an alert message once the window has been resized. Feel free to use the code...
How To Change or Restore Your CSS Using jQuery
2019, jQuery, TUTORIALS

How To Change or Restore Your CSS Using jQuery

Change or Restore Your CSS Using jQuery This Article Is About Change or Restore Your CSS Using jQuery The jQuery .css() method is an easy way to change the CSS of any HTML element, class, or ID without actually having to edit any of your stylesheets. The syntax for the .css() method is actually quite simple and somewhat similar to how your styles would appear in your stylesheets.If you’re using the .css() method to only add one new style rule to your HTML, the syntax should be like this:$("element").css("property name", "property value");If you’re trying to change the styling of more to one element, the syntax will differ slightly:$("element").css({"property name":"property value", "property name":"property value", "property name":"property value"});In the example belo...
How To Change images in a loop on hover using jQuery
2019, jQuery, RESOURCES, TUTORIALS

How To Change images in a loop on hover using jQuery

Change images in a loop on hover In This Article You find How To Change images in a loop on hover is a very common functionality that you’ll often find on e-commerce websites or portfolio websites. As an example, on the product list page, when you mouse over any product thumbnail, all the other images associated with that product start showing on top of the thumbnail after a specific interval. Many websites only have 2 images looping, which can be easily achieved via CSS only. But when there are more than 2 images to loop, you’ll need the help of a client side library. In this post, we’ll learn how to start the image loop on mouse over and then stop and reset the first image again on mouse out. HTML Markup  To get started, create a couple of div elements which contain the images. Each d...
Fade HTML Table Row on Hover Using jQuery
jQuery, TUTORIALS

Fade HTML Table Row on Hover Using jQuery

Fade HTML Table Row Fade HTML table Row are the ideal choice for displaying data in tabular form.  You can do different style experiments with tables for a better user experience. In this short post, we’ll also experiment with fading all rows except the selected row on hover to get user attention using jQuery and CSS. Fade HTML MARKUP To get started, create a standard HTML table on the page. For this demo, our table has 3 columns: Name, Age, Country and some random data. <table id="tblData"> <tr> <th>Name</th> <th>Age</th> <th>Country</th> </tr> <tr> <td>Maria Anders</td> <td>30</td> <td>Germany</td> </tr> <tr> <td>Francisco Chang</td> <td>24</t...