To the volleys of coders and software sentries who swear by single words accompanied with special characters and variegated bracket functions (code snippets), jQuery is almost synonymous to ‘indispensable’. Its ease of use, speed and strength are aggregately reflected in 60% of the top 10 000 websites.

Here is an array of 10+ jQuery code snippets that can come handy and can be used at the coder’s discretion. These snippets are easy to adapt, fun to code and can be used any number of times. Here snips the list.

1. Scroll to top

While this one ranks admirably high on the popularity charts, fact is this is among the most forgotten snippets. Four lines in the code allow users to scroll right to top of the page using a link. As a general norm, the link is placed at the bottom of the page.

$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});

 

2. Import external content

If there is a need to import content from an external destination to a particular division, the following jQuery snippet can be used and reused if needed.

$("#content").load("somefile.html", function(response, status, xhr) {
// error handling
if(status == "error") {
$("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);
}
});

 

3. Columns of equal height

If a website displays information in columns, it is for the better to make the columns equal in height. This renders a homogenous feel to the site. The code takes all div elements into consideration. Then, the heights are adjusted with impetus on the bigger elements.

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

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

 

4. Partial refresh

If there is a need to refresh only a particular portion of the page, this snippet can more than help. The 3 line code includes a #refresh div that is refreshed automatically once in every 10 seconds.

setInterval(function() {
$("#refresh").load(location.href+" #refresh>*","");
}, 10000); // milliseconds to wait

 

5. Table Stripes (Zebra pattern)

Tabular data can be made more pleasing to the eye by varying the colors across rows. The following snippet automatically adds a CSS class to every alternative row.

$(document).ready(function(){
$("table tr:even").addClass('stripe');
});

 

6. New tab for external links

The attribute target=”blank” allows the external links to be forced open in a new window or tab. While it is relevant to open some external links in a new window or tab, there are some links that should be necessarily opened in the parent window. The code automatically detects if a link is external. If positively tested, the target=”blank” attribute is assigned to such links.

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

 

7. Preload images

With jQuery images can be easily preloaded in the background. This means that visitors will not need to waste a lot of time if they want an image to be displayed. This code can be readily used. A minor update would be needed in line 8 for the image list.

$.preloadImages = function() {
for(var i = 0; i<arguments.length; i++) {
$("<img />").attr("src", arguments[i]);
}
}

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

 

8. Password strength test

If a website allows users to define their own passwords, it is a positive sign if the site also indicates the strength of the entered password. This snippet allows the same. Here is a test HTML:

<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>

 

Following is the jQuery code that will evaluate the strength of the user password. A subsequent message display indicates if the password is weak, medium or strong. Additionally, it also indicates if the length of the password is 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;
});

 

9. jQuery image resizing

While it is safer to resize the image on the other side of the server, knowing how to do so with jQuery can be a huge plus at times. The following snippet takes care of the same.

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

 

10. Load content on scroll

There are some websites that load content automatically with the user scrolling down. While such a design is generally used in Social media Sites, other commercial sites are also replicating it. The following snippet does the hard work.

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