5 cool & useful jQuery tips, tricks & solutions

jQuery is a new kind of JavaScript Library. It is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

The use of the jQuery library is growing and growing (just released jQuery 1.4.2), 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 5 cool & 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.

1) Preloading images

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

2) Disable right-click

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

3) CSS Styleswitcher

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

4) Smooth(animated) page scroll

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

5) Get the mouse cursor x and y axis

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

Click here to get all detailed info: http://docs.jquery.com/Main_Page