10 jQuery Snippets

8/8/2019 10 jQuery Snippets

1/4

Top 10 jQuery Snippets (including jquery 1.4)

Amazing collection of the top 10 most used jQuery snippets that you need to know about! Includes newamazing 1.4 jQuery framework methods.

I have found that people are going bananas over jQuery, so ive decided to share my top 10 jQuery

snippets that i KNOW you will need to use at one point or another. [...]

Amazing collection of the top 10 most used jQuery snippets that you need to know about! Includes newamazing 1.4 jQuery framework methods.

I have found that people are going bananas over jQuery, so ive decided to share my top 10 jQuerysnippets that i KNOW you will need to use at one point or another. So here they are, enjoy! I have alsoadded jquery 1.4 features never used before.

1. The quick copy paste jQuery starter embed

Almost every time I start using jQuery I need to paste this in to start writing my beautiful code.

view plain copy to clipboard print ?

01.

02.$(document).ready(function(){03.// jQuery Code Here04.});05.

06.

You can either paste this in your header (if you are using jquery for any appearance changes its suggestedto do so in the header) or you can add it at the end of your body, that way your styles will load first (hence

making a faster load) and then the jquery will be loaded last.

2. Value swap (usually for search fields)

I find myself using this rather often, whenever you have a search field and you want it to defaultly displaya value search and have that value empty out on focus, well this is how to do this with jQuery 1.4.


swap_val = [];01.

$(".swap").each(function(i){02.

swap_val[i] = $(this).val();03.

$(this).focusin(function(){04.

if ($(this).val() == swap_val[i]) {05.$(this).val("");06.}07.

}).focusout(function(){08.

if ($.trim($(this).val()) == "") {09.$(this).val(swap_val[i]);10.}11.});12.});13.

This jquery will create an array with every input field that has the class swap. For example:


01.

The value Swap Me! will be erased when you click in the input field, and it will come back in if you dont

enter anything.

10 jQuery Snippets (including jquery 1.4) | web enavu file:///C:/jq/10.ht

r 4 05/01/2011 10:02


2/4

3. Equal Column Height

Unfortunately css does not support this natively, sometimes when creating column based layouts it looksso much better if the columns aligned by height, so here is the easy way of doing this.


var max_height = 0;01.$("div.col").each(function(){02.

if ($(this).height() > max_height) { max_height = $(this).height(); }03.});04.$("div.col").height(max_height);05.

This will go through every div with class col and check for which one contains the highest size, once done

it will apply that height to all divs with class col. For example:


01.

02.

If you read the comments above you will see that each div has the class col, and that the second div will

be set at height 200px.

4. On Hover add and Remove a class

Lets say you want to have a suckerfish dropdown, or maybe you just want to add a cool hover on a div,well in some browsers thats not allowed to be done with pure css, hence use this simple technique and you

will have cross browser hover with any two class you want.


$('.onhover').hover(01. function(){ $(this).addClass('hover_style_class') },02.

function(){ $(this).removeClass('hover_style_class') }03.)04.

The code above will apply a class home_style_class on hover of an element with the class onhover.

5. Live Event Binding

With jquery you can capture an onclick event with the .click() method, but this is the slower less efficientway. Also if you created new elements with ajax or with jquery those new elements will not be bound bythe regular click() method. So using live click/submit and so on will apply itself to all new elements, and

will only bind once to all.


$(".element").live("click", function(){01.// do something on click02.});03.

The code above will apply any code you want on click event on an element with class element.

6. Partial Page Refresh

Okay personally when the term ajax comes to mind i get a little worried but I found this amazingtechnique to refresh page content without any real ajax or special tricks. All you need is to apply an id to acertain element, and run this little script, choose how many seconds to wait until refresh and VUALA!


r 4 05/01/2011 10:02


3/4


setInterval(function() {01.$("#refresh").load(location.href+" #refresh>*","");02.}, 10000); // seconds to wait, miliseconds03.

Okay so the script above will refresh the div with id refresh every 10 seconds this can be so awesome inso many cases! Btw make sure you have tags inside the refresh div, otherwise it doesnt seem to workwith pure text.

7. Each Element

I seem to use this pretty often when i want to do something with a set of elements, for example if you doyour own form validation and you want to check each input field before submitting.


$("input").each(function (i) {01.//do something with each and pass i as the number of the element02.});03.

So choose an element to cycle through, it can be a set of lis in a chosen unordered list, or all the inputfields as above. Use the i to get the number of the current element, and of course the $(this) to dosomething to the element its going through.

8. Find an element close by (jQuery 1.4)

With the new jQuery 1.4 we have the new awesome feature of the closest() method which will find theelement closes to the current one. So no more searching through the parents and children to get to the

close element we need.


$("li").click(function(){01.$(this).closest(".me").addClass("smile");02.});03.

The code above will find the closes class me to the li that was clicked on and add class smile to it. Henceyou can see how beneficial this can be!

9. Delay animation/effect

Another great new feature of the 1.4 jquery framework is the Delay method which allows you to delay ananimation. Instead of using the setTimeout method, you can now simply add the .delay() method and pass

in how long to delay, like this:


$(".alert").delay(2000).fadeOut();01.

The above will fade out an element with class alert after 2 seconds. This can be used for growl like

notifications.

10. Check if an element contains a certain class or element

Another awesome feature of jQuery 1.4 that will be quite handy is the hasmethod. This method will find

if a an element contains a certain other element class or whatever it is you are looking for and do anythingyou want to them.


$("input").has(".email").addClass("email_icon");01.


r 4 05/01/2011 10:02


4/4

In the above code we will look through all inputs that have the class email and add the class email_icon.

Here are some that didnt make the top 10 cut:

Creating the zebra stripe effect on UL/OL or Tables

Sometimes we have tables or ordered/unordered lists that we want to be easily read. Here is a quick jqtrick:


$("tr:odd").addClass("odd");01.$("li:odd").addClass("odd");02.

The code will add the class odd to every other element!

Automatic external link open in New Window

Tired of having to add target=_blank every time you dont want your visitors to navigate away fromyour page? Let jquery do the work!


$('a').each(function() {01.

var a = new RegExp('/' + [removed].host + '/');02.if(!a.test(this.href)) {03.

$(this).click(function(event) {04.event.preventDefault();05.event.stopPropagation();06.window.open(this.href, '_blank');07.});08.}09.});10.

Now every a href in your page will open in a new window if it doesnt go somewhere in your own website!


4 05/01/2011 10 02

Documents

10 jQuery Snippets