drag and share
  • Twitter
  • Delicious
  • Facebook
  • Digg
  • Reddit
  • Stumbleupon

26 cool and useful jQuery tips, tricks & solutions

By: OSH Editorial    In: Javascript Tips and tricks jQuery

Karma - Responsive bootstrapped webapp

The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are using this useful javascript library. This means that more and more useful jQuery tips, tricks and solutions are coming available. That’s why i created a small list of 26 cool and useful jQuery tips, tricks and solutions.

jQuery has a lot of very useful plugins that can help you with almost anything, but there are a couple of plugins that aren’t that smart to use, why? Well sometimes 1 or 2 lines of jQuery code can do the same thing(or even better), so why use a big script if you can do the same trick with a small piece of code.

Hello you, if you are new here, you might want to subscribe to our RSS feed for updates on this article and our site.

x

As many of you already know, jQuery can do a lot of things in more than just one way, so if you see a tip, trick or solution and think/know this can be done better, smarter or faster please let me know, post and share it in a comment below of just email me this, so that i can use this for part 2.



1. Disable right-click

Disable right-click contextual menu.

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});



2. Disappearing search field text

Hide when clicked in the search field, the value.(example can be found below in the comment fields)

$(document).ready(function() {
$("input.text1").val("Enter your search text here");
   textFill($('input.text1'));
});

	function textFill(input){ //input focus text function
 	var originalvalue = input.val();
 	input.focus( function(){
  		if( $.trim(input.val()) == originalvalue ){ input.val(''); }
 	});
 	input.blur( function(){
  		if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
 	});
}



3. Opening links in a new window

XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid.

$(document).ready(function() {
   //Example 1: Every link will open in a new window
   $('a[href^="http://"]').attr("target", "_blank");

   //Example 2: Links with the rel="external" attribute will only open in a new window
   $('a[@rel$='external']').click(function(){
      this.target = "_blank";
   });
});
// how to use
open link



4. Detect browser

Change/add something for a certain browser.

Notice: As of jQuery 1.4, the $.browser variable is replaced by $.support.

$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ){
	// do something
}

// Target Safari
if( $.browser.safari ){
	// do something
}

// Target Chrome
if( $.browser.chrome){
	// do something
}

// Target Camino
if( $.browser.camino){
	// do something
}

// Target Opera
if( $.browser.opera){
	// do something
}

// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
	// do something
}

// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
	// do something
}
});



5. Preloading images

This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.

$(document).ready(function() {
jQuery.preloadImages = function()
{
  for(var i = 0; i").attr("src", arguments[i]);
  }
}
// how to use
$.preloadImages("image1.jpg");
});



6. CSS Styleswitcher

Switch between different styles?

$(document).ready(function() {
	$("a.Styleswitcher").click(function() {
		//swicth the LINK REL attribute with the value in A REL attribute
		$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
	});
// how to use
// place this in your header

// the links
Default Theme
Red Theme
Blue Theme
});



7. Columns of equal height

If you are using two CSS columns, use this to make them exactly the same height.

$(document).ready(function() {
function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
// how to use
$(document).ready(function() {
    equalHeight($(".left"));
    equalHeight($(".right"));
});
});



8. Font resizing

Want to let the users change there font size?

$(document).ready(function() {
  // Reset the font size(back to default)
  var originalFontSize = $('html').css('font-size');
    $(".resetFont").click(function(){
    $('html').css('font-size', originalFontSize);
  });
  // Increase the font size(bigger font0
  $(".increaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $('html').css('font-size', newFontSize);
    return false;
  });
  // Decrease the font size(smaller font)
  $(".decreaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $('html').css('font-size', newFontSize);
    return false;
  });
});



9. Smooth(animated) page scroll

For a smooth(animated) ride back to the top(or any location).

$(document).ready(function() {
$('a[href*=#]').click(function() {
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
 && location.hostname == this.hostname) {
   var $target = $(this.hash);
   $target = $target.length && $target
   || $('[name=' + this.hash.slice(1) +']');
   if ($target.length) {
  var targetOffset = $target.offset().top;
  $('html,body')
  .animate({scrollTop: targetOffset}, 900);
    return false;
   }
  }
  });
// how to use
// place this where you want to scroll to

// the link
go to top
});



11. Get the mouse cursor x and y axis

Want to know where your mouse cursor is?

$(document).ready(function() {
   $().mousemove(function(e){
     //display the x and y axis values inside the div with the id XY
    $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
  });
// how to use
});



12. Verify if an Element is empty

This will allow you to check if an element is empty.

$(document).ready(function() {
  if ($('#id').html()) {
   // do something
   }
});



13. Replace a element

Want to replace a div, or something else?

$(document).ready(function() {
   $('#id').replaceWith('
I have been replaced
'); });



14. jQuery timer callback functions

Want to delay something?

$(document).ready(function() {
   window.setTimeout(function() {
     // do something
   }, 1000);
});



15. Remove a word

Want to remove a certain word(s)?

$(document).ready(function() {
   var el = $('#id');
   el.html(el.html().replace(/word/ig, ""));
});



16. Verify that an element exists in jQuery

Simply test with the .length property if the element exists.

$(document).ready(function() {
   if ($('#id').length) {
  // do something
  }
});




17. Make the entire DIV clickable

Want to make the complete div clickable?

$(document).ready(function() {
	$("div").click(function(){
	  //get the url from href attribute and launch the url
	  window.location=$(this).find("a").attr("href"); return false;
	});
// how to use


});



18. Switch between classes or id’s when resizing the window.

Want to switch between a class or id, when resizing the window?

$(document).ready(function() {
   function checkWindowSize() {
	if ( $(window).width() > 1200 ) {
		$('body').addClass('large');
	}
	else {
		$('body').removeClass('large');
	}
   }
$(window).resize(checkWindowSize);
});



19. Clone a object

Clone a div or an other element.

$(document).ready(function() {
   var cloned = $('#id').clone();
// how to use
});



20. Center an element on the screen

Center an element in the center of your screen.

$(document).ready(function() {
  jQuery.fn.center = function () {
	  this.css("position","absolute");
	  this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
	  this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
	  return this;
  }
  $("#id").center();
});



21. Write our own selector

Write your own selectors.

$(document).ready(function() {
   $.extend($.expr[':'], {
       moreThen1000px: function(a) {
           return $(a).width() > 1000;
      }
   });
  $('.box:moreThen1000px').click(function() {
      // creating a simple js alert box
      alert('The element that you have clicked is over 1000 pixels wide');
  });
});



22. Count a element

Count an element.

$(document).ready(function() {
   $("p").size();
});



23. Use Your Own Bullets

Want to use your own bullets instead of using the standard or images bullets?

$(document).ready(function() {
   $("ul").addClass("Replaced");
   $("ul > li").prepend("‒ ");
 // how to use
 ul.Replaced { list-style : none; }
});



24. Let Google host jQuery for you

Let Google host the jQuery script for you. This can be done in 2 ways.

//Example 1



 // Example 2:(the best and fastest way)



25. Disable jQuery animations

Disable all jQuery effects

$(document).ready(function() {
    jQuery.fx.off = true;
});



26. No conflict-mode

To avoid conflict other libraries on your website, you can use this jQuery Method, and assign a different variable name instead of the dollar sign.

$(document).ready(function() {
   var $jq = jQuery.noConflict();
   $jq('#id').show();
});



Resources



If you are looking for JN0-303 help, then you should opt for braindump written and organized by certified experts to help you pass 642-975 on time in single effort.

Written by: OSH Editorial

No Bio yet...

Share this Story

If you enjoyed reading, consider sharing the love with the rest of the world.

40 Comments

Bricha Othmane

February 27, 2010

How can i use the codes with wordpress?

Mark Dijkstra

February 27, 2010

@Bricha Othmane: well you have to hard code them, or use a wordpress plugin for a certain effect/solution.

Praveen Vijayan

February 28, 2010

Really great snippet collection :) Thanks Mark

Michael A. Vickers

February 28, 2010

Is the “for loop” code in #5 mangled?

Mark Dijkstra

February 28, 2010

@Michael A. Vickers: That i don’t know, i dont know the meaning of the word mangled.

Michael A. Vickers

February 28, 2010

for(var i = 0; i”).attr(”src”, arguments[i]);

That’s what’s showing my browsers (Chrome and IE8).

I haven’t popped that into a page to test it but that would be a new use of a quotation mark that I haven’t seen before in javascript.

Mark Dijkstra

February 28, 2010

@Michael A. Vickers: ow yes now i see it, i will look for a solution ;)

Jack

February 28, 2010

Good article but you should never disable right click, for usability’s sake.

Mark Dijkstra

February 28, 2010

@Jack Thats true. This is only used to prevent copying or seeing the code, but this can be bypassed very easy.

John

March 1, 2010

I think you must put $(document) or $(window) on this otherwise you don’t get mouse XY: $(document).mousemove(function(e){

$(document).ready(function() {
$().mousemove(function(e){
$(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
});
});

Sainath

March 1, 2010

very useful info..
gud work man

Mark Dijkstra

March 1, 2010

@John: Thats correct

Mark Dijkstra

March 1, 2010

@Sainath: Thanks you!

SM

March 2, 2010

Great tips. Thanks

Jay

March 3, 2010

Disabling right click for ANY reason is bad form.

Mini0n

March 17, 2010

Very nice.
Thanks!

Victor Fedorov

March 18, 2010

Great! Thanks, very useful!

mzym

March 19, 2010

Thanks. This is very useful! I dig #17

Mark Dijkstra

March 19, 2010

@mzym: Yes this is an simple but nice trick, but this can also be created with css.

Jerome Bohg

March 22, 2010

Thanks for the great research. I have bookmarked this page. Every now and then this will be a handy summary.

Boaz

March 26, 2010

#4 (Detect browser) using jQuery.browser is considered bad practice.

You should be performing feature detection with jQuery.support instead.

Mark Dijkstra

March 26, 2010

@Boaz: yes this is required if you are using jQuery 1.4

Boaz

March 26, 2010

It’s not required, but it is highly recommended. jQuery.browser method remains and will continue too remain in the library. It’s just not as reliable or granular as jQuery.support, which was added in 1.3.

Mark Dijkstra

March 26, 2010

@Boaz: Yes i know.(i still use the browser, even in 1.4)

Sid

April 16, 2010

Very Useful Mate .. :)

Ralph

May 31, 2010

Hi Mark,

I guess your Dutch, but I can only tell that because of your name so I’m not sure so I will continue in my ‘broken’ English :)

I have an issue, but I’m not a js coder so bare with me please. The animated page scroll snippet seems not to work in Opera, so I did try something because I found out in another article that it has to do with the $(’html,body’). So I’ve aded an if($.browser.opera) statement for that part, but now it doesn’t work at all. Can you please have a look where I go wrong?

Here is the code and thanks in advance!

$(document).ready(function() {
$(’a[href*=#]‘).click(function() {
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”)
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $(’[name=' + this.hash.slice(1) +']‘);
if ($target.length) {
var targetOffset = $target.offset().top;
if($.browser.opera){$(’html’).animate({scrollTop: targetOffset}, 900);} else $(’html,body’).animate({scrollTop: targetOffset}, 900);
return false;
}
}
});
});

Mark Dijkstra

June 2, 2010

@Ralph: well i dont see the bug, the best thing is to go to the jquery forum and post this problem there ;) this will be faster when i have to help you ;) (lack of time now)

And yes i am dutch ;)

Arvind

June 12, 2010

Nice tutorial.
For more Jquery tutorials visit webspeaks.in

daniel veiga

September 14, 2010

Thanks for sharing a list of your jquery codes. Keep us an update for your new post!!!

john

September 28, 2010

thanks…it helps me learning jquery faster

Imran Butt

November 2, 2010

It is nice collection.

london builder

November 29, 2010

Great tips, I like it ;)

InnovativePhp

January 27, 2011

really good tutorial.thanks a lot .keep it going

Vasjen Katro

February 19, 2011

A very nice collection here, Well done Mark!

Logan

February 25, 2011

I would like to use your JQuery code to may my columns equal length, but I don’t know where to put the code. (I’m using wordpress)

What do I do?

Omar

March 10, 2011

CSS style switcher is the best. Thanks for sharing.

elementy kute

July 9, 2011

I just stumbled upon your weblog and wished to say that I have really enjoyed surfing around your blog posts. In any case I will be subscribing to your feed and I hope you write again very soon!

Cuero

August 10, 2011

Submit your desktop, and see others!! Great post!!

Amery

September 14, 2011

I’m reading this article posting and yes it looks great! I like your way with words and you’ve explained some fantastic points with this issue.

dipak kumar burnwal

September 22, 2011

really great things to experiment with..

Add Your Comment

Your name

August 28, 2016

We use Gravatars on OpensourceHunter, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too. Get your Gravators account here!