10 jQuery part that every designer should know

jQuery is the most common libraries used for web pages that are inserted into them and are used in most of the web pages. It makes DOM manipulation a snap.

Part of jQuery is popular for its simplicity and can be used for creating anything with this powerful library.

There are few parts of jQuery that are used by most designers. We are going to those 10 jQuery snippets that everyone, from a beginner to an expert use and will be using from time to time.

1.      Back to top button

// Back To Top

$('a.top').click(function(){

$(document.body).animate({scrollTop : 0},800);

return false;

});

//Create an anchor tag

<a class=”top” href=”#”>Back to top</a>

For creating a simple scroll to top animation, no plugin is required in jQuery using the animate and scrollTop functions.

It is possible to adjust the scrollbar by changing the scrollTop value. In the case above, the value used is 0, as by doing this it will be able to scroll to the very top of the page. But if an offset of 100px is required, then it could have been possible by simply inserting 100px in the function.

2.      Checking if images are loaded

$(‘img’).load(function() {

console.log(‘image load successful’);

});

Sometimes, the embedded images might not get loaded. It is necessary for the images to get fully loaded so as to continue with the scripts. The above jQuery can do that easily.

Also, it is possible to check if the images are fully loaded or not. This can be done by replacing the img tag with an ID or class.

$('img').error(function(){

$(this).attr('src', ‘img/broken.png’);

});

It is found mostly found that there is a broken image links on the website. It is not very easy to replace them one by one. By the simple code above, the issue can be avoided and can save lot of time. Even there is no broken links, by adding the code it will not create any harm or error. 

3.      Toggle class on hover

$(‘.btn').hover(function(){

$(this).addClass(‘hover’);

}, function(){

$(this).removeClass(‘hover’);

}

4.      ); Fixing the broken images automatically

This jQuery snippet changes the visuals of a clickable item in a web page when the user hovers over an item. It adds to the class element when the user is hovering and when the user stops doing it, it removes the class. So all you need to do is add the necessary styles in your CSS file.

We usually want to change the visual of a clickable element on our page when the user hovers over and this jQuery snippet does just that, it adds a class to your element when the user is hovering and when the user stops it removes the class, so all you need to do is add the necessary styles in your CSS file.

5.      Disabling the input fields

$('input[type="submit"]').attr("disabled", true);

Sometimes in a form, the submit button or the input fields are disabled and remain diabled until the user performs or fulfils a particular action (checking the “I’ve read the terms” checkbox for example) and when the user fulfils such condition, the disabled attribute gts enabled.

To do that all you need to do is run the removeAttr function on the input with disabled as the parameter:

$('input[type="submit"]').removeAttr("disabled”);

6.      To stop loading of the links

$(‘a.no-link').click(function(e){

e.preventDefault();

});

The situation when it is not preferred that the links go to a certain page or even reload it, and is preferred that it does something else such as trigger some other script. In such case, this code will help in executing the trick of preventing the default action.

7.      Toggle fade/slide

// Fade

$( “.btn" ).click(function() {

$( “.element" ).fadeToggle("slow");

});

// Toggle

$( “.btn" ).click(function() {

$( “.element" ).slideToggle("slow");

});

Slides and Fades are used a lot in the animations using jQuery to enhance the effects. However, if a particular element to appear on the first click and then disappear on the second this code will work perfectly.

8.      Simple accordion

// Close all Panels

$('#accordion').find(‘.content').hide();

// Accordion

$('#accordion').find(‘.accordion-header').click(function(){

var next = $(this).next();

next.slideToggle('fast’);

$(‘.content’).not(next).slideUp('fast’);

return false;

});

By adding this script all you really need to on your page is the necessary HTML go get this working.

9.      Making two divs the same height

$(‘.div').css('min-height', $(‘.main-div').height());

Sometimes, when it is needed to have two divs of the same height, no matter what content is there, this snippet allows the two divs of the same height.

10.      Zebra stripped unordered list

$('li:odd').css('background', '#E8E8E8’);

With the help of this script, it is an easy task to create zebra stripped unordered lists. This script can be used with any type of markup, from tables to plain divs.