8 awesome JQuery tips and tricks

by Jean. 102 Comments -

Who doesn’t like JQuery? This fast and easy to use Javascript framework became very popular in 2008. In the following article, I have compiled a list of 8 absolutely useful JQuery hacks, tips and tricks.

Target blank links

Do you use the target=blank attribute on links? If yes, you might know that XHTML 1.0 Strict don’t allow it. A good solution to this problem should be using JQuery to make links opening in new windows:

$('a[@rel$='external']').click(function(){
  this.target = "_blank";
});

/*
Usage:
<a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a>
*/

Get the total number of matched elements

That what I call a very simple, but very useful tip: This will return the number of matched elements:

$('element').size();

Preloading images

When you’re using images in Javascript, a good thing is to preload it before you have to use it. This code will do the job:

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

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

Detect browser

Although it is better to use CSS conditionnal comments to detect a specific browser and apply some css style, it is a very easy thing to do with JQuery, which can be useful at times.

//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" );

Remove a word in a text

Do you ever wanted to be able to remove words in a text? Note that the following code can be easily modified to replace a word by another.

var el = $('#id');
el.html(el.html().replace(/word/ig, ""));

Columns of equal height

This seems to be a highly-requested hack: How to use two CSS columns, and make them having exactly the same height? Happilly Rob from cssnewbie have the solution.

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

/*
Usage:
$(document).ready(function() {
    equalHeight($(".recent-article"));
    equalHeight($(".footer-col"));
});
*/

Source: Equal Height Columns with jQuery

Font resizing

Font Resizing is a very common feature in many modern websites. Here’s how to do it with JQuery.

$(document).ready(function(){
  // Reset Font Size
  var originalFontSize = $('html').css('font-size');
    $(".resetFont").click(function(){
    $('html').css('font-size', originalFontSize);
  });
  // Increase Font Size
  $(".increaseFont").click(function(){
    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
  $(".decreaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $('html').css('font-size', newFontSize);
    return false;
  });
});

Source: Text Resizing With jQuery

Disable right-click contextual menu

There’s many Javascript snippets available to disable right-click contextual menu, but JQuery makes things a lot easier:

$(document).ready(function(){  
    $(document).bind("contextmenu",function(e){  
        return false;  
    });  
});

Source: Fast Tip: How to cancel right click context menu in jQuery

  • http://www.webr.co.uk Web Design Manchester

    Nice tips!

    JQuery – my new favourite thing :)

  • Gaston

    Very nice.

    I use JQuery since I begin to use javascript and it is really awesome. Easy, lot of plugins …

    Those little tips can be very usefull

  • http://blog.insicdesigns.com insic

    jQuery really a nice framework. thumbs up

  • http://twitter.com/saurabhshah saurabh shah

    nice article… very useful… thnx for sharing …

  • http://www.shakaran.es shakaran

    Be nice if someone wrote these tips and tricks for Mootools as well ;)

  • http://www.wprecipes.com Jean-Baptiste Jung

    @shakaran: Nice idea, I should think about it for a future post :)

  • http://www.shakaran.es shakaran

    @Jean-Baptiste Jung: Wow! I’m willing to read it.

  • http://www.twitter.com/tkenny Tom Kenny

    Really, its 7 awesome tips as I don’t think right-click should ever be disabled on any site.

    The remove text tip will come in very handy, thanks!

  • http://techpp.com Raju

    superb tricks… simple but effective

  • http://www.richardjkeys.co.uk Richard J Keys

    I just reached a point in a project where I needed a handy way to preload images using jQuery…

    BAM! I was notified of this post.

    The preload function seems wrong though…

    @Tom Kenny I agree about disabling right clicks, not a very nice thing to do…

    Keep up the good work!

  • http://www.wprecipes.com Jean-Baptiste Jung

    I agree with you about disabling right click, this isn’t a good thing to do. I inclued this tip in the list for two reasons:
    -This is a good proof of JQuery possibilities
    -MANY people still wanna do this

    Thanks for the great feedback on the article!

  • http://www.twitter.com/tkenny Tom Kenny

    I appreciate that many people still want to disable right-click but I don’t think we should be encouraging people to do so. We should be discouraging it. :)

  • http://tekkim.info HeriNXI

    just learning jquery, simple and powerful (i think)…..

  • http://dk.provirilia.com Provirilia

    Great, nice info, just what i needed!

  • chris

    Awsome job on the preloading, nice and simple. Simple as it is I don’t understand it. in my editor it seems as though the ” are wrong? probably something to do with: i”) – would you mind explaining the code?

    Thanks!

  • chris

    As a followup to my last post, it is exactly as i thought, the code doesn’t work. updated version:

    jQuery.preloadImages = function(){
    jQuery.each(arguments,function(i){
    $(arguments[i]).attr(“src”, arguments[i]);
    });
    };

    still not convinced this works though, any graceful way of testing?

  • http://i.am-ad.am Adam Smith

    There is indeed something wrong with the preloading script.

    Any ideas?

  • Dylan

    The latest version of jQuery has deprecated the $.browser & browser detection. In it’s place is $.support & feature detection.

  • http://sitecrafting.com Paul

    @Adam – The problem is likely that you are using jQuery 1.3+. They removed the @ symbol from the selector engine.

    Also, I really like the equal height thing, but might I suggest passing in just a selector instead of a group? That would allow give you a lot more flexibility. You could still pass in a group if you really wanted to, but now you can just have a selector.

    function equalHeight(selector) {
    var max = 0;
    $(selector)
    .each(function() {
    max = Math.max(max, $(this).height());
    })
    .height(max);
    }

  • http://www.152.org ernest leitch

    I tried writing a quick image preloaded with jQuery awhile ago and ran into a world of problems. Each browser treats image loading differently. FF will queue all the images and load them in order, IE will load a little bit of each one, Safari will choke on the whole thing.

    I ended up writing my own with the least amount of bulk possible that would make it work across all browsers.

    *shameless plug*
    http://blog.152.org/2008/01/javascript-image-preloader.html

  • http://www.csskarma.com Tim Wright

    Overall, nice collection.

    I’ve actually had problems with that equal height columns function every time I’ve tried to use it.

  • http://www.smple.com John McMullen

    As far as the ‘_blank’ target for links, why not give the user full control?

    *another shameless plug*
    http://smple.com/link-control/

  • http://www.littmanbros.com/billiard-lighting.html Billiard Lighting

    thanks for the tips, i’m just getting into jquery and it seems like it’ll solve alot of problems for me.

  • yeah

    @tommy

    Never say never. I’ve seen plenty of examples where right clicking was totally disabled. It had more to do with people being able to still high rez images than anything but thats still an example

  • http://www.wholinks2you.com wholinks2you

    thanks for ur tips

  • Pingback: jQueryを使って右クリックメニューを禁止する方法 - IDEA*IDEA ~ 百式管理人のライフハックブログ

  • http://d.hatena.ne.jp/monjudoh/ monjudoh

    I think remove text tip is not good.
    it will break HTML structure.
    e.g.
    var el = $(‘#id’);
    el.html(el.html().replace(/div/ig, “”));

    I preferr the following code.

    $(‘#id’).find(‘*’).andSelf()
    .contents().not(‘[nodeType=1]‘)
    .each(function(){
    this.textContent = this.textContent.replace(/word/ig,”);
    });

  • dennis

    You can disable anything you want, encapsulate it in flash, whatever…it’s still a resource and needs to be loaded; if I want it, I can use any number of tools to identify what it’s source is (fiddlerTool, and various other plugins/native browser tools) and snag it… Leave the browsers native functionality in place, theres no way to prevent anyone with a desire from getting what they want. If need be I’ll just rewrite your code from inside the browser to gain the desired item.

  • ajpiano

    that preload images script is syntax error city

  • poppler

    Update to 1.3. Some of your recommendations are deprecated.

  • http://twitter.com/heziabrass Hezi

    Very useful! thanks for the tips.

    @heziabrass

  • http://www.leafydesignz.co.za Leafy Designz

    Great Stuff…

    I often use the following:

    Target blank links
    Preloading images

    Regards
    J

  • http://james.padolsey.com James

    When “removing words” you’ll probably want to check for word boundaries or spaces, otherwise you could be removing it from the middle of longer words. Additionally you’re replacing the entire HTML content meaning that attribute names/values will also be affected. I would suggest traversing through text nodes and replacing text one by one. Or, use $().text() instead of $().html().

    And instead of having to add rel=external manual why not just make the whole process automatic:
    $(‘a[href^=http://]:not[href^=http://' + window.location.hostname + ']‘).addClass(‘external’);

    One more thing: NEVER EVER DISABLE THE CONTEXT MENU. This severely impairs the usability of your site.

  • Pingback: jQuery 超简单停用右键选单.. at JASONT

  • Pingback: JeremiahTolbert.com » Blog Archive » links for 2009-03-13

  • http://www.smasra.com Money Academy

    i like this ” Disable right-click contextual menu” because i don’t want someone copy something from my blog but they can do with another way , thanks for this codes .

  • Jany

    Money Academy, hide you precious blog under the rock but keep your hands off my right-click.

  • http://binterest.com/ Malvinder Singh Virdi

    One of the Blog which I read on the regular basis was WP Hacks and Now it would be Cats who Code.. along with WP hacks… By the Way Nice information…. would try it….

  • http://www.niharsworld.com/ Nihar

    Thanks for the tricks. but, i would like to know where should i put this code so that it can be accessed by the wordpress.

    for ex: the 1st trick target=”_blank”. for this where i need to put that javascript code which checks rel=external and adds target=”_blank”

  • http://www.writingconsultation.com Sarah

    jQuery is interesting. I was trying to play with the coding the other day and found myself in a mess. Your post enlighten me on how jQuery works. :-)

  • http://jquery-magazine.com GrassyHill

    In #1 the @ has been deprecated awhile and no longer works in the latest versions. Don’t use it with “rel”, “href” or other attr lookup.

    A nice touch is to add a tool tip that warns about the link leaving the site and/or opening in a new window. Also, you can just look at the href attribute and drop the rel thing. No need to include the rel in the HTML or create it with JS.

    $(‘a[href^="http"]‘)
    .attr({
    target: “_blank”,
    title: “This link directs you to an external website and will open in a new window.”
    });

  • http://informationarchitech.com ajlozier

    for more advanced handling of external links (as well as a way to detect which links are external automatically) have a look at my $.externalify plugin: http://informationarchitech.com/externalify/ (or search the jquery plugins directory)

  • http://www.cosmedical.ca/ Stu

    Love the font resizing one, magic stuff!

    Although wouldn’t the browser detect one just be easier done in PHP?

  • http://www.quizzpot.com Hazel Q.

    Nice tips! Very useful and great content on you blog, I think I will come here more ;)

  • Pingback: Coderies | taggle.org

  • http://forthelose.org Wordpress Themes

    Really great post. I bet you got alot of traffic out of it, I know I did when I put a list of WordPress tips on my site.

  • http://www.benekdesign.com Benek

    For those of you who noticed the preloading images script is wrong, the correct script is here: http://www.mattfarina.com/2007/02/01/preloading_images_with_jquery

  • http://www.cosmedical.ca/ Stu

    I hate the disabling of the right click.

    Just goes against the way of the web.

  • Pingback: 筆記與流年 » 網路書簽 » links for 2009-03-19

  • http://www.itop10.com top 10

    I think disabling right click has some uses. Atleast the novice user of computer cannot easily copy material from your blog.

  • http://www.0window.com/blog/ Catrin W

    Jquery is ultimate tool of today, and learning new tips and tricks is never boring, as every one has its usefulness. Thanks for sharing.

  • http://bedavam.net Bedava indir

    just learning jquery, simple and powerful (i think)….

  • http://www.couponmonkey.de Gutscheincode

    Good little collection! Definetly very helpful.

  • http://www.registry-clean-up.net/rundll-error.html fix rundll

    Jquery is awesome, I am disappointed I have not learned it sooner. This is a great primer to get your feet wet!

  • http://www.tshirtinsight.com Stu

    JQuery really is a superb framework, there’s so much you can achieve with very little effort by using it. The image preloading function is especially useful and something I’m looking into right now.

  • http://www.solarpowertoptips.com/future-of-solar-energy.aspx Future Solar Energy

    Is Jquery Javascript of Java?

  • http://www.niharsworld.com/ Nihar

    Great tips. I need to first find out on the Net what is JQuery framework. how does it work.

  • http://www.gutscheincodes24.de Gutscheincodes24

    @Future: JQuery is Javascript-Framework

  • http://wwww.free-video-streaming.com clip

    Now every good webdesigner should use jquery to work…

  • http://italianforextrading.blogspot.com zappolo

    Nice tips…I’ll try!
    Thanks.

  • http://freewebmasterseotools.com Free Webmaster SEO Tools

    That columns of equal height just saved my life, very useful,
    Thanks

  • http://www.terapad.com Create a Website

    I just learned about jquery recently and known that it is very useful! Should have known about this earlier. Great post by the way!

  • http://seatsandchairs.wordpress.com Home theater seats

    Always seeking for good tips and tricks, i found much fresh tips more like Detect browser, thank you providing great source.

  • http://www.highlysearched.com Internet Marketing Houston

    Thanks for the great jquery tips. We recently started using it on several of our client’s websites and are undergoing a redesign ourselves and will be using it on our portfolio page, but I had no idea that it could be used for so many other things like font resizing. I am excited to try some of these out.

  • Pingback: Solutions Log → Dealing with the IE 7 (and 8) Transparency Bug with jQuery

  • http://www.greenearthbamboo.com bamboo sheets

    Everything thus far, has gone pretty smooth for me. Thanks for an outstanding job, will keep ya posted.

  • http://www.tintedpixel.com tintedPixel Web Design

    great tips, thanks!

  • http://iloilohouseandlot.com Lot

    Haha these are very simple but useful tips. They could become handy in the future. Thanks a lot!

  • http://www.hiphopdiscounts.com Steve | jordans

    I learned the similar skill 6 years ago while studying Javascript. I can see several application/online applications who are purely built in such technologies. Thanks for sharing the tips.

  • http://www.blueunplugged.com/p.aspx?p=119229 wii controller

    I dont want to say more but it is really a fantastic tips!

  • http://store.youngcomposers.com/music-software/notation-software.htm Mike – Music Notation Software

    Can you use JQuery to prevent someone from looking at the browser code?

  • Pingback: 8 个 JQuery 技巧和窍门 | 芒果

  • Pingback: Tips and Tricks links of JQuery « Potters’ Dig

  • Pingback: 零食屋 » Blog Archive » 8 个 JQuery 技巧和窍门

  • http://www.gutscheinradar.de Gunar

    Thanks for these nice tips!

  • avo

    Great, very useful tips. Except #1
    “you shouldn’t use target=_blank because xhtml does not allow it, so instead use javascript to insert the not allowed content in the page”
    I can’t quite follow the reasoning of that one :-P

  • Pingback: Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance « Technosiastic!

  • Amol

    This article is just Awesome

    Thanks and regards,
    Amol A. Bhavsar

  • Pingback: frontend.lt » Nuorodos #2

  • http://www.homefurnitureshowroom.com Morgan

    Thanks for the tips you had just what I was looking for.

    I agree with those saying not to disable right clicking. It’s pointless and just creates a pain for those who know how to get around it.

  • Charlie Epes

    Regarding “Removing a Word in a Text”

    Hi:
    Will you tell me where in this code I plug in my “word” or other variables?

    var el = $(‘#id’);
    el.html(el.html().replace(/word/ig, “”));

    Thanks-
    Charlie Epes

  • http://www.udasydney.com Spirytus

    thanks for the list! my 2 cents below..

    blocking right click is pretty pointless as there are 100′s of other ways of getting source code. seems so obvious yet I am surprised how many people consider this tip useful.

    image preloading… better use sprites and save traffic

    conditional statements… you mentioned you can use cond. statements to target browsers.. how would you target safari with conditional statements?

    @Avo .. target=”_blank” dosen’t validate to xhtml1.0/aaa and this tip is right on the spot

  • http://www.TabletopFountainStore.com/http://www.tabletopfountainstore.com/categories/Bamboo-Fountains/ Amy

    Great information!

    Jquery is awesome, I am disappointed I have not learned it sooner. This is a great primer to get your feet wet!

  • Pingback: 10 jQuery snippets for efficient developers

  • Pingback: 10 jQuery snippets for efficient developers « Share the world

  • http://night-fairy-tales.blogspot.com/ SMiGL

    Preloading images not working :(

  • Pingback: Top Ten Big Things I hope to do in MODx « The CMS less traveled

  • Prabhu

    i need help… how can i detect browser close event and that time jquery popup confirm box will come… is it possible to make it out…. if any one knows help me to find out solution…
    thanks

  • http://ealif.com ealif

    helped me a lot !

  • http://www.rajesharma.com broncha

    Nice tips.Thanks !

  • http://www.eclipsedesign.eu/ Eclipse Design

    Really cool snippets! Thanks

  • http://www.template-tuners.com/ Axinte Adrian

    I use a lot “Columns of equal height”..but this have a bug. Not working on safari :(
    anyway.. great tricks! ;) thx

  • http://lembar-coretan.blogspot.com Oemar

    Hmm, I like Jquery, but i think better just using HTML for create a link. Simple and fast for load.
    Nice trick..
    thank you

  • Pingback: 30 Pro jQuery Tips, Tricks and Strategies | Pro Blog Design

  • skeefee

    The way i preload my images is like that:

    HTML

    Javascript

    $(function(){
    $(“[preload]“).preloader();
    });

    $.fn.preloader = function(){
    $(this).each(function(){
    var img = $(this);
    var src = img.attr(“src”);
    var tmp = new Image();

    tmp.onload = function(){
    // do something after a images has loaded
    };
    tmp.src = src;
    })
    });

  • Jules César

    Hello, geat tips. For the Images Preloading one, i must put the JS script at the head, or i can still put it at the button??

  • Jack

    Doesn’t work in Firefox

  • http://www.savemypocket.de/ Otto Gutschein

    Very useful post. Some great jquery functions.

    @skeefee

    thanks for your code, this is a very useful one.

    Cheers,

    Otto

  • Ch. Kaleem Ahmad

    How to highlight every element either dive or a or p or anything when mouse enter and undo highlight when mouse leave in JQuery?
    Thanks

  • http://www.evancarroll.com Evan Carroll

    Improving the first script..

    The first script has numerous faults:
    * ‘@’ is deprecated see http://stackoverflow.com/q/8331236/124486
    * It adds the behavior only to elements that exist when the code executes.
    * It’s cheating: if the browser doesn’t support HTML 4, and just supports HTML 5 (theoretically) it won’t have implemented ‘target=”_blank”‘. This code breaks the spec, it just does in a fashion that will fool the W3C validator because it doesn’t have a functional JavaScript engine that can throw exceptions for illegal run-time modifications.
    * It only works if you the last word in the attribute is “external”, it won’t work with rel=”external me” as XFN use may generate.
    * It has to traverse the whole DOM.

    Instead, try this snippet which will grant the functionality to dynamically inserted code as well:

    $(function() {
    $(document).delegate( ‘a[rel*=external]‘, ‘click’, function() {
    window.open(this.href);
    return false;
    });
    });

  • http://www.talespinner.co.uk Mark Iliff

    “Columns of equal height” is really neat and terse. Thanks.

    µ

  • Anthony Delorie

    .length does the same as .size(), but more efficiently.