24

Mar

Serve your PHP file as JavaScript file

Posted by mahesh chari  Published in PHP/mysql, javascript

Serve Your PHP script as JavaScript file.

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

Popularity: 2% [?]

More
1 comment

31

Jan

prevent iframe ,frame theft

Posted by mahesh chari  Published in javascript

How to stop iframe, frame thefts of our site resources.

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 .

Popularity: 7% [?]

More
no comment

9

Jan

jQuery ajaxstart ajaxstop

Posted by mahesh chari  Published in javascript, jquery

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

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

Popularity: 13% [?]

More
no comment

25

Aug

hide javascript code from non javascript browser

Posted by mahesh chari  Published in Html, javascript

hide JavaScript code from non-JavaScript browsers

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>

Popularity: 24% [?]

Tags:

More
no comment

28

Jul

check browser java enabled

Posted by mahesh chari  Published in javascript

Check Browser Java application enabled

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>

Popularity: 26% [?]

Tags:

More
3 comments

20

Jul

check javascript disabled

Posted by mahesh chari  Published in Html, javascript

Check Browser Javascript enabled

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>

 

Popularity: 35% [?]

Tags:

More
2 comments

19

Jul

check cookie enabled javascript php

Posted by mahesh chari  Published in PHP/mysql, javascript

How to check browser cookie enabled with php javascript

Cookies are typically used by web servers to perform functions such as tracking your visits to websites, enabling you to log in to sites, and storing your shopping cart. Cookies can be used to interaction between Javascript and Server Side  Scripts like PHP.Cookies also used to transfer small amount of data between one page to other pages via HTTP headers .If user disables this cookies or user’s browser won’t support the interaction between JS and PHP fails.So we must ensure user must enable these Cookies.

In this article,we check the user’s browser Cookie enabled or not.This can be achieved by both client side Javascript and Server Side Script.

Checking with Javascript

1
2
3

if (navigator.cookieEnabled == 0) {
  alert("You need to enable cookies for this site to load properly!");
}

Checking with PHP

If user disables Javascript we fail to check the Cookie enabled or not.So we check on the server side also.below PHP snippet check the Cookie enabled or not.

1
2
3
4
5
6
7
8
9
10

function check_cookie(){
	if (setcookie("test", "test", time() + 360))
	{
		if (isset (@$_COOKIE['test']))
		{
			return true;
		}
	}
return false;
}

Popularity: 29% [?]

Tags:

More
no comment

9

Jul

jquery ajax error handling

Posted by mahesh chari  Published in javascript, jquery

How to handle ajax errors using jQuery ?

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.

Popularity: 75% [?]

Tags:

More
7 comments

26

Jun

javascript bookmark

Posted by mahesh chari  Published in javascript

javascript add bookmark or add favorite function tutorial

A simple cross-browser bookmarking / add to favorites script that works in IE6+ ,FF2+,Opera 7+.Adding the "bookmark this page" javascript below will help to encourage your site return visits. To add this link just copy paste a small script at your link position.it will add only supported browsers.

Download source code

bookmark

javascript code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<script >
function bookmark() {
title =document.title; 
url = document.location.href;
if (window.sidebar) { //firefox bookmark functionality
window.sidebar.addPanel(title, url,"");
} else if( window.external ) { //ie favorite functionality
window.external.AddFavorite( url, title); 
}else if(window.opera){//opera virtual sidebar link
a = document.createElement("A");
a.rel = "sidebar";
a.target = "_search";
a.title = title;
a.href = url;
a.click();
}
}
 
function bookmarklink(){
if (window.sidebar || window.external || window.opera) { //we build link for only supported browsers
document.write('<a href = "javascript:bookmark()");">Add to Favorites</a>'); 
} 
}
</script>

html code 

1
2
3
4
5
6
7
8
9
10

<html>
<head>
<title>javascript bookmarking for firefox/IE/Safari</title>
</head>
<body>
<script >
bookmarklink();
</script>
</body>
</html>

Download source code

bookmark

Popularity: 9% [?]

More
no comment

23

Jun

javascript image rollover

Posted by mahesh chari  Published in Html, javascript

image rollover effect with javascript image object

  • we create a image object with new Image();
  • set a source attribute to test1.jpg.
  • create onmouseover even function ,then set image object src to test2.jpg
  • create onmouseout event function,then set image object src to test1.jpg
  • to test click even we can see a small alert box.

Download Sorce Code

image-rollover-javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<html>
<head>
<title>Image Roll over</title>
</head>
<body>
<div id="imagerolover"></div>
<script>
var myimage=new Image(); //create a image object
myimage.src="test1.jpg";//initially set test1.jpg as src attribute
//onmouseover set test2.jpg as src
myimage.onmouseover=function(){
this.src="test2.jpg";
}
//on mouseout set test1.jpg src again
myimage.onmouseout=function(){
this.src="test1.jpg";
}
//create click event 
myimage.onclick=function(){
alert('U clicked me');
}
//get imagerolover div element by id and append the image
document.getElementById('imagerolover').appendChild(myimage);
</script>
</body>
</html>

Download Sorce Code

image-rollover-javascript

Popularity: 9% [?]

Tags:

More
no comment
Page 1 of 212