Web Development Blog » Snippets

10 Useful jQuery Snippets

eisabai — Wed, 01 Sep 2010 02:20:01 +0000

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('You are using an old version of Internet Explorer which is not supported.  Please upgrade your browser in order to view this website.');
}

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]').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:

How to write a good article?


	How to tips go here.

$('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:

Print this page

$('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:

Google

$('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:


	
		Select All
		Reset All
	

	Option 1
	Option 2
	Option 3
	Option 4

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

Read 10 Useful jQuery Snippets on Web Development Blog!

Clear default text in input boxes on click with jQuery

eisabai — Thu, 17 Jun 2010 02:56:46 +0000

The following Javascript will clear default text value in input boxes when you click on them. To trigger the Javascript, you’ll need to specify both title and value attributes and set class of the input field to “text”. jQuery library is required for this to work.

Javascript

$('.text').focus(function () {
	if ($(this).val() == $(this).attr("title")) {
		$(this).val("");
	}
}).blur(function () {
	if ($(this).val() == "") {
		$(this).val($(this).attr("title"));
	}
});

Examples:

Read Clear default text in input boxes on click with jQuery on Web Development Blog!

Click to copy and open site script

eisabai — Sat, 29 May 2010 11:08:08 +0000

I needed a script that copies a text (in my case, coupon code) onto clipboard and then open the web address associated with the coupon in a new window for my Coupons for Webmasters page. For the clipboard copying, I’m using ZeroClipboard script written by Joseph Huckaby. ZeroClipboard is a free and open source library that provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie, and a JavaScript interface. And opening a new window was easier than I thought, with jQuery and a bit of googling.

HTML Code



Zero Clipboard Test







Zero Clipboard Test


Hostgator Hosting Coupon
20% off all plans for new customers
Expiry date: - 
GREEN
Click to copy



Godaddy Domain Name Coupon
$7.49 for any .COM domain
Expiry date: - 
OYH7
Click to copy



Website Templates
5% off any template (no coupon required)
Expiry date: 10 June 2010 
Go to site

ZeroClipboard Script (download at Google Code)
You’ll need ZeroClipboard.js and ZeroClipboard.swf.

clipboard.js

ZeroClipboard.setMoviePath("http://fullpath.to.your.site/ZeroClipboard.swf");

var clip = null;
var url = '';

function init() {
	clip = new ZeroClipboard.Client();
	clip.setHandCursor( true );

	$('.coupon-code').mouseover( function() {
		clip.setText(this.innerHTML);
		if (clip.div) {
			clip.receiveEvent('mouseout', null);
			clip.reposition(this);
		} else {
                        clip.glue(this);
                }
		clip.receiveEvent('mouseover', null);
		url = $(this).attr('rel');
	});

	clip.addEventListener('mouseUp', function(client) {
		window.open(url);
	});
}

$(document).ready(function() {
	init();
});

See the code in action at Coupons for Webmasters. RetailMeNot is also using a similar script to achieve the same result.

Read Click to copy and open site script on Web Development Blog!

How to check if div exists in jQuery

eisabai — Fri, 07 May 2010 03:42:02 +0000

This is one of the most commonly used piece of code for jQuery. Often times, we need to check if a div/element exists in the page before processing a block of script (eg: replacing the content of the div).

if ( $("#message").length ) {
  $('#message').text("Hello!");
}

Read How to check if div exists in jQuery on Web Development Blog!

Align an image in center and middle using CSS

eisabai — Thu, 22 Apr 2010 02:02:22 +0000

Here’s a snippet of CSS and HTML code that aligns an image in center (horizontally) and middle (vertically). Tested in Firefox, IE, Chrome and Safari.

CSS

#enter {
	position: absolute;
	text-align: center;
	left: 50%;
	top: 50%;
	margin: -120px auto 0 -130px; /* value of top margin: height of the image divide by 2 (ie: 240 / 2), value of left margin: width of the image divide by 2 (ie: 260 / 2) */
	width: 260px; /* same as the image width */
}

#enter span a {
	display: block;
	width: 260px;
	height: 240px;
	margin: 0 auto;
	position: relative;
	background: transparent url(images/enter.jpg) 0 0 no-repeat;
	text-indent: -5000em;
	outline: 0;
}

HTML


    
	Enter Site

Read Align an image in center and middle using CSS on Web Development Blog!

Troubleshooting jQuery.get() Cache issue in Internet Explorer

eisabai — Wed, 21 Apr 2010 06:10:16 +0000

There is an issue with jQuery.get() in Internet Explorer when trying to update content on the fly because IE caches XMLHttpRequest response and the AJAX call made via jQuery.get() is therefore always returning the same result. I encountered this problem when I was writing a function similar to facebook Like feature where the Like counter increments by 1 whenever someone clicks on the I like it link. It works all fine and well on Firefox, but when I tested it on IE, the counter doesn’t increase as expected.

To solve the issue, I added a parameter to the request URL that is unique for each request by using Javascript getTime function. Javascript getTime function returns the number of milliseconds since January 1, 1970. This prevents IE from returning the same/cached response because the request URL is always unique.

Javascript

jQuery.fn.likeIt = function() {
    var r = new Date().getTime(); // unique random number to workaround IE cache issue
    $("a", this).click(function() {
        // Note: my href already has a parameter which is why I have & instead of ? before the r parameter
	$.get($(this).attr("href") + "&r=" + r, function(data) {
             // do your processing here
	}); // $.get
    return false;
    });
};

Read Troubleshooting jQuery.get() Cache issue in Internet Explorer on Web Development Blog!

Display 5 latest posts in each category in WordPress

eisabai — Wed, 10 Mar 2010 12:34:24 +0000

To display 5 latest posts in each parent category of your WordPress blog, add the following code into the template that you want the result to appear. In our case, we added the following code into our 404 template page (404.php of current theme). Other places that you might want to display a list of posts by category are: 1) Footer, 2) WordPress Custom Archive Page, 3) WordPress Custom Search Page, 4) WordPress Landing Page and so on.

Screenshot of 404 page with a list of posts by category (Wide View)

Screenshot of 404 page with a list of posts by category (Narrow View)

WordPress PHP Code



 'name',
  'order' => 'ASC',
  'child_of' => 0
);

$categories =   get_categories($cat_args); 

foreach($categories as $category) {
    echo '';
    echo ' name ) . '" ' . '>' . $category->name.'';

     $post_args = array(
      'numberposts' => 5,
      'category' => $category->term_id
    );

    $posts = get_posts($post_args);

	foreach($posts as $post) {
	?>
		
	 name ) . '" ' . '>View all posts in ' . $category->name.'';
	echo '';
}
?>

CSS

#page-not-found dl {
width: 200px;
float: left;
padding: 0 18px 0 0;
height: 250px;
}

#page-not-found dt {
font-weight: bold;
font-size: 1.1em;
padding: 10px 0;
}

#page-not-found dt a {
color: #b0bf32;
}

#page-not-found dd.view-all {
border-top: 1px solid #c9c9c9;
font-size: 0.9em;
margin: 5px 0;
padding: 2px 0 0;
text-align: right;
}

#page-not-found dd.view-all a {
color: #999;
}

.page-end {
clear: both;
}

Read Display 5 latest posts in each category in WordPress on Web Development Blog!

How to style a Submit button in CSS – Example 2

eisabai — Tue, 09 Mar 2010 01:31:06 +0000

web 2.0 style call-to-action buttons can be purchased in psd format from graphic river

Since writing How to style a Submit button in CSS a few months ago, I have found an alternative way to achieve the same result. In this example, we will be using

CSS

#button {
	background: transparent url(contact.gif) 0 0 no-repeat;
	border: none;
	cursor: pointer;
	width: 180px;
	height: 50px;
}

#button span {
	display: none;
}

Read How to style a Submit button in CSS – Example 2 on Web Development Blog!

How to disable text auto correction in iPhone web app

eisabai — Fri, 05 Mar 2010 12:14:39 +0000

To turn off iPhone auto correction feature (predictive dictionary) on textboxes, add autocorrect="off" attribute to your input tag.

You can also turn off auto capitalising/capitalizing feature by adding autocapitalize="off" attribute.

And lastly, you can turn off auto complete in a similar way.

More HTML tips for iPhone web apps can be found in Building iPhone Apps with HTML, CSS, and JavaScript book published by O’Reilly Media, Inc.

Read How to disable text auto correction in iPhone web app on Web Development Blog!

5 steps to creating a custom Archive page in WordPress

eisabai — Mon, 22 Feb 2010 06:09:11 +0000

Here is how to create a custom archive page in WordPress just like the one you see on our blog.

1. Go to the current theme folder of your WordPress installation (wp-content/themes/*current theme*) and make sure you don’t already have archives.php in the folder

2. Create a new file called archives.php (or whatever file name you want to give)

3. Copy and paste the following code into the new file and upload it to your current theme folder (wp-content/themes/*current theme*)








Read the rest of this page »'); ?>

Archives by Title:

    


Archives by Month:

    


Archives by Subject:

    


 'Pages: ', 'after' => '', 'next_or_number' => 'number')); ?>

Note: You will probably need to modify this code a bit to match the code structure of your current theme. For example, you might need to have get_sidebar() or you might have extra markup.

4. Login to your WordPress Administrator Panel and create a new page (and name it whatever you like. Ours is called “Archive”)

5. On the right side of the create/edit page, you will see Attributes section where you can specify settings for Parent, Template and Order. Choose “Archives Page” for Template and publish/save your changes.

You now have an Archive page for your WordPress blog that is similar to our Archive page.

Read 5 steps to creating a custom Archive page in WordPress on Web Development Blog!

Web Development Blog » Snippets

10 Useful jQuery Snippets

Other similiar posts that you might be interested in:

Clear default text in input boxes on click with jQuery

Other similiar posts that you might be interested in:

Click to copy and open site script

Zero Clipboard Test

Hostgator Hosting Coupon

Godaddy Domain Name Coupon

Website Templates

Other similiar posts that you might be interested in:

How to check if div exists in jQuery

Other similiar posts that you might be interested in:

Align an image in center and middle using CSS

Other similiar posts that you might be interested in:

Troubleshooting jQuery.get() Cache issue in Internet Explorer

Other similiar posts that you might be interested in:

Display 5 latest posts in each category in WordPress

Other similiar posts that you might be interested in:

How to style a Submit button in CSS – Example 2

Other similiar posts that you might be interested in:

How to disable text auto correction in iPhone web app

Other similiar posts that you might be interested in:

5 steps to creating a custom Archive page in WordPress

Archives by Title:

Archives by Month:

Archives by Subject:

Other similiar posts that you might be interested in: