20+ Handy jQuery Snippets for Web Designers

jQuery is our favorite tool when it comes to adding effects or heavy interactivity in a web design. Even though there are many jQuery plugins in the market, but you don’t have to require a plugin for day to day uses. For these tasks, you can just use little bits of codes come in handy in such sort of situations.

These little bits of codes are called snippets. And today we are sharing 21 most commonly used, hence most useful jQuery snippets for all web designers.

If you are a professional web designer or even if you are a beginning web developer who is getting his hands running on jQuery, this post is ideal for you.

You will even find some jQuery plugins for the uses that are defined below in snippets. There is always an advantage and disadvantage in both scenarios. If you use a plugin, you would get better, impressive results. However, they will increase load time because they are heavy.

These snippets are very lightweight.

jQuery Thumbnail

Preload Images

Using this snippet, you can preload images so that your visitor won’t have to wait for images to load. This effect is extremely useful when you have used a hover effect.
Don’t forget to change images list in line 8.

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

Scroll to Top Button

This is probably the most commonly used jQuery effect. Here’s how it’s made.

“800” is the duration in which the page will reach the top. In this example, it will take 800 milliseconds.

// Scroll To Top
$('html, body').animate({scrollTop : 0},800);
return false;
// Anchor tag for scroll to top
<a class=”top” href=”#”>Scroll to top</a>

Loading External Content

Have you ever required to load an external document (such as an external HTML file) to a div in the webpage, much like the iframe thing. Here’s how you do it, jQuery style.

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

Verifying that Images Loaded Properly

Sometimes images don’t load properly, and that can be a headache. You can check whether the images have loaded properly or not.

You can also replace img tag with ID or class.

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

Fixing Broken Images

This little code automatically fixes the broken images. What happens is that if you change the source image, it automatically shows you an image that you have set as the default image for broken-image-notification.

$(this).attr('src', ‘images/lostimg.jpg’);

Resize Images

If you wan to resize images on server-side, jQuery provides a smart solution.

$(window).bind("load", function() {
// Img Resizing
$('#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();
// Img Resizing

Zebra Style Table Stripes

One of the easiest ways to make tables visually appealing is adding a background color to every second column of the table. That is called zebra styling. Here’s how you can achieve that with tables.

$("table tr:even").addClass('stripe');

Zebra Style Lists

You already know what zebra styling is. You can add that styling to not only tables but also on lists as well.

This code will put a color of your choice to every odd list item. This example shows code for unordered lists.

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

Making two divs of the same height

Often in website designing, we need to make two divs of the same height disregard to the content they contain. The following line of code can achieve that.

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

Convert Divs to Full Width/Height to Viewport

This is a pretty useful cutting of code that lets you create full height and width divs according to viewport. If you are designing modal dialogs or popups, this is very useful.

// These are global variables
var winWidth = $(window).width();
var winHeight = $(window).height();
// set initial div height / width
'width': winWidth,
'height': winHeight,
// You have to confirm that div stays full width/height even when window is resized.
'width': winWidth,
'height': winHeight,

Partially Refreshing the Web Page

Often you want to update a certain portion of the page. That is if you are making a website that will be updated in real time. This can be a sports related website that updates latest scores, or this can be a news website that updates continuously… there can be many other examples. You can achieve that with the following code.

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

Opening External Links in New Tabs

If you are an SEO enthusiast, you would know the importance of bounce rate. You want people to visit lots of pages on your website, but you would want to open external links (URLs that lead to third party sites) in new tabs. This little code lets you do that.

$('a').each(function() {
var a = new RegExp('/' + window.location.host + '/');
if(!a.test(this.href)) {
$(this).click(function(event) {
window.open(this.href, '_blank');

Stop Link Load

This is not a piece of code that you will use on every project, but sometimes this becomes essential. Sometimes, we are not looking for the links to open a page, all we want is trigger another script.
If you are not understanding what is the use of this, just carry on.


How to Disable Input Fields

Sometimes, you want to disable functions of any form until the user has performed a certain action. For instance the user has clicked “I have read the terms” or the user has filled the captcha, and so on. This little piece of code allows you to do that.

$('input[type="submit"]').attr("disabled", true);

Once, the use has performed the desired action, you can run the removeAttr function on the input using this parameter.


Realtime Password Strength Check

This is a very common function that many websites use. Here’s how you do that.

Let’s first check the HTML.

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

And here’s the jQuery part. The password strength will be determined among three levels: pathetic, average and tough.

$('#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';
} else if (mediumRegex.test($(this).val())) {
$('#passstrength').className = 'alert';
} else {
$('#passstrength').className = 'error';
return true;

Alphabetical Sorting of Lists

Alphabetical ordering is one of the most commonly used methods of sorting out data. Here’s how jQuery can achieve that in any kind of list.

$(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) {

Toggle Hover Class

Even though we stated that hover effects might not be in fashion this year, but they obviously won’t go down that easy. So if you want to create a majestic hover effect by creating a separate class on mouse over, here’s what you can do.

}, function(){

Toggle Slide and Fade Animations

Slide and fade are two of the most common animation effects being used in web design today.

This code lets you  make an element appear on the first click, and then disappear on the second one.

// Fade Effect
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
// Toggle the fade effect
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");

Basic Level Accordion

This is a very simple, basic level accordion that you can make with jQuery without needing any plugin or extra ordinary code.
Don’t forget to develop necessary HTML to go with this.

// Close Everything
// Accordion Play Starts
var next = $(this).next();
return false;

Loading Content on Scroll

When a web page visitor reaches the end of the page, the page automatically loads more content. This effect is called infinite scroll and it is being used by Facebook newsfeed and twitter.

var loading = false;
if(loading == false){
loading = true;
$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
loading = false;
$(document).ready(function() {

So guys, I hope you liked the effort I made today. Until tomorrow, take care.

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved