jQuery tips that may be used in development_jquery

1) Disable right-click
When developing web applications, there are some situations where it is necessary to disable the right-click function. Using this code, jQuery developers can disable right mouse clicks on web pages. The code is as follows:

Copy code The code is as follows:

$(document).ready(function( ) {
//catch the right-click context menu
$(document).bind("contextmenu",function(e) {
//warning prompt - optional
alert("No right -clicking!");

//delete the default context menu
return false;
});
});

2) Text scaling
Using the following code, users can increase or zoom the font size in the web page as needed. The code is as follows:

Copy code The code is as follows:

$(document).ready(function() {
//find the current font size
var 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);
});
});

3) in Open Links in New Window
With this jQuery code, any link that a user clicks on your website will open in a new window. As follows:

Copy code The code is as follows:

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

4) Style sheet switching
Do you know how to skin a website? The following code can help you implement the style sheet switching function, as follows:

Copy the code The code is as follows:

$(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) Back to top
This is a very common back to top function in websites nowadays, especially suitable for long pages. The code is very simple, as follows:

Copy code The code is as follows:

$(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) Get the X, Y coordinates of the mouse
The following code can get the mouse’s X, Y coordinates, the code is as follows:

Copy code The code is as follows:

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

7) Detect the coordinates of the current mouse
Use the following code to get the coordinates of the current mouse anywhere that supports jQuery, as follows:

Copy code The code is as follows:

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

8) Preload images
This image preload snippet allows you to quickly preload images without waiting. The code is as follows:

Copy code The code is as follows:

jQuery.preloadImagesInWebPage = function() {
for(var ctr = 0; ctrjQuery("").attr("src", arguments[ctr]);
}
}

Calling method:

Copy code The code is as follows:

$.preloadImages ("image1.gif", "image2.gif", "image3.gif");
Determine whether the image has been loaded:
$('#imageObject').attr('src', 'image1.gif ').load(function() {
alert('The image has been loaded...');
});