« Find the square root of a number with any precision | Home | Write to the alert log from PL/SQL code »
Fading alerts in JavaScript
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Fade In Text</title>
<style type="text/css">
body, table, div{color:#333;font:bold 11px Verdana, Arial, sans-serif;}
.title{background:#F2F2F2;border:1px #CCC solid;padding:5px;text-align:center;}
.tblFade{border:1px #333 solid;width:150px;margin:175px;}
.fadeElem{height:20px;display:block;position:relative;border:1px #CCC solid;padding:3px 10px;}
</style>
<script type="text/javascript">
<!--
var fadeSteps = 20;
var fadeDelay = 20;
var nextSetDelay = 1000;
var loopPrepend = true;
var arMessage = new Array("Fade-In Message 1", "Fade-In Message 2", "Fade-In Message 3", "Fade-In Message 4", "Fade-In Message 5", "Fade-In Message 6", "Fade-In Message 7");
var elIdx = 0, msgIdx = 0, fadeStep = 0;
var fadeElem;
var msgLen = arMessage.length;
function fadeMsg(){
if(elIdx == 5 || (!loopPrepend && (msgIdx == msgLen))){
if(elIdx != 5)msgIdx = 0;
elIdx = 0;
setTimeout('fadeMsg()', nextSetDelay);
}else{
if(msgIdx == msgLen)msgIdx = 0;
if(elIdx == 0){
for(var i=0;i<5;i++){setOpacity(document.getElementById('fadeElem'+i), 0);}
}
fadeStep = 20;
fadeElem = document.getElementById('fadeElem' + elIdx);
fadeElem.innerHTML = arMessage[msgIdx];
fadeStep = 0;
elIdx++;
msgIdx++;
fadeIn();
}
}
function fadeIn() {
if(fadeStep > fadeSteps){
fadeMsg();
return;
}
setOpacity(fadeElem, (fadeStep/fadeSteps));
fadeStep++;
window.setTimeout("fadeIn()", fadeDelay);
}
function setOpacity( el, opacity){
if(el.style.opacity != undefined){
el.style.opacity = opacity;
}else if( el.style.MozOpacity != undefined){
el.style.MozOpacity = opacity;
}else if ( el.style.filter != undefined){
el.style.filter="alpha(opacity=" + Math.round(opacity * 100) + ")";
}
}
//-->
</script>
</head>
<body onload="fadeMsg()">
<center><table class="tblFade" cellspacing="0" cellpadding="0">
<tr><td class="title">Title</td></tr>
<tr><td>
<div class="fadeElem" id='fadeElem0'></div>
<div class="fadeElem" id='fadeElem1'></div>
<div class="fadeElem" id='fadeElem2'></div>
<div class="fadeElem" id='fadeElem3'></div>
<div class="fadeElem" id='fadeElem4'></div>
</td></tr>
</table></center>
</body>
</html>
Topics: ajax, html, javascript | Submitter: admin
Comments
You must be logged in to post a comment.