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

13 thoughts on “10 Useful jQuery Snippets

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

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

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