Fade out ajax response status message


Successfully received the response from the server, It would be better if you can show that status to end-user. Used the property opacity for fading out the color., Depends on browser the opacity property is different.

Firefox browser supports property opacity:x – value x range from 0.0 to 1.0 (lower value makes more transparent).

IE browser uses filter: alpha(opacity=x) – value x range from 0 to 100.

The logic for fading out is set the time interval for periodically reduce the value of opacity property , so that the color gets transparent then it looks like a fading out.
Javascript functions setInterval & clearInterval are used for setting and clearing the time intervals respectively. Lets see the below example.

Example

fadeout.jsp

<html>
<body>
<script src=”fadeout.js” language=”javascript”></script>
<!– div to show the status message of ajax response –>
<div id=”statusmsg”  style=”background-color:green;opacity:.30;filter: alpha(opacity=30);”></div>
<a href=”#” onclick=”javascript:sendAjaxRequest(‘/storedb.do?prodid=1200&productname=ajax’, ‘statusmsg’);”>click to save</a>
</body>
</html>

fadeout.js

function processResponse(req, divid)
{
if (req.readyState == 4) {
if (req.status == 200) {
document.getElementById(divid).innerHTML=”Data Saved Successfully”;
setTimeout(“FadeOut(‘”+divid +”‘)”,5000); // added code for showing status message after 5 seconds.
}
}
}

/*
function for finding browser name. Because IE browser rendering a page differently. So this method will be useful for finding & writing browser specific javascript code
*/

function isIEBrowser()
{
var browsername = navigator.appName;
if( browsername == “Microsoft Internet Explorer” )
{
return true;
}
return false;
}

/*
method for calling fadeout
set the time interval for reducing the opacity value periodically.
*/
var intervalid;
function FadeOut(divid)
{
if(isIEBrowser()){
intervalid = setInterval(“decreaseOpacityForIE(‘”+divid+”‘)”,100);
}else{
intervalid = setInterval(“decreaseFading(‘”+divid+”‘)”,100);
}
}

// for IE Browser only
function decreaseOpacityForIE(divid)
{
var divobj = document.getElementById(divid);
if(divobj ){
divobj .filters.alpha.opacity=parseFloat(divobj .filters.alpha.opacity)-2;
if (divobj .filters.alpha.opacity <= 0 ){
clearInterval(intervalid);
}
}
}

// for other browsers – Firefox/Netscape
function decreaseOpacity(divid)
{
var divobj = document.getElementById(divid);
if(divobj ){
divobj.style.MozOpacity=parseFloat(divobj.style.MozOpacity)-0.02;
if (divobj.style.MozOpacity <= 0){
clearInterval(intervalid);
}
}
}

setTimeout(javascript stmt, milliseconds) –  execute that javascript statement after specified milliseconds intervals.

If you are new to Ajax see the below links to learn basics.

Ajax Basics – https://manikandanmv.wordpress.com/2008/09/23/ajax-asynchronous-javascript-and-xml/
Ajax GET request – https://manikandanmv.wordpress.com/2008/09/29/ajax-example/

Advertisements

Tags: , , , , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: