Php Development » jquery

jQuery form validation example required

mahesh chari — Tue, 04 Oct 2011 12:58:43 +0000

jQuery form validation “required” example 1

“required” element with HTML

bind simple function by adding simple class to required elements “required”.

$('#form1').validate();

jQuery form validation “required” example 1

“required” element with Javascript parameters

bind function by adding configuration with Javascript only.Here we add custom messages also.

$('#form2').validate({
rules:{
	username2:'required',
	password2:'required'
}
,messages:{
	username2:"Please enter user name.",
	password2:"Please enter password"
	}
 
});

jquery form validation

mahesh chari — Mon, 03 Oct 2011 21:06:21 +0000

jQuery form validation

Hello freinds, we know that every dynamic form need to be proper validated through the server and client side. some one get the doubt why we need to be implemented on both client and server side. as per my opinion we just need Server side validation only, but it takes more server resources and requests if user doesn’t submit the data correctly . some one will get question why we can only implment client side validation , i say NO for only client side validation because some users will disable javascript and send the data to server in that case it is useless to implment only client side validation. It is good practice to implement both client and server side validation .

I have created a long validation class for PHP and posted in my previous tutorial. now we are going to learn how to implement the client side valdiation with jQuery . for that we have a good jQuery validation plug in , that can be used in many ways. you can see the examples here.

horizontal scroll

mahesh chari — Fri, 22 Jul 2011 21:28:19 +0000

how to scroll the window horizontally scroll?

I got asked by my coleague to horizontal scroll the window , let me explain the scenario , page width is 1500px with a 1500px image in back ground and it should be always centered on page load and window resized. i got a solution thanx to jQuery.scrollTo plugin.



how to center the window for small screen






  This container has 1500px width  and centered into the view port.
   if this container is seen in less than 1500px  ,
   it should be scrolled to the centered on
  page initializes and window resizes

Demo

draw eclipse using javascript

mahesh chari — Thu, 06 Jan 2011 21:42:13 +0000

How to draw eclipse using HTML4,CSS2,jQuery

Please refer my previous post draw circle ,to get basic idea. Circle is instance of an Eclipse where both xradius and yradius are equal.

See the quick demo how it works and looks here.

Here is the idea how we get the points on Eclipse using trigonametry. You can apply this formula to any programming language.

x=centerX+Xradius*Math.sin(angle);
y=centerY+Yradius*Math.cos(angle );

Here is the function that will return the array of points exists on Eclipse. It will take five parameters ,centerx,centery , xradius,yradius,number of points we need.

function getCirclePoints(centerX,centerY,xradius,yradius,segments){
var totalPoints=new Array();
for(var i=0;i<(segments);i++){
x=centerX+xradius*Math.sin(i*2*Math.PI/segments);
y=centerY+yradius*Math.cos(i*2*Math.PI/segments );
totalPoints.push({'x':x,'y':y});
}
return totalPoints;
}

Demo

Animation Effect with above function

Animation Demo

draw circle with javascript

mahesh chari — Thu, 09 Dec 2010 21:21:40 +0000

How to draw a Circle using HTML 4, CSS2,Javascript ,jQuery

here we learn how to draw a basic circle with HTML div, CSS2, jQuery . Basic concept behind this scenario is Maths .

We must know some basic circle equation to find the x, y co ordintates of the cicle perimeter. any point on circle can be denoted as trigonametry equation as shown below. here Javascript function accepts in radians. next how many points we need to draw the circle ,we can draw as many points we want.

Concept :

x=centerX+radius*Math.sin(angle);
y=centerY+radius*Math.cos(angle);

function getCirclePoints(centerX,centerY,radius,segments){
var totalPoints=new Array();
for(var i=0;i<segments;i++){
x=centerX+radius*Math.sin(i*2*Math.PI/segments);
y=centerY+radius*Math.cos(i*2*Math.PI/segments);
totalPoints.push({'x':x,'y':y});
}
return totalPoints;
}

In the above function we decide how many points or segments we need. we should give radius and center point of the circle.

Click Demo how it works instntly.

See the animation effect with above function

detect user is active or idle on web page

mahesh chari — Thu, 25 Nov 2010 04:16:03 +0000

How to find the user is idle or active on web page or its element.

We know that user is active on our web page or any element of the web page when he performs following actions

Mouse Moves
Key board button presses (presse down or up)
Mouse Wheel or Mouse Scrolls
Mouse Down ( click)

When the user doesn’t do any of above action on web page ,he is idle or in active.

Here we group above events as user active events and other one event that is user idle Event. let consider user is idle for a certain time if he doesn’t any user events ,10 seconds .

The logic is here very simple we bind a timer event that is called idle event ,it will called 10seconds.

If we user performs any above user active events ,we post pone the idle event for next 10seconds.

If he doesn’t do any thing for 10seconds the idle event automatically called by timer event.

We test on following Element with jQuery.

var timer;// a timer event
var idleTime=3000;//ms
//this function post pones calling userIdle function for next 10 Seconds
function userActive(){
clearTimeout(timer);//resent the timer 
timer=setTimeout(userIdle,idleTime);//again post pone user Idle function
$('#ObserverElement').html('Glad to see you again !!')
.trigger('active');// trigger a custome event that is user active
 
}
function userIdle(){
$('#ObserverElement').html('Oops!! user in active !!')
.trigger('idle');// trigger a custom event that is user is idle.
}
 
$().ready(function(){
$('#ObserverElement')
.bind('mousemove',userActive)
.bind('keydown',userActive)
.bind('DOMMouseScroll',userActive)
.bind('mousewheel',userActive)
.bind('mousedown',userActive)
.bind('active',function(){ //if user comes active again we change back ground color
$(this).css('background-color','#FFFF00');
})
.bind('idle',function(){//if user go in active or idel we change back ground color
$(this).css('background-color','#CCFF00');
});
 
});

Download Demo

jquery multiple instances

mahesh chari — Thu, 25 Mar 2010 00:47:32 +0000

jQuery multiple instances

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

hide browser context menu -jquery

mahesh chari — Thu, 18 Mar 2010 12:38:39 +0000

Hide the web browser context menu with jquery

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.

jquery mouse gestures real demo

mahesh chari — Thu, 18 Mar 2010 12:27:26 +0000

A Simple jQuery mouse gestures demo and tutorial.

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

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 ajaxstart ajaxstop

mahesh chari — Sat, 09 Jan 2010 11:14:48 +0000

Displaying Ajax started element using JQuery ajaxstart,ajaxstop

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

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