8 super practical jQuery function codes to share_jquery

In this article, we will share 8 super practical tips for jQuery users. jQuery is one of the best libraries for JavaScript. It is mainly used for animation and event processing, and supports Ajax and HTML script clients. In addition, jQuery also has various plug-ins to help developers quickly create websites/webpages in the shortest time.

I hope you will like these practical codes shared in this article.

1) Disable right-click function
If you want to save website information for users, then developers can use this code - disable right-click functionality.

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) Use jQuery to set text size

Using this code, the user can resize the text (increase or decrease) according to their needs.

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) Open the link in a new window

Using this code will help users open links in new windows and provide users with a better user experience.

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) Change style list

Use this code to help you change the style list.

Copy 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) Return to top link

This code is very useful for long-term clicks on a single page. You can click the "Return to Top" function at important junctures.

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 axis of the mouse pointer

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 current mouse coordinates

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

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) Image preloading

This code helps users load images or web pages quickly.

Copy code The code is as follows:

jQuery.preloadImagesInWebPage = function()
{
for(var ctr = 0; 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…');
});