Smooth scrolling to top of page
Let’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 table
For 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 content
Do 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 columns
When 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 refresh
If 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 images
jQuery 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/window
The 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 jQuery
This 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 strength
When 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 jQuery
Although 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 scroll
Some 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 loaded
Here’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 alphabetically
On 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…