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

htm

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 new
amazing 1.4 jQuery framework methods.

I have found that people are going bananas over jQuery, so i’ve 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 new
amazing 1.4 jQuery framework methods.

I have found that people are going bananas over jQuery, so i’ve decided to share my top 10 jQuery
snippets that i KNOW you will need to use at one point or another. So here they are, enjoy! I have also
added 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. <script src="http://code.jquery.com/jquery-latest.js"></script>

02. <script>
03. $(document).ready(function(){
04. // jQuery Code Here
05. });
06. </script>

You can either paste this in your header (if you are using jquery for any appearance changes its suggested
to 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 display
a value “search…” and have that value empty out on focus, well this is how to do this with jQuery 1.4.

view plain copy to clipboard print ?

01. swap_val = [];

02. $(".swap").each(function(i){
03. swap_val[i] = $(this).val();
04. $(this).focusin(function(){
05. if ($(this).val() == swap_val[i]) {
06. $(this).val("");
07. }
08. }).focusout(function(){
09. if ($.trim($(this).val()) == "") {
10. $(this).val(swap_val[i]);
11. }
12. });
13. });

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

view plain copy to clipboard print ?

01. <input type="text" class="swap" value="Swap Me!" />

The value Swap Me! will be erased when you click in the input field, and it will come back in if you don’t
enter anything.

1 sur 4 05/01/2011 10:02

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

3. Equal Column Height

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

view plain copy to clipboard print ?

01. var max_height = 0;

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

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:

view plain copy to clipboard print ?

01. <div style="height:200px;" class="col">

</div><!-- this being the higher div will be set as the max_height -->
02. <div class="col"></div><!-- this being the smaller div will be made 200px high -->

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

Let’s 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.

view plain copy to clipboard print ?

01. $('.onhover').hover(
02. function(){ $(this).addClass('hover_style_class') },
03. function(){ $(this).removeClass('hover_style_class') }
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 efficient
way. Also if you created new elements with ajax or with jquery those new elements will not be bound by
the 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.

view plain copy to clipboard print ?

01. $(".element").live("click", function(){

02. // do something on click
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 amazing
technique to refresh page content without any real ajax or special tricks. All you need is to apply an id to a
certain element, and run this little script, choose how many seconds to wait until refresh and VUALA!

2 sur 4 05/01/2011 10:02

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

view plain copy to clipboard print ?

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

Okay so the script above will refresh the div with id refresh every 10 seconds… this can be so awesome in
so many cases! Btw make sure you have tags inside the refresh div, otherwise it doesn’t seem to work
with 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 do
your own form validation and you want to check each input field before submitting.

view plain copy to clipboard print ?

01. $("input").each(function (i) {

02. //do something with each and pass i as the number of the element
03. });

So choose an element to cycle through, it can be a set of li’s in a chosen unordered list, or all the input
fields as above. Use the i to get the number of the current element, and of course the $(this) to do
something to the element it’s 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 the
element closes to the current one. So no more searching through the parents and children to get to the
close element we need.

view plain copy to clipboard print ?

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

The code above will find the closes class me to the li that was clicked on and add class smile to it. Hence
you 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 an
animation. Instead of using the setTimeout method, you can now simply add the .delay() method and pass
in how long to delay, like this:

view plain copy to clipboard print ?

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

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 has method. This method will find
if a an element contains a certain other element class or whatever it is you are looking for and do anything
you want to them.

view plain copy to clipboard print ?

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

3 sur 4 05/01/2011 10:02

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

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 didn’t 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 jq
trick:

view plain copy to clipboard print ?

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

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 don’t want your visitors to navigate away from
your page? Let jquery do the work!

view plain copy to clipboard print ?

01. $('a').each(function() {
02. var a = new RegExp('/' + [removed].host + '/');
03. if(!a.test(this.href)) {
04. $(this).click(function(event) {
05. event.preventDefault();
06. event.stopPropagation();
07. window.open(this.href, '_blank');
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 sur 4 05/01/2011 10:02