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

Comments (102) - Leave yours

  1. Gaston said:

    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

  2. Tom Kenny said:

    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!

  3. Richard J Keys said:

    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!

  4. Jean-Baptiste Jung said:

    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!

  5. Tom Kenny said:

    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. :)

  6. chris said:

    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!

  7. chris said:

    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?

  8. Dylan said:

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

  9. Paul said:

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

  10. ernest leitch said:

    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

  11. yeah said:

    @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

  12. monjudoh said:

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

  13. dennis said:

    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.

  14. James said:

    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.

  15. Money Academy said:

    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 .

  16. Nihar said:

    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”

  17. Sarah said:

    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. :-)

  18. GrassyHill said:

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

  19. ajlozier said:

    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)

  20. Benek said:

    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

  21. Stu said:

    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.

  22. Internet Marketing Houston said:

    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.

  23. Steve | jordans said:

    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.

  24. avo said:

    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

  25. Morgan said:

    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.

  26. Charlie Epes said:

    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

  27. Spirytus said:

    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

  28. Prabhu said:

    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

  29. Oemar said:

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

  30. skeefee said:

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

  31. Jules César said:

    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??

  32. Ch. Kaleem Ahmad said:

    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

  33. Evan Carroll said:

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!