|
|
|
 |
|
|
|
|
| |
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> | |
|
|
| Fancy Quick Access Navigation Link
Categories : Java Script, Navigation, User Interface, DHTML, Beginner Guides | | | 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 | | | 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 | | | A ball is attached to your mouse cursor with an elastic cord!
Categories : Java Script, DHTML, Graphics | | | Table editable dynamic form with edit + selection (select / option) + checkbox.
Categories : Java Script, DHTML, User Interface, CSS, HTML | | | Unobtrusive javascript for maintaining scrollable layer state
Categories : DHTML, Java Script, HTML | | | Simple Dhtml tree using DOM
Categories : DHTML, Java Script | | | Form validations using javascript and including all validations in one message
Categories : HTML and PHP, Java Script, Form Processing | | | How to get the Focus (Cursor) into a Form-Element.
Categories : HTML, Java Script | | | Ajax - Perform a simple server side request and update the current HTML page.
Categories : AJAX, Java Script, Beginner Guides | | | eplanning
Categories : DHTML, Site Planning, Calendar, Complete Programs, Utilities | | | Hover 98 - a simple PHP-script to generate OnMouseOver-JavaScript-Code the easy way.
Categories : Complete Programs, Java Script | | | PHP and javascript mouseover, mouseout, and mousedown events
Categories : PHP, Java Script, Form Processing, Beginner Guides | | | JavaScript IP validation; IP validation script;
Categories : Java Script, Algorithms | |
| |
| |
|
