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

It is comman practice we call a call back functions in our javascript application ,we know that calling a non existed javascript function triggers a error. In order to overcome these kind of errors we must check that function exists and call only if that exists.

Generelly every function has scope in window object of browsers unless classes,objects instances.

Example:

function myfunction (){

var foo;

}

now this function defination can be collected in in window scope.

We check if this function defined using a simple IF condition as below.

if(window.myfunction){

}else{

}

Above will return true even it is function or a variable, so we have confine the condition to exactly is it function or not.

as below

if( typeof myfunction==="function"){

}else{

}

Javascript function is also a Object ,we can check for its instance kind is Base function prototype.

if( myfunction instanceof Function){

}else {

}

Above methods works if only we get perticular function know, in our dynamic applications we have to check at run time and we don’t know exactly the name of the function. So we make a small function that will do for us.

function function_exists (function_name) {
	if (typeof function_name === 'string'){
     return (typeof window[function_name] === 'function');
    } else{
        return (function_name instanceof Function);
    }
}

In above function the parameter can be string or a direct function reference. first we check if given parameter is string , then we check the function in the window scope.if given paramenter is direct function reference we check that it is instace of function prototype.

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

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

Some times we need to serve user based JavaScript files, for example

• passing your php variables to JavaScript on client side of browser.
• protecting JavaScript variables.
• setting browser cache manually for JavaScript files.
• loading user based java script files.
• for easy versification of your JavaScript files.

Download Demo

Suppose your php-javascript file “my-phpjavascript.js.php” ,now you can add this file as below example.

Client HTML code

<html>
<head>
<script  type="text/javascript" src="my-phpjavascript.js.php"></script>
</head>
<body>
<script>
alert(site_name);
</script>
</body>
</html>

my-phpjavascript.js.php code

<?php 
// this is PHP variable
$sitename="My PHP development blog.";
?>
//this is javascript variable 
var site_name="<?php echo $sitename;?>";

some browsers don’t recognize this php file as javascript ,so to make all browser compatibility we have to send javascript headers to browser ,we can do that by adding a few line of code at starting of php script.

<?php
header( "Content-Type: text/javascript; charset=utf-8"  );
?>

Remember to preview this code you must installed PHP

Download Demo

Sites like Google Image search , goodphptutorials.com and phpcamp.net displays the website under the IFRAME .No one want their site to be displayed it under the IFRAME, FRAMES. If you want to protect your site to be displayed under the IFRAME,FRAMES then just copy and paste below javascript code after body tag.

1
2
3
4
5
6

if (window.top !== window.self) {
document.write = "";
window.top.location = window.self.location; setTimeout(function(){document.body.innerHTML='';},1);
window.self.onload=function(evt){
document.body.innerHTML='';};
}

Here we use simple logic that we check our page document window is main window or not. if our document isn’t in main window it might be in iframe or frame. then we switch the location of main window to our existing document locations. Before doing this redirection we make the document empty, because the imposter can break this code before loading .

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

Here we learn how to hide the javascript code from non javascript browsers , javascript disabled browsers and mobile browsers .Non javascript browsers renders the javascript code as generel text without exucuting the code. So we must aware how to hide the javascript from these browsers.

1
2
3
4
5

<script type="text/javascript">
<!--
alert("This alert box is hidden from non javascript browsers.!!");
//-->
</script>

Java is a high-level, third generation programming language, like C and many others.Java allows you to play online games, chat with people around the world, calculate your mortgage interest, and view images in 3D, just to name a few. It’s also integral to the intranet applications and other e-business solutions that are the foundation of corporate computing.
With some reasons the web browser don’t support Javas ,like user intentially disables,some browsers don’t support.Then we must check the whether user’s web browser has Java enabled.Here we discuss how to handle non Java browser.

We show normal warning message with javascript.

1
2
3
4
5
6
7

<script>
if (navigator.javaEnabled()){
alert('Java Enabled.');//we do our normal action
}else{
alert('Java Disabled.');//we warn the user to download or other 
}
</script>

We redirect the user to seperate UI or seperate sub domain that handles for non java browser.

1
2
3
4
5
6
7

<script>
if (navigator.javaEnabled()){
alert('Java Enabled.');//we do our normal action
}else{
document.location="nonjava-html-page.html";
}
</script>

JavaScript is a small, lightweight, object-oriented, cross-platform scripting language.JavaScript is used in millions of Web pages to add functionality, validate forms, detect browsers, and much more.With some reasons the web browser don’t support Javascript ,like user intentially disables,some mobile browsers version don’t support.Then it must we check the whether user’s web browser has Javascript enabled.Here we discuss how to handle non Javascript browser.

We show a alert ,warning message if user browser don’t hav Javascript enabled.using <noscript> HTML tag. just add bellow code to any where in the body section.<noscript> element will be rendered by those Javascript disabled browsers.

1

<noscript><font face=arial>JavaScript must be enabled in order for you to use maheshchari.com in standard view. However, it seems JavaScript is either disabled or not supported by your browser. To use standard view, enable JavaScript by changing your browser options, then <a href="">try again</a>. </font></noscript>

We show a alert ,warning message with Javascript itself if user browser doesn’t support <noscript> HTML tag.below example code demonstrates.

1
2
3
4
5

<div id="nojs"><font face=arial>JavaScript must be enabled in order for you to use maheshchari.com in standard view. However, it seems JavaScript is either disabled or not supported by your browser. To use standard view, enable JavaScript by changing your browser options, then <a href="">try again</a>.</font></div>
<script>
//if script enabled warning message hidden.
document.getElementById('nojs').style.display="none";
</script>

We create seperate UI or seperate web site for those Javascript disabled browsers. below example redirects the user automatically if Javascript disabled.

1
2
3
4
5
6
7
8

<html>
<head>
<noscript>
<meta http-equiv="refresh" content="0;URL=http://mobile.maheshchari.com" />
</noscript>
</head>
<body></body>
</html>