Techniques

Useful and Handy jQuery Tips and Tricks

Written by Kevin Liew on 25 Mar 2009
171,321 Views • Shares
54 comments

When I start learning jQuery, I always look for a best way to implement a code. Or sometimes, look for the simplest solution among the rest, though it's not the elegant way to do it, but it's easy to understand. So, now, I'm gonna show you my favourite collection of jQuery tips and tricks

1. jQuery cheatsheets

First of all, it's good to have a cheatsheet as a reference. I found 3 of them online:

jQuery Cheatsheet from ColorCharge
jQuery Cheatsheet from ColorCharge WebBlog

jQuery Cheatsheet from Gscottolson WebBlog
jQuery Cheatsheet from Gscottolson WebBlog

jQuery Cheatsheet from From Far East WebBlog
jQuery Cheatsheet from From Far East WebBlog

2. jQuery $(document).ready shorthand

This is a great tip! Instead of doing this
$(document).ready(function() {  
//write your code here
}
You can also do this, both are the same!
$(function(){
//write your code here
}); 

3. Open in new window

Target attribute is not valid in STRICT W3C standard. Thus, we need to use REL and a bit of jQuery code to dynamically create the attribute to avoid validation error. This is one of my favourite codes. It's so simple and does the job well.
	$('a[rel=external]').attr('target','_blank');
<a href="http://www.queness.com" rel="external">Queness in new window</a>

<ul>
	<li><a href="home">home</a></li>
	<li><a href="home">about</a></li>
	<li><a href="home">contact</a></li>
</ul>

<link rel="stylesheet" href="default.css" type="text/css">
......
<a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> 
<a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> 
<a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a>

<p></p>

<a href="#" id="close"></a>

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
......
<a id="top" style="cursor:hand;cursor:pointer">
Back to top

<div class="col" style="border:1px solid">Column One<br/>
With Two Line<br/>
And the height is different<br/><br/>
</div>
<div class="col" style="border:1px solid">Column Two<br/><br/></div>


<a class="increaseFont">+</a> | 
<a class="decreaseFont">-</a> | 
<a class="resetFont">=</a>


<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>
<div class="section2">This one is adjustable too!</div>

4. Make the entire LI clickable

This trick is very useful when you're using UL list to make a menu. What it does is, when you click on the LI area (outside of the link), it will search for the url in the anchor tag and execute the link:
	$("ul li").click(function(){
	  //get the url from href attribute and launch the url
	  window.location=$(this).find("a").attr("href"); return false;
	});
<a href="http://www.queness.com" rel="external">Queness in new window</a>

<ul>
	<li><a href="home">home</a></li>
	<li><a href="home">about</a></li>
	<li><a href="home">contact</a></li>
</ul>

<link rel="stylesheet" href="default.css" type="text/css">
......
<a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> 
<a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> 
<a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a>

<p></p>

<a href="#" id="close"></a>

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
......
<a id="top" style="cursor:hand;cursor:pointer">
Back to top

<div class="col" style="border:1px solid">Column One<br/>
With Two Line<br/>
And the height is different<br/><br/>
</div>
<div class="col" style="border:1px solid">Column Two<br/><br/></div>


<a class="increaseFont">+</a> | 
<a class="decreaseFont">-</a> | 
<a class="resetFont">=</a>


<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>
<div class="section2">This one is adjustable too!</div>

5. Switch to different CSS style sheets

You want to have different design for your website. You can use this to switch to different CSS Style Sheets:
	$("a.cssSwitcher").click(function() {
		//swicth the LINK REL attribute with the value in A REL attribute
		$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
	});
<a href="http://www.queness.com" rel="external">Queness in new window</a>

<ul>
	<li><a href="home">home</a></li>
	<li><a href="home">about</a></li>
	<li><a href="home">contact</a></li>
</ul>

<link rel="stylesheet" href="default.css" type="text/css">
......
<a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> 
<a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> 
<a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a>

<p></p>

<a href="#" id="close"></a>

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
......
<a id="top" style="cursor:hand;cursor:pointer">
Back to top

<div class="col" style="border:1px solid">Column One<br/>
With Two Line<br/>
And the height is different<br/><br/>
</div>
<div class="col" style="border:1px solid">Column Two<br/><br/></div>


<a class="increaseFont">+</a> | 
<a class="decreaseFont">-</a> | 
<a class="resetFont">=</a>


<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>
<div class="section2">This one is adjustable too!</div>

6. Disable right click

Some of us might want to disable right click, or want to create our own context menu for the website, this is how we can detect right click:
$(document).bind("contextmenu",function(e){
	//you can enter your code here, e.g a menu list
		
	//cancel the default context menu
    return false;
});

7. Get mouse cursor x and y axis

This script will display the x and y value - the coordinate of the mouse pointer.
$().mousemove(function(e){
	//display the x and y axis values inside the P element
    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});
<a href="http://www.queness.com" rel="external">Queness in new window</a>

<ul>
	<li><a href="home">home</a></li>
	<li><a href="home">about</a></li>
	<li><a href="home">contact</a></li>
</ul>

<link rel="stylesheet" href="default.css" type="text/css">
......
<a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> 
<a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> 
<a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a>

<p></p>

<a href="#" id="close"></a>

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
......
<a id="top" style="cursor:hand;cursor:pointer">
Back to top

<div class="col" style="border:1px solid">Column One<br/>
With Two Line<br/>
And the height is different<br/><br/>
</div>
<div class="col" style="border:1px solid">Column Two<br/><br/></div>


<a class="increaseFont">+</a> | 
<a class="decreaseFont">-</a> | 
<a class="resetFont">=</a>


<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>
<div class="section2">This one is adjustable too!</div>

8. Prevent default behaviour

Assuming we have a long page, and we have a link similar to below that is used for other purposes other than a hyperlink. If you clicked on it, it will bring you to the top of your page. The reason of this behavior is because of the # symbol. To solve this problem, we need to cancel the default behavior by doing this:
$('#close').click(function(e){  
     e.preventDefault();
}); 

/* OR */

$('#close').click(function(){  
    return false;
}); 
<a href="http://www.queness.com" rel="external">Queness in new window</a>

<ul>
	<li><a href="home">home</a></li>
	<li><a href="home">about</a></li>
	<li><a href="home">contact</a></li>
</ul>

<link rel="stylesheet" href="default.css" type="text/css">
......
<a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> 
<a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> 
<a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a>

<p></p>

<a href="#" id="close"></a>

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
......
<a id="top" style="cursor:hand;cursor:pointer">
Back to top

<div class="col" style="border:1px solid">Column One<br/>
With Two Line<br/>
And the height is different<br/><br/>
</div>
<div class="col" style="border:1px solid">Column Two<br/><br/></div>


<a class="increaseFont">+</a> | 
<a class="decreaseFont">-</a> | 
<a class="resetFont">=</a>


<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>
<div class="section2">This one is adjustable too!</div>

9. Back to top button/link

A handy back to top button/link using jQuery with scroll to plugin. I like the scroll to top effect, you can test it by pressing the button below this page. You'll know what I meant : ) Get jQuery scrollTo plugin
$('#top').click(function() {
    $(document).scrollTo(0,500);
}
<a href="http://www.queness.com" rel="external">Queness in new window</a>

<ul>
	<li><a href="home">home</a></li>
	<li><a href="home">about</a></li>
	<li><a href="home">contact</a></li>
</ul>

<link rel="stylesheet" href="default.css" type="text/css">
......
<a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> 
<a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> 
<a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a>

<p></p>

<a href="#" id="close"></a>

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
......
<a id="top" style="cursor:hand;cursor:pointer">
Back to top

<div class="col" style="border:1px solid">Column One<br/>
With Two Line<br/>
And the height is different<br/><br/>
</div>
<div class="col" style="border:1px solid">Column Two<br/><br/></div>


<a class="increaseFont">+</a> | 
<a class="decreaseFont">-</a> | 
<a class="resetFont">=</a>


<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>
<div class="section2">This one is adjustable too!</div>

10. Columns of equal height

I think this script is quite useful. I haven't have a chance to use it yet. It's more on design. If you want columns have the same height, this function will answer your request. Inspired by CSSNewbie
$(document).ready(function() {
    setHeight('.col');
});

//global variable, this will store the highest height value
var maxHeight = 0;

function setHeight(col) {
	//Get all the element with class = col
	col = $(col);
	
	//Loop all the col
    col.each(function() {        
	
		//Store the highest value
		if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
        }
    });
	
	//Set the height
    col.height(maxHeight);
}
<a href="http://www.queness.com" rel="external">Queness in new window</a>

<ul>
	<li><a href="home">home</a></li>
	<li><a href="home">about</a></li>
	<li><a href="home">contact</a></li>
</ul>

<link rel="stylesheet" href="default.css" type="text/css">
......
<a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> 
<a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> 
<a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a>

<p></p>

<a href="#" id="close"></a>

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
......
<a id="top" style="cursor:hand;cursor:pointer">
Back to top

<div class="col" style="border:1px solid">Column One<br/>
With Two Line<br/>
And the height is different<br/><br/>
</div>
<div class="col" style="border:1px solid">Column Two<br/><br/></div>


<a class="increaseFont">+</a> | 
<a class="decreaseFont">-</a> | 
<a class="resetFont">=</a>


<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>
<div class="section2">This one is adjustable too!</div>

11. Write our own selector

This is a more advance trick. I didnt know about this until I saw it from this website illuminatikarate.com.
//extend the jQuery functionality
$.extend($.expr[':'], {  
	
	//name of your special selector
    moreThanAThousand : function (a){
		//Matching element
		return parseInt($(a).html()) > 1000;
	}
});  
	
	
$(document).ready(function() {
	$('td:moreThanAThousand').css('background-color', '#ff0000');
});
<a href="http://www.queness.com" rel="external">Queness in new window</a>

<ul>
	<li><a href="home">home</a></li>
	<li><a href="home">about</a></li>
	<li><a href="home">contact</a></li>
</ul>

<link rel="stylesheet" href="default.css" type="text/css">
......
<a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> 
<a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> 
<a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a>

<p></p>

<a href="#" id="close"></a>

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
......
<a id="top" style="cursor:hand;cursor:pointer">
Back to top

<div class="col" style="border:1px solid">Column One<br/>
With Two Line<br/>
And the height is different<br/><br/>
</div>
<div class="col" style="border:1px solid">Column Two<br/><br/></div>


<a class="increaseFont">+</a> | 
<a class="decreaseFont">-</a> | 
<a class="resetFont">=</a>


<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>
<div class="section2">This one is adjustable too!</div>

<table> <tbody> <tr><td>1400</td><td>700</td><td>400</td></tr> <tr><td>2500</td><td>600</td><td>100</td></tr> <tr><td>100</td><td>1100</td><td>900</td></tr> <tr><td>2600</td><td>1100</td><td>1200</td></tr> </tbody> </table>

12. Font resizing

This is one of the famous facilities on a webpage - able to let user increase the font size. I modified the script from shopdev.co.uk. Now, you'll be able to put in ID, Classes or HTML elements that you want the font to be adjustable into an array.
$(document).ready(function(){

	//ID, class and tag element that font size is adjustable in this array
	//Put in html or body if you want the font of the entire page adjustable
	var section = new Array('span','.section2');
	section = section.join(',');

	// Reset Font Size
	var originalFontSize = $(section).css('font-size');  
		$(".resetFont").click(function(){
		$(section).css('font-size', originalFontSize);
	});
	// Increase Font Size
	$(".increaseFont").click(function(){
		var currentFontSize = $(section).css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum*1.2;
		$(section).css('font-size', newFontSize);
		return false;
	});
  
	// Decrease Font Size
	$(".decreaseFont").click(function(){
		var currentFontSize = $(section).css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum*0.8;
		$(section).css('font-size', newFontSize);
		return false;
	});
});
<a href="http://www.queness.com" rel="external">Queness in new window</a>

<ul>
	<li><a href="home">home</a></li>
	<li><a href="home">about</a></li>
	<li><a href="home">contact</a></li>
</ul>

<link rel="stylesheet" href="default.css" type="text/css">
......
<a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> 
<a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> 
<a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a>

<p></p>

<a href="#" id="close"></a>

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
......
<a id="top" style="cursor:hand;cursor:pointer">
Back to top

<div class="col" style="border:1px solid">Column One<br/>
With Two Line<br/>
And the height is different<br/><br/>
</div>
<div class="col" style="border:1px solid">Column Two<br/><br/></div>


<a class="increaseFont">+</a> | 
<a class="decreaseFont">-</a> | 
<a class="resetFont">=</a>


<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>
<div class="section2">This one is adjustable too!</div>

MORE TIPS AND TRICKS ARE WANTED!

I will keep updating this post, so you can bookmark it. I hope this list will able to help you, I have modified some of the scripts to become more flexible. If you have some tips and tricks that you want to share with us. Please leave a comment. : ) Thanks!
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

54 comments
magnum 4d 6 years ago
wow.. i think you should release one ebook regarding this.. very nice.
Reply
webdesign ireland 6 years ago
This article helps me a lot I bookmark your page thanks !
Reply
Patti 6 years ago
Awesome. i was looking for a way to let users switch styling on a page. Looks like the CSS style changer should work!

Thanks for the great code
Reply
Martin 6 years ago
Great collection of little jQuery scripts... I just implemented your font-resizing script and works great in Opera and Google-Chrome but Internet Explorer throws a java-script error.

Any idea about the workaround??

This is the error-dump:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.30729; InfoPath.2; .NET CLR 3.0.30729; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0C)
Timestamp: Fri, 11 Feb 2011 16:16:56 UTC


Message: Invalid argument.
Line: 12
Char: 12949
Code: 0
URI: http://localhost:54115/js/jquery.min.js


Message: Invalid argument.
Line: 12
Char: 12949
Code: 0
URI: http://localhost:54115/js/jquery.min.js

As I say works fine under other browsers just not IE. I love you page btw...
Reply
Kevin Liew Admin 6 years ago
Not sure what's wrong, I can't test it at the moment. but you can try this instead:
http://www.queness.com/post/3956/quick-and-easy-jquery-font-resizer-tutorial
Reply
alireza 6 years ago
Wow ,it was awesome !!!
It was really useful ,thank u ;).
Reply
Hassan Raza 5 years ago
Nice List. Very Helpful.
Reply
arun 5 years ago
good article
Reply
sekar 5 years ago
oh my dear....its very useful
Reply
Ravi jujju 4 years ago
Very Useful ! thnx:)
Reply
kavithasri 4 years ago
nice article.
Reply
shobhit kumar 4 years ago
very usefull....................
Reply
Narendra Choudhary 4 years ago
Very Useful ! thnx:)
Reply
sneha 4 years ago
very helpfull
Reply