Here Are 10 jQuery Snippets Every Designer Should Know!

1.Back to top button

// Back To Top
$(document.body).animate({scrollTop : 0},800);
return false;

//Create an anchor tag
Back to top

-There’s no need to use a plugin to create a simple scroll to top animation in jQuery. By simply changing the scrollTop value we can change where we want the scrollbar to land finally.

2.Checking if images are loaded

$(‘img’).load(function() {
console.log(‘image load successful’);

-Used to check if your images are fully loaded to continue with your scripts.

3.Fix broken images automatically

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

-Save yourself the trouble of replacing broken image links on our website one by one with this code.

4.Toggle class on hover

}, function(){

-Add a class to your element when the user is hovering and remove the same when the user stops it with this code.

5.Disabling input fields

$(‘input[type=”submit”]‘).attr(“disabled”, true);

-Add the disabled attribute to your input so you can enable it as and when you want with this code.

6.Stop the loading of links


-This piece of code will do the trick of preventing a default action.

7.Toggle fade/slide

// Fade
$( “.btn” ).click(function() {
$( “.element” ).fadeToggle(“slow”);

// Toggle
$( “.btn” ).click(function() {
$( “.element” ).slideToggle(“slow”);

-Make an element to appear on the first click and then disappear on the second using this code.

8.Simple accordion

// Close all Panels
// Accordion
var next = $(this).next();
return false;

-Simple method for a quick accordion.

9.Make two divs the same height

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

-Use this code when you want two divs to have the same height no matter what content they have in them.

10.Zebra stripped unordered list

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

-Create zebra striped unordered lists using this code.

Source: Web Designer Depot


Facebook Comments
Rate this post