Once again, I’ve gathered some of the useful jQuery tips and tricks for you to see how great jQuery can be.

Here they are:

1. Preloading Images

With this trick you could preload images in JavaScript before using them.

jQuery.preloadImages = function()
 for(var i = 0; i ").attr("src", arguments[i]);

// Usage
$.preloadImages("image1.gif", "/path/to/image2.png", "some/image3.jpg");

2. Target Blank Links

Avoid XHTML 1.0 to restrict your target=blank code. Use this jQuery trick to do such thing.

 this.target = "_blank";


3. Get the total number of matched elements


4. Detect Browser

CSS’ conditional comment is pretty useful to detect browser and apply some css style.

//A. Target Safari
if( $.browser.safari ) $("#menu li a").css("padding", "1em 1.2em" );

//B. Target anything above IE6
if ($.browser.msie && $.browser.version > 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//C. Target IE6 and below
if ($.browser.msie && $.browser.version < = 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//D. Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding", "1em 1.8em" );

5. Columns of equal Height

Yes this is possible with the following jQuery trick.

function equalHeight(group) {
 tallest = 0;
 group.each(function() {
 thisHeight = $(this).height();
 if(thisHeight > tallest) {
 tallest = thisHeight;

$(document).ready(function() {

6. Font Resize

Resize fonts using jQuery.

 // Reset Font Size
 var originalFontSize = $('html').css('font-size');
 $('html').css('font-size', originalFontSize);
 // Increase Font Size
 var currentFontSize = $('html').css('font-size');
 var currentFontSizeNum = parseFloat(currentFontSize, 10);
 var newFontSize = currentFontSizeNum*1.2;
 $('html').css('font-size', newFontSize);
 return false;
 // Decrease Font Size
 var currentFontSize = $('html').css('font-size');
 var currentFontSizeNum = parseFloat(currentFontSize, 10);
 var newFontSize = currentFontSizeNum*0.8;
 $('html').css('font-size', newFontSize);
 return false;

7. Remove a word in a text

Remove any word in a text using this jQuery trick.

var el = $('#id');
el.html(el.html().replace(/word/ig, ""));
Tags: jquery tips, jquery tricks
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • Nitin Maheta

    nice… thanks…

Ending Soon
Free SitePoint Premium

Get one free year of unlimited book and course downloads on SitePoint Premium!