8 practical jQuery tips

1) disable the right-click Function

If you want to save your website information, you can use this code to disable the right-click function.

<font><font>$(document).ready(function() {//catch the right-click context menu$(document).bind("contextmenu",function(e) { //warning prompt - optionalalert("No right-clicking!");//delete the default context menureturn false;});});</font></font>

2) use jQuery to set the text size

With this code, you can reset the text size (increase or decrease) as needed ).

<font><font>$(document).ready(function() {//find the current font sizevar originalFontSize = $('html').css('font-size');//Increase the text size$(".increaseFont").click(function() {var currentFontSize = $('html').css('font-size');var currentFontSizeNumber = parseFloat(currentFontSize, 10);var newFontSize = currentFontSizeNumber*1.2;$('html').css('font-size', newFontSize);return false;});//Decrease the Text Size$(".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;});// Reset Font Size$(".resetFont").click(function(){$('html').css('font-size', originalFontSize);  });});</font></font>

3) Open the link in a new window

Using this code will help you open a link in a new window to provide a better user experience.

$(document).ready(function() {//select all anchor tags that have http in the href//and apply the target=_blank$("a[href^='http']").attr('target','_blank');});

$(document).ready(function() {$("a.cssSwap").click(function() { //swap the link rel attribute with the value in the rel    $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); }); });

5) return to the top Link

This code is very useful for clicking a single page for a long time. You can click "Back to Top" in an important moment.

$(document).ready(function() {//when the id="top" link is clicked$('#top').click(function() {//scoll the page back to the top$(document).scrollTo(0,500);}});

6) obtain the X/y axis of the mouse pointer

<font><font>$().mousemove(function(e){    //display the x and y axis values inside the P element    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);});</font></font>

7) detect the current mouse coordinates

With this script, you can get the mouse coordinates in any web browser.

$(document).ready(function() {$().mousemove(function(e){$('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);});

8) image pre-loading

This Code helps you quickly load images or webpages.

<font><font>jQuery.preloadImagesInWebPage = function() {     for(var ctr = 0; ctr<arguments.length; ctr++){jQuery("").attr("src", arguments[ctr]);}}To use the above method, you can use the following piece of code:$.preloadImages("image1.gif", "image2.gif", "image3.gif");To check whether an image has been loaded, you can use the following piece of code:$('#imageObject').attr('src', 'image1.gif').load(function() {alert('The image has been loaded…');});</font></font>