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.

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

(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>

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

(document).ready(function() {
       // Reset the fontnbsp&size(back to default)
       var originalFontSize = ('html').css('font-size');
       (".resetFont").click(function(){
             ('html').css('font-size', originalFontSize);
       });
       // Increase the fontnbsp&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 fontnbsp&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;
       });
});

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint?

//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>

[javascript]view plaincopyprint?

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

[javascript]view plaincopyprint