here we learn how to apply our jQuery plug in for each element with our plugin instance .
by default JavaScript assumes each variable and object are static, if you change any where it remains stateless.
To understand this code we must aware of

• JavaScript scope of variables.
• jquery basics.

Download Demo

(function($){
instanceId=0;	
	$.fn.my_plugin=function(options){
		//default options for our plugin
		defaultOptions={instanceData:'mahesh'};
		return this.each(function(){
		//for every element we create new instance options
		// remember here {} ,means we create empty object and extend with 
		//default options
		//user options
		options=$.extend({},defaultOptions,options);	
		//call the function that create new instance object of our plugin 
		$.my_pluginInstanceCreater(this,options);	
		});
	}
 
$.my_pluginInstanceCreater=function(target,options){
	//if given target element  don't have already instance of our plugin
	//then we create a new instance and assign it to target
	//if target elment has already instance of our plugin return it
	return target.my_plugin || (target.my_plugin=new $.my_pluginInstance(target,options));
	}
 
// this is main core plugin instance where we code every thing 
$.my_pluginInstance=function(target,options){
 
	$(target).text(options.instanceData + '  ,Instance Id: '+(instanceId++))
	}
 
})(jQuery); 
// function to create our own plugin scope of variables

Download Demo

Sometimes we need to prevent the context menu from the browser when user right clicks on the element . for example preventing the user from saving image from application,viewing the source code of the web page.
it is very simple to do that using jquery with “contextmenu” event

jQuery().ready(function(){
jQuery('img').bind('contextmenu',function(){return false;});
});

In the above example we disabled context menu on the images by saving. we can see this demo on my previous post about the jquery mouse gestures.

You can see this example live over top of my blog header, it shows mouse left,right,middle ,over events live. here we learn how did i implemented this.

HTML of demo

Here we use simple logic with four layers for each mouse event. code shown below

<div id="mouse-div">
  <div id="mouse-parts">
    <div id="mouse-left">&nbsp;</div>
    <div id="mouse-right">&nbsp;</div>
    <div id="mouse-blink">&nbsp;</div>    
    <div id="mouse-middle">&nbsp;</div>
  </div>

CSS of Demo

Total mouse main element #mouse-div was positioned absolutely with mouse background.

mouse main element has another element called #mouse-parts and positioned relatively with main element.

#mouse-left element positioned with main background and its mouse left click event background matched exactly with absolute positioning.

#mouse-right element positioned with main background and its mouse right click event background matched exactly with absolute positioning.

#mouse-middle element positioned with main background and its mouse middle click event background matched exactly with absolute positioning.

#mouse-blink element positioned with main background and its mouse over event background matched exactly with absolute positioning.

#mouse-div {
	position: absolute;
	height: 240px;
	width: 200px;
	left: 14px;
	top: 51px;
	background: url(mouse.png) no-repeat left top;
}
#mouse-div #mouse-parts {
	position: relative;
	height: 100%;
	width: 100%;
}
#mouse-parts #mouse-blink {
	height: 43px;
	width: 45px;
	background: url(mouse-over.png) no-repeat center center;
	position: absolute;
	left: 114px;
	top: 165px;
	display:none;
}
#mouse-parts #mouse-left {
	height: 141px;
	width: 114px;
	background: url(mouse-left.png) no-repeat left top;
	position: absolute;
	top: 24px;
	display:none;
}
#mouse-parts #mouse-right {
	height: 142px;
	width: 110px;
	position: absolute;
	background: url(mouse-right.png) no-repeat left top;
	left: 62px;
	top: 0px;
	display:none;
}
#mouse-parts #mouse-middle {
	height: 128px;
	width: 82px;
	position: absolute;
	background: url(mouse-middle.png) no-repeat left top;
	left: 33px;
	top: -1px;
	display:none;
}

jQuery Code

jQuery().ready(function(){
jQuery('#mouse-div').hover(function(){
jQuery('#mouse-blink').show();},function(){
jQuery('#mouse-blink').hide();})
.mousedown(function(e){ //fire the each event when mouse button pressed
e.preventDefault();
if(e.which==1){
jQuery('#mouse-left').show();//show the mouse-left element over the mouse that was brightened
}else if(e.which==3){
jQuery('#mouse-right').show();//show the mouse-right element over the mouse that was brightened
return false;
}else if(e.which==2){
jQuery('#mouse-middle').show();//show the mouse-middle element over the mouse that was brightened
}
return false;})
.mouseup(function(e){jQuery('#mouse-left,#mouse-right,#mouse-middle').hide();})//reset the all images to hidden state when mouse released
.bind('contextmenu',function(){return false;});//hide the default context menu when right clicking on main element.
});

View Demo and Download ‘jquery mouse guestures’

jQuery is most famous javascript library compared to its concurrents. One of importent functionality in jQuery is its Ajax handling. It has very flexible methods for Ajax.We seen how to handle the Ajax Errors in my previous Article.Here we concentrate on jQuery ajaxstart,ajaxstop default methods to handle globally.

Present it is very common to use ajax for every functionality,while querying externel resources with ajax we have to show the end user there is something happening behind the page.Some novice users don’t know about this functionality. So we must intimate the end user we are working on back end. Some times Ajax calls takes more time to respond with some reason. in that case most users confused about it may be stopped working . so here we take one example and tutorial.

ajaxStart

This method is called globally by jQuery while before starting any ajax call starts.

ajaxstop

This method called after stopping the Ajax stopped successfully or Ajax call cancelled.

These methods called on $.getJSON,$.get,$.post,$().load,$.getScript function.

Example

1
2
3
4
5
6
7
8

jQuery().ready(function(){ //Dom ready 
$('#loadimg').ajaxStart(function(){$(this).show();});//this method for ajax start		
$('#loadimg').ajaxStop(function(){$(this).hide();});//this method for ajax stop
$('#loadjson').click(function(){
$.getJSON('ajax.js',function(d){alert(d.name);});//$.getJSON method
});
$('#loadelement').click(function(){$(this).load('loadsnippet.html')});//load method
});

Try more examples

Demo Download

jQuery is the most awesome javascript library that made easy for asynchronous ajax calls.it has global ajax function and some pre defined ajax functions like $.get, $.post, load .etc. but we don’t find any error messages by default with this library. we can see the errors with firefox’s addon firebug or with IE developer toolbar.So we manage most common ajax errors in our application with global ajaxSetup function which come with jQuery by default. We can set many options,to see available ajaxsetup options please check here.

most ajax errors we get errors are server response errors and some JSON parse errors. To know more about the HTTP errors details please check here. To test this error handling just copy and paste it to your head section of HTML document.

Javascript Code for setting global error handling.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$().ready(function(){
	$.ajaxSetup({
		error:function(x,e){
			if(x.status==0){
			alert('You are offline!!\n Please Check Your Network.');
			}else if(x.status==404){
			alert('Requested URL not found.');
			}else if(x.status==500){
			alert('Internel Server Error.');
			}else if(e=='parsererror'){
			alert('Error.\nParsing JSON Request failed.');
			}else if(e=='timeout'){
			alert('Request Time out.');
			}else {
			alert('Unknow Error.\n'+x.responseText);
			}
		}
	});
});

In the above example we handle following common error and show response text for other rare errors.

• 0-xhr status ,is it initialized or not that means user is offline.
• 404-page not found
• 500-Internel Server error.
• request timeout – jQuery custom error.
• parseerror-jQuery custom error when parsing JSON data.
• we just throw other errors with response error

Example1

1
2

params={name:'mahesh'};
$.get(url,params,function(){})

In above example,jQuery automatically raises all available errors,except parse error. because we didn’t give any return type format.

Example2

1
2
3

params={name:'mahesh'};
$.get(url,params,function(){},'json');
$.getJSON(url,params,function(){});

In above example,jQuery automatically raises all available errors,because we added return type format at end. $.getJSON automatically adds the return type of parameter to “JSON”

Example3

1
2

params={name:'mahesh'};
$.get(url,params,function(){},'xml');

In the above example 3 ,we gave xml type return parameter, here also jQuery automatically raises all errors even parse error also.

All web documents, media and other web resources retrieved by a Web browser, are often saved, or cached, locally on the user’s hard drive. The next time that media or web resources is requested the Web browser may load the file from the cache instead of downloading it over the internet. This might be desirable for a some web document content doesn’t change often but undesirable for documents are updated frequently with new content or information.
All web servers sends to the browser with some basic information about the document before it sent .in the above example we can see some of them.for full details please refer here . we can use this server side headers to prevent browser caching .we learn here only PHP related headers.

preventing browser cache with javascript.

Here i am showing basic jQuery plugin that appends a random time to each links in document.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

(function($){
	$.fn.nocachelink=function(options){
	//itereate trough each element in given element collection
		return this.each(function(){
			var href=$(this).attr('href');
			if(href.lastIndexOf('?')!=-1){ //if query string is set or not for link
			href=href+'?'+new Date().getTime();
			}else{
			href=href+'&'+new Date().getTime();
			}
			$(this).attr('href',href); // update new href attribute
		});
	}
})(jQuery);

An example how to use it

$().ready(function(){
	$('.nocache').nocachelink();
});

preventing browser cache with meta tags.

to prevent cache by means of html meta tags add following tags to document head section.

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">

preventing browser cache with server side headers.

we can also use HTTP headers by php also as below,remember you must add this lines to start of code.

//  @-silenced or error suppress operater
	@header( 'Expires: Wed, 11 Jan 1984 05:00:00 GMT' );
	@header( 'Last-Modified: ' . gmdate( 'D, d M Y H:i:s' ) . ' GMT' );
	@header( 'Cache-Control: no-cache, must-revalidate, max-age=0' );
	@header( 'Pragma: no-cache' );

preventing browsers cache with ajax calls.

we can also set headers with ajax response headers.

preventing browser cache with other methods.

By default all browser don’t cache SSL layered documents.
below example document won’t cached by browsers.

https://www.yourdomain.com

What is jQuery?

JQuery is a JavaScript framework that makes writing advanced JavaScript very easy.
You can learn easily jQuery even you know basic knowledge in JavaScript. It has many useful JavaScript function to support cross browser JavaScript compatibility.

Where can you get it?

The official jQuery website (http://jquery.com) is always the most up-to-date resource for code and news related to the library. To get started, we need a copy of jQuery, which can be downloaded right from the home page of the site. Several versions of jQuery may be available at any given moment; the latest uncompressed version will be most appropriate for developers like you. You can find documentation here (http://docs.jquery.com).

How to install and run jQuery?

Since jQuery is a pre built function library in JavaScript, we can include normal external JavaScript files after downloading it from core jQuery web site.

1
2
3
4
5
6
7
8
9
10
11
12

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//do magic with jQuery here
});
</script>
</head>
<body>
</body>
</html>

What you can do with jQuery?

Easy Dom selectors (css, javascript, xpath, Dom).
Ajax.
Easy Dom manipulation
Easy Dom traversing
Use pre programmed number of jQuery plug-ins.
Cross browser supported event handling.
Utility functions.
Flash like animation.
And you can develop complex web applications with less coding….more.

How to use Magic method of jQuery $().ready or $(document).ready?

Generally browser loads external CSS and JavaScript files first and after loads the document element model and assigns corresponding objects by loading from server.
This loading of all objects called window load and when it completed browser triggers window.load event. But we can manipulate the document after the document element model. This event occurs before window.load event. Some A grade browsers supports this DOM ready event. So cross browser compatibility jQuery added this magic method to find the Dom ready event.
We call this method as below

1
2
3

$(document).ready(function(){
alert(‘Dom loaded’);
});

Document parameter is optional, if no parameter given jQuery assumes the document.

1
2
3

$().ready(function(){
alert (‘Dom loaded’);
});

Generally we call the window load event with jQuery as below,

1
2
3

$(window).load (function () {
alert (‘window loaded completely’);
});