Jquery tips and tips

Jquery tips and tips

The following describes some Jquery tips. For example, you can disable right-click, hide text in the search text box, open a link in a new window, check the browser, pre-load the image, switch the page style, set the height of all columns, dynamically control the page font size, and obtain the X value Y of the mouse pointer, whether the verification element is null, the replacement element, the delayed loading, the validation element exists in the Jquery set, the DIV clickable, the cloned object, and the element is centered calculate the number of elements, use the Jquery class library on the Google host, disable the Jquery effect, and solve the conflict between the Jquery Class Library and other Javascript class libraries.

1. Right-click prohibited

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

2. Hide text in the search text box
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. Open the link 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<A href="http://www.opensourcehunter.com" rel=external>open link</A>

4. Check the browser
Note: In jQuery 1.4, $. support replaced the $. browser variable.

$(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
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<ARGUMENTS.LENGTH; jQuery(?
6. Page Style Switching
$(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 type=text/css href="default.css">// the links<A class="Styleswitcher" href="#" rel=default.css>Default Theme</A><A class="Styleswitcher" href="#" rel=red.css>Red Theme</A><A class="Styleswitcher" href="#" rel=blue.css>Blue Theme</A>});
7. The column height is the same
If two CSS columns are used, the height of the two columns can be the same.
$(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. dynamically control the page font size
You can change the page 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. Return to the top of the page
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<A name=top></A>// the link<A href="#top">go to top</A>});
11. Obtain the XY value of the mouse pointer
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<DIV id=XY></DIV> });
12. verify whether the element is null
This will allow you to check if an element is empty.
$(document).ready(function() { if ($('#id').html()) {  // do something  }});
13. Replace Element
Want to replace a div, or something else?
$(document).ready(function() {  $('#id').replaceWith('<DIV>I have been replaced</DIV> ');});
14. jQuery delayed Loading Function
Want to delay something?
$(document).ready(function() {  window.setTimeout(function() {   // do something  }, 1000);});
15. Remove words
Want to remove a certain word (s )?
$(document).ready(function() {  var el = $('#id');  el.html(el.html().replace(/word/ig, ""));});
16. verify whether the element exists in the jquery object set
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<DIV><A href="index.html">home</A></DIV> });
18. Conversion between ID and Class.
When the Window size is changed, switch between ID and Class
$(document).ready(function() {  function checkWindowSize() {  if ( $(window).width() > 1200 ) {    $('body').addClass('large');  }  else {    $('body').removeClass('large');  }  }$(window).resize(checkWindowSize);});
19. Clone object
Clone a div or an other element.
$(document).ready(function() {  var cloned = $('#id').clone();// how to use<DIV id=id></DIV> });
20. Place the elements in the middle of 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 your 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 the number of elements
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. Reference The Jquery class library on the Google host
Let Google host the jQuery script for you. This can be done in 2 ways.
[Code] // 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 type = text/javascript src = "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"> </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> [/code]

25. Disable Jquery (animation) Effects
Disable all jQuery effects
$(document).ready(function() {  jQuery.fx.off = true;});
26. Conflict Solution with other Javascript Class Libraries
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();});

Articles you may be interested in:

 

 
  
26 practical tips under Jquery (jQuery tips, tricks & solutions)
 
  
Several classic jQuery tips
 
  
12 tips for jquery operation check box (checkbox)
 
  
Tips for using jQuery to submit multiple forms
 
  
15 common jquery methods and tips
 
  
Five useful jquery tips
 
  
Sharing 15 well-known jquery tips
 
  
Seven Tips on jQuery that cannot be missed