Snippets

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

Are you a developer? Want to get a promotion, work on interesting projects, land a high paying job at a tech company or stand out from the crowd?

Then this ebook is for you!

Career Guide for Software Developers

Career Guide for Software Developers

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

13 thoughts on “10 Useful jQuery Snippets

  1. Useful. I always forget the rel target one

  2. Hey Eisy,

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

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

  4. 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. Thanks Walter and Jeroen. The typo has been corrected.

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

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

  8. 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

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

  10. 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.

  11. 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.

Comments are closed.

Twitter
LinkedIn
YouTube
Instagram