9 useful jQuery code snippets

jQuery is one of the most popular JS library among front end developers because of its functionality and usability. Here we share with you some useful jQuery code snippets which can be used in our daily front end development.

1. Smoothly return to page top

$(document).ready(function() {  
    $("a.topLink").click(function() {
        $("html, body").animate({
            scrollTop: $($(this).attr("href")).offset().top + "px"
        }, {
            duration: 500,
            easing: "swing"
        });
        return false;
    });
});

2. Modify image size

$(window).bind("load", function() {
    // Modify image size
    $('#imglist 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;
        }
        if(height > maxHeight){
            ratio = maxHeight / height;
            $(this).css("height", maxHeight);
            $(this).css("width", width * ratio);
            width = width * ratio;
        }
    });
});

3. Scrolling loading

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);
});

4. Check password strength

$('#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;
});

5. Keep DIVs the same height

var maxHeight = 0;
 
$("div").each(function(){
    if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
 
$("div").height(maxHeight);

6. Process PNGs on IE6

$('.pngfix').each( function() {
    $(this).attr('writing-mode', 'tb-rl');
    $(this).css('background-image', 'none');
    $(this).css( 'filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/image.png",sizingMethod="scale")');
});

Change class=pngfix accordingly

7. Handle JSON

function parseJson(){
    //Start by calling the json object, I will be using a
    //file from my own site for the tutorial
    //Then we declare a callback function to process the data
    $.getJSON('hcj.json',getPosts);
    //The process function, I am going to get the title,
    //url and excerpt for 5 latest posts
    function getPosts(data){
        //Start a for loop with a limit of 5
        for(var i = 0; i < 5; i++){
            //Build a template string of
            //the post title, url and excerpt
            var strPost = '<h2>'
                + data.posts[i].title
                + '</h2>'
                + '<p>'
                + data.posts[i].excerpt
                + '</p>'
                + '<a href="'
                + data.posts[i].url
                + '" title="Read '
                + data.posts[i].title
                + '">Read ></a>';
            //Append the body with the string
            $('body').append(strPost);
        }
    }
}
//Fire off the function in your document ready
$(document).ready(function(){
    parseJson();    
});

8. Make DIV clickable

$(".myBox").click(function(){
    window.location=$(this).find("a").attr("href");
    return false;
});

9. Image preloading like Facebook

var nextimage = "http://www.gbtags.com/gb/networks/uploadimgthumb/55d67b14-fb25-45e7-acc8-211a41047ef0.jpg";
    $(document).ready(function(){
        window.setTimeout(function(){
            var img = $("<img>").attr("src", nextimage).load(function(){
            $('div').append(img);
        });
    }, 100);
});

Source : http://www.gbtags.com/gb/share/1373.htm