Useful and Handy jQuery Tips and Tricks

Useful and Handy jQuery Tips and Tricks


Useful and Handy jQuery Tips and Tricks

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!

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

54 comments

therealcharlieb
Wed, 25th March 2009
#3 is stupid, I agree with Zachary. if you want something opening in new window use target, if not don't. Ultimately you should let the user decide wether they want a new window or not, don't make the choice for them. Reply
George Huger
Wed, 25th March 2009
Thanks for the link!

I'm glad that you found our blog post on jQuery selectors useful. I'll ping you next time we post a jQuery tip.

Cheers,

George Huger
Illuminati Karate Reply
kevin Admin
Wed, 25th March 2009
@Kyle: haha, I don't know why I did that. Yes, you are absolutely right. I have updated the content. Thanks!

@Maujor: Thanks for the correction. I have updated the content.

@masikma: thanks for your argument about the TARGET and w3c standard. I should have put another sentence at the CSS switcher trick. "Assuming, you have only one css stylesheet" : ) Reply
kevin Admin
Wed, 25th March 2009
@Zachary, @therealcharlieb: I won't argument the #3, The reason TARGET was removed was because the W3C felt that it took away the users ability to "choose". So, therealcharlieb, you're right. This is a trick to cheat the W3C validator, because for some reasons, people want links to be opened in new windows, and as well as strive for a pass in W3C STRICT validation.

@Zachary: Thanks for the information, I have fixed the stupid bug, and increased the characters for the comment. Reply
Kyle Peterson
Wed, 25th March 2009
For #9 why would you embed the jquery code in the onclick attribute of the element? Shouldn't you just put a class on the element and then apply the click event after selecting it. Reply
Zachary Johnson
Wed, 25th March 2009
For #3, I can't really gather why you think it is ok to add an invalid attribute with JS. Target is still invalid for XHTML STRICT.

For #4, with your simple example, an all CSS solution would be in order. Make the anchor inside of the list item display: block; height: 100%; and then your anchor/link will fill the entire LI making the whole thing clickable. Problem solved, no JS needed. Reply
Zachary Johnson
Wed, 25th March 2009
P.S. 400 word != 400 character.
P.P.S. 400 characters isn't long enough to write a very meaningful comment. Reply
Maujor
Wed, 25th March 2009
For#8 line 2 - Should be:
e.preventDefault() Reply
msikma
Wed, 25th March 2009
@Zachary: this is a standard way to get around the lack of "target" in XHTML Strict. By using an action, you're turning it on for only those platforms that support it. It's arguably the nicest way to do it. Still, you're right that this post contains a bunch of suggestions that aren't best practices, such as the list item example. Particularly the CSS switcher seems a little sketchy. Reply
msikma
Wed, 25th March 2009
And just to elaborate on that CSS switcher example (I reached the comment limit): it would replace every link tag with the stylesheet attribute, meaning it's useless if you have more than one stylesheet. Reply
Andy Couch
Thu, 26th March 2009
Another tip:

List all events bound to an element

jQuery stores a list of all events bound to elements and objects with its data function. The following code will list all bound events and their handlers:

$.each($(elem).data("events"), function(i, event) {
$.each(event, function(i, handler) {
console.log(handler.toString());
});
});
Reply
badlyDranwToy
Thu, 26th March 2009
I recently provided a jquery solution to open links in new windows WITHOUT using the deprecated target attribute

http://www.badlydrawntoy.com/2009/03/03/replacing-target_blank-for-strict-xhtml-using-jquery-redux/ Reply
msikma
Thu, 26th March 2009
@kevin: Garf. My name's not masikma! :) Reply
kevin Admin
Thu, 26th March 2009
:) Sorry for that. I was in the office, and my project manager was wandering around... :P Reply
cancel bubble
Fri, 27th March 2009
For #8, return false; in jQuery this has two meanings, it prevents the default action/behavior and stops event propagation, so it's essentially:

e.stopPropagation();
e.preventDefault();

Nice links to the 3 cheat sheets! Reply
kevin Admin
Wed, 1st April 2009
@Simon: thanks, I can understand chinese :) Reply
Simon
Wed, 1st April 2009
well done !
哥们,你懂汉语吗,干的真他妈的漂亮!
Subscribe Reply
Hugo_(name length 5-30??)
Sun, 3rd May 2009
The #4 one is odd. With proper CSS you can achieve the exact same result. Reply
Mike Morales
Wed, 6th May 2009
Hi bro! i was looking the tip #5 and i was trying to do this but my firebug showme a error

this
$("link[rel=stylesheet]").attr({href : this.attr(rel)});

and u can help me ??

thanks for yours tips Reply
kevin Admin
Wed, 6th May 2009
@Mike: Yes, I have rectified the code error. Thanks for telling me! :) I have updated the code, and I paste it here anyway:

$('.cssSwitcher').click(function() {

$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
return false;
}); Reply
kevin Admin
Wed, 20th May 2009
@Mike: hi, good too see u again. You have forgotten to include rel="css file name" in your anchor tag :).

The script search for anchor tag with class called cssSwitcher, and grab the file name in the REL attribute. Cheers Reply
Mike Morales
Wed, 20th May 2009
Hi bro! again come with you, i´m try to load 2 things, one load a html inside one div this is no my doubt, my duobt is why the exercise 5 not load or aply the css

this is the example

www.dgmmorales.com/div

thanks a lot Reply
Ben
Wed, 27th May 2009
I like the font resizing tip #12; but I noticed something. I don't think 1.2 is the inverse of 0.8. If you increase once and decrease once, you won't get back to the original size. If you use 1.25 and .8, then each will do the opposite of the other. Maybe it doesn't matter -- I'm OCD / anal that way. ;-) Reply
John Galt
Wed, 17th June 2009
Great! Added to TUTlist.com Reply
WebDevVote.com
Wed, 1st July 2009
You are voted!
Track back from WebDevVote.com Reply
Andrew
Thu, 23rd July 2009
Here is the Russian translation of the article: http://interpretor.ru/jquery_tips

Thanks! Reply
Shahriar Hyder
Thu, 24th September 2009
Very useful and indeed handy collection jQuery Tips and Tricks mate. I have also linked to yours from my blog post below where I am trying to collect the most useful and common jQuery code snippets for JavaScript over the web. Here is the title and the link to the jQuery link compilation endeavor:


Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance


http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/ Reply
Aaron McCall
Wed, 14th October 2009
As an extension of tip # 10:

You could attach your height equalizer (setHeight) to the windows resize event, thus keeping the columns of equal height even if window width changes cause a change in content height. I have used a similar solution for just this purpose. Reply
inderpreet singh
Wed, 14th October 2009
hi i am a blogger.i wan to know where to put this code given above

$(&amp;#039;#top&amp;#039;).click(function() {
$(document).scrollTo(0,500);
}


in body or head area.

thanks... Reply
Eddie
Thu, 26th January 2012
inside <script> tags :) body or head up to you... Reply
kevin Admin
Wed, 14th October 2009
hi inderpreet, it put in the bottom of the page. please refer to my website, \"back to top\" button :) Reply
delicious
Sun, 9th May 2010
I like the font resizing tip #12; but I noticed something. I don't think 1.2 is the inverse of 0.8. If you increase once and decrease once, you won't get back to the original size. If you use 1.25 and .8, then each will do the opposite of the other. Maybe it doesn't matter -- I'm OCD / anal that way. ;-) Reply
Private Lessons
Wed, 26th May 2010
Great Work! Thanks! Reply
SamsonDelila
Thu, 10th June 2010
Most great works! Very very useful ... Reply
prasanna
Sat, 19th June 2010
cool tips ... thanks Reply
web design
Thu, 12th August 2010
Like these tricks mate, thanks alot. Reply
Izrada Web Stranica
Wed, 1st September 2010
THX from Bosnia! Reply
Emil Uzelac
Thu, 7th October 2010
Your scroll to top is not complete. Take a look at this:

<code>
$(document).ready(function(){
$('.top').click(function() {
$(document).scrollTo(0,500);
});
});
</code>

or from Paste Bin in case that codes don't show up properly.

http://pastebin.com/eUJgA6fY Reply
sade
Wed, 13th October 2010
Thanks for great list ;) Reply
tongkat ali
Fri, 15th October 2010
Like these tricks mate, thanks alot. Reply
magnum 4d
Fri, 15th October 2010
wow.. i think you should release one ebook regarding this.. very nice. Reply
webdesign ireland
Sat, 16th October 2010
This article helps me a lot I bookmark your page thanks ! Reply
Patti
Tue, 7th December 2010
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
Fri, 11th February 2011
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
Fri, 11th February 2011
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
Thu, 28th April 2011
Wow ,it was awesome !!!
It was really useful ,thank u ;). Reply
Hassan Raza
Sat, 9th July 2011
Nice List. Very Helpful. Reply
arun
Mon, 19th December 2011
good article Reply
sekar
Mon, 2nd April 2012
oh my dear....its very useful Reply
Ravi jujju
Sat, 30th June 2012
Very Useful ! thnx:) Reply
kavithasri
Mon, 16th July 2012
nice article. Reply
shobhit kumar
Sat, 21st July 2012
very usefull.................... Reply
Narendra Choudhary
Sun, 9th December 2012
Very Useful ! thnx:) Reply
sneha
Thu, 7th February 2013
very helpfull Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement