8 Useful jQuery Tips and Tricks for Programmers

Posted on February 28, 2014

Today we are going to share some tips and tricks for jQuery users. jQuery is one of the best javascript library that is designed for simplifying animations, event handling,Ajax-enabled and client side scripting of HTML. Also jQuery have various plugins for developers that help to create websites and web pages in just simple and easy way.

Today we shear some selected scripts for developers which are very useful for jQuery coders. I hope you would love to use these code in your next projects.

1) Disable Right-Clicking

If you want to save your sites information from users, developers should use this code for disable Right clicking functionality. Using this code, jquery programmers can deactivate right clicking on web pages. Here are the code below: –

$(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;
	});
});

$(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 Resize with jQuery

Using this code, users can re-size(increase and decrease) the text of websites. Users can increase and decrease fonts according to their requirement. Code is here: –

$(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);
  });
});

$(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 Links in New Windows

Try this code and increase your site impressions because using this jquery code users will go on new window after clicking on any link of your site. Code is below: –

$(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() {

//select all anchor tags that have http in the href

//and apply the target=_blank

$("a[href^='http']").attr('target','_blank');

});

4) Style Sheets Swap

Swap style sheets using this code and the “Style sheets swap” script is below: –

$(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')); 
	}); 
});

$(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 Link

That is very common function you can see on eve site nowadays is ” Back to Top”. This functionality is very useful for long pages for make short in a single click. Visit this code below: –

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

$(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 mouse cursor x and y axis

You can find the values of X and Y coordinator of mouse pointer. Code is blow : –

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

$().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 find the current mouse coordinates in the any web browser supported jquery. Code is below: –

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

$(document).ready(function() {

$().mousemove(function(e)

{

$('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);

});

8) Preloading Images in jQuery

this image preloading script helps to load image or web page very quickly. You not need wait to image load. The code is below:

jQuery.preloadImagesInWebPage = function() 
{
     for(var ctr = 0; ctr&lt;arguments.length; ctr++)
{
jQuery("<img alt="" />").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…');
});