jQuery is a feature-rich JavaScript library. jQuery makes the things like animation,events handling, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
Here we are sharing some useful jQuery tricks that can be used by any programmer in any of his project.
1) Disable Right-Clicking
We see most of the non-technical internet try to copy the website content by selecting it and then copying it by using right click of the mouse. We can disable this by using the following below code. This will just disable the right click in any of the webpage where the script of jQury is written.
$(document).ready(function() {
//Detects the right-click context menu
$(document).bind("contextmenu",function(e) {
//warning prompt - optional
alert("No right-clicking in this page!");
//delete the default context menu
return false;
});
});
2)Back to Top Link
We see in many websites that when we scroll down any webpage, the backto top link appears in the webpage and then when we click on that link, we scrolls up automatically at the top of the page.
We can apply this setting in our webpage by using the following code
$(document).ready(function() {
//when the id="top" link is clicked
$('#top').click(function() {
//scoll the page back to the top
$(document).scrollTo(0,500);
}
});
3) Preloading Images in jQuery
This feature quickly load the images in the webpage when the website loads.
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');
});
4) Open Links in New Windows
This code will help to get the more page views into your website. Whenever visitor clicks on any of the url, the link will always opens in the new tab.
$(document).ready(function() {
//select the links
//and apply the target=_blank
$("a[href^='http']").attr('target','_blank');
});
5) Text Resize with jQuery
With the help of this code of jQuery, user can resize the text of websites. This code will find the current font size and user can change the font size of that page dynamically.
$(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);
});
});
0 Comment(s)