jQuery Tips and Tricks

 Disabling Right Mouse Click


$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});


Determine Browser

Suppose you were to determine the browser type of the browser currently in use. You can use the following piece of code to do this:

$(document).ready(function() {
// If the browser type if Mozilla Firefox
if ($.browser.mozilla && $.browser.version >= "1.8" ){
// some code
}
// If the browser type is Opera
if( $.browser.opera)
{
// some code
}
// If the web browser type is Safari
if( $.browser.safari )
{
// some code
}
// If the web browser type is Chrome
if( $.browser.chrome)
{
// some code
}
// If the web browser type is Internet Explorer
if ($.browser.msie && $.browser.version <= 6 )
{
// some code
}
//If the web browser type is Internet Explorer 6 and above
if ($.browser.msie && $.browser.version > 6)
{
// some code
}
});


Detect Current Mouse Coordinates

Now, suppose you need to detect the current mouse coordinates in the web browser in use. To do this, you can write the following piece of code:

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



});


Check if an Element Exists

To check whether an element exists, you can write the following code:

if ($("#someElement").length)
{
//The DOM element exists
}
else
{
//The DOM element doesn't exist
}


Check if an Element Is Visible

To check whether an element is visible, you can use the following piece of code:

if($(element).is(":visible") == "true")
{
//The DOM element is visible
}
else
{
//The DOM element is invisible
}


Set a Timer

The following piece of code can be used to set a timer using jQuery:

$(document).ready(function()
{
window.setTimeout(function()
{
// some code
}, 500);
});


JQuery’s Chaining Feature

Chaining is a great feature in jQuery that allows you to chain method calls. Here is an example:

$('sampleElement').removeClass('classToBeRemoved').addClass('classToBeAdded');

You can also use jQuery to store state information of DOM elements in your web page. It contains the data() method that you can use to store state information of the DOM elements in key/value pairs. Here is an example:

$('#someElement').data('currentState', 'off');


Lazy Loading

Lazy loading is a great feature in jQuery that ebales you to load only the content that is needed. To use this, you should incorporate the jquery.lazyload.js script file as shown below:





Next, you can use the lazyload() method as shown below:

$("imageObject").lazyload();


Preloading Images

Preloading images in a web page improves performance. This can particularly be useful while an animation is in progress- your web page need not wait for the image to be loaded. You can use jQuery to preload images with simple code. Here is an example:

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