26 jquery tips

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.

1. Disable right-click(Disable right-click)

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

2. Disable search text box(Disappearing search field text)

$(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. Open a link in a new window(Opening links in a new window)

$(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<a href="http://www.opensourcehunter.com" rel="external">open link</a>

4. Check the browser(Detect browser)

$(document).ready(function() {// Target Firefox 2 and aboveif ($.browser.mozilla && $.browser.version >= "1.8" ){// do something}// Target Safariif( $.browser.safari ){// do something}// Target Chromeif( $.browser.chrome){// do something}// Target Caminoif( $.browser.camino){// do something}// Target Operaif( $.browser.opera){// do something}// Target IE6 and belowif ($.browser.msie && $.browser.version <= 6 ){// do something}// Target anything above IE6if ($.browser.msie && $.browser.version > 6){// do something}});

5. Pre-load images(Preloading images)

$(document).ready(function() {jQuery.preloadImages = function(){  for(var i = 0; i<arguments.length; i++)="" {="" jquery("

6. style filtering(CSS style switcher)

$(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<link rel="stylesheet" href="default.css" type="text/css">// the links<a href="#" class="Styleswitcher" rel="default.css">Default Theme</a><a href="#" class="Styleswitcher" rel="red.css">Red Theme</a><a href="#" class="Styleswitcher" rel="blue.css">Blue Theme</a>});

7. The column height is the same(Columns of equal 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. Adjust the font size(Font resizing)

$(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. Return to the top of the page(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<a name="top"></a>// the link<a href="#top">go to top</a>});

11. Obtain the XY coordinates of the mouse(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);  });// how to use<div id="XY"></div>});

12. verify whether the element is null(Verify if an element is empty)

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

13. Replace Element(Replace a element)

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

14. Delayed Loading(Jquery timer callback functions)

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

15. Remove words(Remove a word)

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

16. Verify that the element exists(Verify that an element exists in jquery)

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

17. Make the entire Div clickable(Make the entire 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<div><a href="index.html">home</a></div>});

18. Switch between ID and class(Switch between classes or ID's 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 object(Clone a object)

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

20. Center the element Screen(Center an element on the 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. Custom Selector(Write our own selector)

$(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 the number of elements(Count a element)

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

23. Custom bullets(Use your own bullets)

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

24. Reference jquery distributed by Google(Let Google host jquery for you)

//Example 1<script src="http://www.google.com/jsapi"></script><script type="text/javascript">google.load("jquery", "1.2.6");google.setOnLoadCallback(function() {    // do something});</script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> // Example 2:(the best and fastest way)<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

25. Disable jquery Animation(Disable jquery animations)

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

26. No conflict-Mode)

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

Jquery quick query table:

Reference recommendations:
Jquery
Jquery UI
14 days of jquery
Learning jquery
Cheatsheet jquery 1.1.3
Improve your jquery-25 excellent tips