10+ handy and reusable jQuery code snippets | CatsWhoCode.com | Published on January 21st, 2014 by Jean-Baptiste Jung

ReusableJquery

10+ handy and reusable jQuery code snippetsPublished on January 21st, 2014 by Jean-Baptiste Jung. 1 Comment -

Over the years, jQuery became a must-use for every web developer. It is simple to use, fast and very powerful. In this article I have put together a series of 10+ handy jQuery code snippets you may save and copy to use at your own discretion. These snippets are super easy to adapt to match your own script.

Smooth scrolling to top of pageLet’s start this list by a very popular and useful snippet: Those 4 lines will allow your visitors to smooth scrool to the top of the page simply by clicking a a link (with #top id) located at the bottom of your page.
$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Source: http://stackoverflow.com/questions/1144805/how-do-i-scroll…
Clone table header to the bottom of tableFor a better readability of your tables, it can be a good idea to clone the table header on the bottom of the table. This is what this useful snippet do.
var $tfoot = $('<tfoot></tfoot>');
$($('thead').clone(true, true).children().get().reverse()).each(function(){
    $tfoot.append($(this));
});
$tfoot.insertAfter('table thead');

Source: http://lunart.com.ua/jquery
Load external contentDo you need to add some external content to a div? It is pretty easy to do with jQuery, as demonstrated in the example below:
$("#content").load("somefile.html", function(response, status, xhr) {
  // error handling
  if(status == "error") {
    $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);
  }
});

Source: http://api.jquery.com/load/
Equal height columnsWhen you’re using columns to display content on your site, it definitely look better if the columns have an equal height. The code below will take all div elements with the .col class and will adjust their heights according to the bigger element. Super useful!
var maxheight = 0;
$("div.col").each(function(){
  if($(this).height() > maxheight) { maxheight = $(this).height(); }
});

$("div.col").height(maxheight);

Source: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/
Table Stripes (Zebra)When displaying data on a table, alternating colors on each row definitely increases readability. Here’s a snippet to automatically add a CSS class to one row of out two.
$(document).ready(function(){                             
     $("table tr:even").addClass('stripe');
});

Source: http://www.alovefordesign.com/5-jquery-must-have-code-snippets/
Partial page refreshIf you need to refresh only a portion of a page, the 3 lines of code below will definitely help. In this example, a #refresh div is automatically refreshed every 10 seconds.
setInterval(function() {
$("#refresh").load(location.href+" #refresh>*","");
}, 10000); // milliseconds to wait

Source: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/
Preload imagesjQuery make it easy to preload images in the background so visitors won’t have to wait forever when they would like to display an image. This code is ready to use, just update the image list on line 8.
$.preloadImages = function() {
       for(var i = 0; i<arguments.length; i++) {
               $("<img />").attr("src", arguments[i]);
       }
}

$(document).ready(function() {
       $.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
});

Source: http://css-tricks.com/snippets/jquery/image-preloader/
Open external links in a new tab/windowThe target="blank" attribute allows you to force opening of links in new windows. While it is relevant to open external links in a new tab or window, same domain links should definitely be opened in the same window.
This code detect if a link is external, and if yes, adds a target="blank" attribute to it.
$('a').each(function() {
   var a = new RegExp('/' + window.location.host + '/');
   if(!a.test(this.href)) {
       $(this).click(function(event) {
           event.preventDefault();
           event.stopPropagation();
           window.open(this.href, '_blank');
       });
   }
});

Source: http://css-tricks.com/snippets/jquery/open-external-links-in-new-window/
Div full Width/Height of viewport with jQueryThis handy piece of code allows you to create a full width/height div according to the viewport. The code also handles window resizing. Great for modal dialogs or popups.
// global vars
var winWidth = $(window).width();
var winHeight = $(window).height();

// set initial div height / width
$('div').css({
    'width': winWidth,
'height': winHeight,
});

// make sure div stays full width/height on resize
$(window).resize(function(){
    $('div').css({
    'width': winWidth,
    'height': winHeight,
});
});

Source: http://www.jqueryrain.com/2013/03/div-full-widthheight-of-viewport-with-jquery/
Test password strengthWhen you let users defining their password, it is generally a good thing to indicate how strong the password is. This is exactly what this code do.
First, assume this HTML:
<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>

And here is the corresponding jQuery code. The entered password will be evaluated using regular expressions and a message will be returned to the user to let him know if his chosen password is strong, medium, weak, or too short.
$('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('More Characters');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Strong!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#passstrength').html('Medium!');
     } else {
             $('#passstrength').className = 'error';
             $('#passstrength').html('Weak!');
     }
     return true;
});

Source: http://css-tricks.com/snippets/jquery/password-strength/
Image resizing using jQueryAlthough you should resize your images on server side (using PHP and GD for example) it can be useful to be able to resize images using jQuery. Here’s a snippet to do it.
$(window).bind("load", function() {
        // IMAGE RESIZE
        $('#product_cat_list img').each(function() {
                var maxWidth = 120;
                var maxHeight = 120;
                var ratio = 0;
                var width = $(this).width();
                var height = $(this).height();
        
                if(width > maxWidth){
                        ratio = maxWidth / width;
                        $(this).css("width", maxWidth);
                        $(this).css("height", height * ratio);
                        height = height * ratio;
                }
                var width = $(this).width();
                var height = $(this).height();
                if(height > maxHeight){
                        ratio = maxHeight / height;
                        $(this).css("height", maxHeight);
                        $(this).css("width", width * ratio);
                        width = width * ratio;
                }
        });
        //$("#contentpage img").show();
        // IMAGE RESIZE
});

Source: http://snipplr.com/view/62552/mage-resize/
Automatically load content on scrollSome websites such as Twitter loads content on scroll. Which means that all content is dynamically loaded on a single page as long as you scroll down.
Here’s how you can replicate this effect on your website:
var loading = false;
$(window).scroll(function(){
        if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
                if(loading == false){
                        loading = true;
                        $('#loadingbar').css("display","block");
                        $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
                                $('body').append(loaded);
                                $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
                                $('#loadingbar').css("display","none");
                                loading = false;
                        });
                }
        }
});

$(document).ready(function() {
        $('#loaded_max').val(50);
});

Source: http://fatfolderdesign.com/173/content-load-on-scroll-with-jquery
Check if an image is loadedHere’s a snippet I often use when working with images, as it is the best way to know if an image is loaded or not.
var imgsrc = 'img/image1.png';
$('<img/>').load(function () {
    alert('image loaded');
}).error(function () {
    alert('error loading image');
}).attr('src', imgsrc);

Source: http://tympanus.net/codrops/2010/01/05/some-useful…
Sort a list alphabeticallyOn some cases, it can be very useful a sort a long list by alphabetical order. This snippet take any list and order its element alphabetically.
$(function() {
    $.fn.sortList = function() {
    var mylist = $(this);
    var listitems = $('li', mylist).get();
    listitems.sort(function(a, b) {
        var compA = $(a).text().toUpperCase();
        var compB = $(b).text().toUpperCase();
        return (compA < compB) ? -1 : 1;
    });
    $.each(listitems, function(i, itm) {
        mylist.append(itm);
    });
   }

    $("ul#demoOne").sortList();

});

Source: http://stackoverflow.com/questions/13394796/javascript-jquery-to-sort…
More posts about JavaScript
	* Useful jQuery code snippets
	* Super useful jQuery plugins for responsive web design
	* Super useful online tools to make JavaScript development easier
	* Awesome jQuery snippets to work with forms
	* jQuery plugins for awesome web typography
	* Tutorials and snippets to get started with CoffeeScript

Share this article
Tweet
90
This page has been shared 90 times. View these Tweets.
37
Like
60