|
|
|
|
|
|
| |
A javascript example for fading in a messages. This script can be used for announcements and recent news.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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> | |
|
|
| KuPro1.0 - This application is for Libraries, To see their books and to maintain users books. This version is in Turkish, future vers may have English Support.
Categories : PHP, Java Script, DHTML | | | Menu in sliding bar or tree style. Handles frames by using small amount of javascript. Handles external and internal pages. Allows custom code to replace a menu item.
Categories : PHP Classes, PHP, Java Script, DHTML | | | Javascript animated menu items
Categories : DHTML, CSS, Java Script, HTML | | | Fancy "Quick Access" Navigation Link
Categories : Java Script, Navigation, User Interface, DHTML, HTML | | | A ball is attached to your mouse cursor with an elastic cord!
Categories : Java Script, DHTML, Graphics | | | Simple Dhtml tree using DOM
Categories : DHTML, Java Script | | | Unobtrusive javascript for maintaining scrollable layer state
Categories : DHTML, Java Script, HTML | | | Zephyr: AJAX Based Framework for PHP5 Developers
Categories : PHP, AJAX, Frameworks, Java Script, Web Applications | | | javascript doesn't accept a fieldname with []
Categories : Java Script | | | Array values from javascript to php
Categories : PHP, Java Script, Arrays | | | Create HTML forms dynamicly using Javascript & PHP
Categories : PHP, PHP Classes, Java Script | | | Linked comboboxes with php-mysql & javascript
Categories : PHP, Java Script, Databases, MySQL | | | The toll booth
Categories : PHP, Java Script, Filesystem | | | MD5 secured login
Categories : PHP, Java Script, Authentication, Security | | | Flash Detection Script with loads of features
Categories : Java Script, Flash | |
|
|
|
