Web Development Blog

by Ei Sabai Nyo

01 Sep, 2010

10 Useful jQuery Snippets    

Following are 10 Useful jQuery snippets for any website. To use these snippets, you must include jQuery library in your page first and then add the snippets inside DOM ready function as follow:

$(document).ready(function() {
// add your snippets here
});

1. Display Warning Message for IE 6 Users

if ( (jQuery.browser.msie) && (parseInt(jQuery.browser.version) < 7) ) {
	$('body').prepend('<div class="warning">You are using an old version of Internet Explorer which is not supported.  Please upgrade your browser in order to view this website.</div>');
}

2. Add hasJS class to body tag when Javascript is enabled

$('body').addClass('hasJS');

3. Clear default text in input fields on click

Sample Usage:

<input type="text" name="search" class="search" value="Keywords" title="Keywords" />
$('input[type=text]').focus(function() {
    var title = $(this).attr('title');
    if ($(this).val() == title) {
        $(this).val('');
    }
}).blur(function() {
    var title = $(this).attr('title');
    if ($(this).val() == '') {
        $(this).val(title);
    }
});

4. Show/hide more content on click

Sample Usage:

<p><a href="#how-to" class="toggle">How to write a good article?</a></p>
<div id="how-to">
	How to tips go here.
</div>
$('a.toggle').toggle(function() {
	var id = $(this).attr("href");
	$(this).addClass("active");
	$(id).slideDown();
}, function() {
	var id = $(this).attr("href");
	$(this).removeClass("active");
	$(id).slideUp();
});

5. Open Print dialog

Sample Usage:

<a href="#" class="print">Print this page</a>
$('a.print').click(function(){
	window.print();
	return false;
});

6. Add “hover” class to table data (and change the background color of the class via CSS)

$('table').delegate('td', 'hover', function(){
	$(this).toggleClass('hover');
});

7. Open link in a new window if rel is set to external

Sample Usage:

<a href="http://www.google.com" rel="external">Google</a>
$('a[rel=external]').attr('target', '_blank');

8. Add “odd” class to alternate table row (and change the background color of the class via CSS to have stripes effect for table)

$('tr:odd').addClass('odd');  

9. Check if div exists on page

if ( $('#myDiv').length ) {
    // do something with myDiv
}

10. Check/Uncheck all checkboxes

Sample Usage:

<div class="options">
	<ul>
		<li><a href="#" class="select-all">Select All</a></li>
		<li><a href="#" class="reset-all">Reset All</a></li>
	</ul>
	
	<input type="checkbox" id="option1" /><label for="option1">Option 1</label>
	<input type="checkbox" id="option2" /><label for="option2">Option 2</label>
	<input type="checkbox" id="option3" /><label for="option3">Option 3</label>
	<input type="checkbox" id="option4" /><label for="option4">Option 4</label>
</div>
$('.select-all').live('click', function(){
	$(this).closest('.options').find('input[type=checkbox]').attr('checked', true);
	return false;
});

$('.reset-all').live('click', function(){
	$(this).closest('.options').find('input[type=checkbox]').attr('checked', false);
	return false;
});
Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Your name:   Your email:  

13 Responses to “10 Useful jQuery Snippets”

  1. Sam says:

    Useful. I always forget the rel target one

  2. Walter says:

    Hey Eisy,

    I couldn’t get show and hide (4) to work

  3. Jeroen says:

    @Walter, fix the typo; id=”how-top” should be id=”how-to”

  4. mario says:

    No3 can be replaced by HTML5s placeholder= attribute. Which works *right now* in the major three browser engines, and can be emulated using a jQuery plugin for IE.

  5. eisabai says:

    Thanks Walter and Jeroen. The typo has been corrected.

  6. Wow !!! That’s wonderful.
    Should i have to download any js files?

  7. huarong says:

    NO.5 is boring…

    and I don’t quite understand of NO.2.

    Why shoud we Add hasJS class to body tag when Javascript is enabled?

  8. Azeem Michael says:

    @huarong. you are right. no.2 doesn’t make sense.

  9. Louie Sison says:

    Hi, my name is Louie Sison. I just started my own blog on Web Development, Search Engine Optimization, Blog Tips and Make Money Online. I also share free stuffs like WordPress themes that I myself designed. I stumble upon your blog when I was researching for my article’s content. I am impressed on you share your ideas. Your site is very helpful for a newbie blogger like me. I will definitely come back to read more materials. Again, thank you very much. More power to you.
    Regards,
    http://dreamhousewebsolutions.net/l

  10. qwetrader says:

    This is spacious information. Thanks in the course of sharing.

  11. I sharing to you a snippet that i create, is an function (jquery) to set 2 elements 1 like a anchor and the other a lement to show.

  12. Mathieu says:

    Thank you for sharing your tips.
    About the third one, maybe you could be simpler:

    $(‘input[type=text]‘).focus(function() {
    if (this.value == this.title) {
    this.value = ”;
    }
    }).blur(function() {
    if (this.value == ”) {
    this.value = this.title;
    }
    });

    Anyway, the use of the “title” attribute was a good one.

Profile PicHello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more about me or have a look at some of the tips & resources I've written.
Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
We do NOT spam.
Your name:  
Your email:  

Tips & Resources

Tips & Resources
WordPress Web Hosting
Recommended web hosting providers for WordPress 3.0
iPhone Native App Development
Important steps into iPhone app development for beginners
iPhone Web App Development
Tips for iPhone web app development
Coupons for Web Developers
Get discounts on web hosting, domain names, templates, etc
10 Useful jQuery Snippets
Easy-to-use jQuery snippets for any website
HTML Email Newsletter
Step-by-step tutorial on how to code an HTML email newsletter
  • bluehost Hosting $6.95/month
  • Joomla Templates

Recommended Book

Categories