In this post i show you some useful tricks what you can do using JQuery. When i start interesting about it i was surprised what awesome things you can do using it. Like creating good looking banners, menus with action and other great design things. So read post and i hope this information will be useful for you. Maybe some of them seems for you very easy and unnecessary, but remember there are beginners web designers and for them this information could be useful. Clickonpost.com works for you.

Preloading Images

So first start with nice trick how to create preload image during general image is loading. So all what you need is this code sample.

jQuery.preloadImages = function()
{
  for(var i = 0; i").attr("src", arguments[i]);
  }
};

// Usage
$.preloadImages("image1.gif", "/path/to/image2.png", "some/image3.jpg");

Detect Browser

We all know no matter how we try create site usable for all web browser without any page damage for some of them usualy will be some problems with site looking. Like content shows bottom of footer. Because it's not possible that for every your site visitor will be that computer, monitor and operation system and of course browser like you have. Although it is better to use CSS conditionnal comments to detect a specific browser and apply some css style, it is a very easy thing to do with JQuery, which can be useful at times. 

//A. Target Safari
if( $.browser.safari ) $("#menu li a").css("padding", "1em 1.2em" );

//B. Target anything above IE6
if ($.browser.msie && $.browser.version > 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//C. Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//D. Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding", "1em 1.8em" );

Font Resizing

Its one of common using feature in many of nowadays websites. So there you have way how to do this using jquery.

$(document).ready(function(){
  // Reset Font Size
  var originalFontSize = $('html').css('font-size');
    $(".resetFont").click(function(){
    $('html').css('font-size', originalFontSize);
  });
  // Increase Font Size
  $(".increaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $('html').css('font-size', newFontSize);
    return false;
  });
  // Decrease Font 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;
  });
});

Disable right-click contextual menu

Maybe you know a lot of ways how to do this, but using jquery it's will be a lot easier.

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

Adding a Class/ID to an element with toggleClass

Nice trick how to create color changing for element with click. See demo here.

jQuery
//Toggle Class on Click
	$("ul.col3 li .block").click(function() {
		$(this).toggleClass("active");
	});

CSS
.active {background: #ccc;}

Even and odd selectors

Nice trick for comment pages or welcome page where you put new information for easier to read. See demo here.

jQuery
//Specify Even and Odd Selectors
	$("ul li:even").addClass("even");
	$("ul li  dd").addClass("odd");

CSS
.even {
	background: #fff;
	border: 1px solid #ccc;
}
.odd { background: #ccc; }

Get mouse x and y axis

Greta trick to get coordinates for mouse pointer. Script will show you x and y values.

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

Back to top button with link

Great trick for blog or other web sites where are a lot of information into one page. When you are end of page you don't need no more to scroll page to up with this trick you can create button with link to top of page. When you click on this button it automatically scroll page to top. Download plugin here.

$('#top').click(function() {  
    $(document).scrollTo(0,500);  
}

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>  
......  
<a id="top" style="cursor:hand;cursor:pointer">  
Back to top

Total of selected elements

It return the number of elements that are selected by jQuery selector. Using length method will return the size of array which is equal to the number of selected objects.

$('.someClass').length;