Download falling text script

Put this into your <HEAD> section

<style type="text/css">

/* START CSS ONLY NEDED FOR DEMO */
body{
	margin:0px;
	width:100%;
	text-align:center;
	background-color:#E2EBED;
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}

#mainContainer{

	width:760px;
	text-align:left;
	margin:0 auto;
	margin-top:10px;
	background-color:#FFF;
	border:1px solid #000;


}

#leftMenu{
	width:155px;
	float:left;
	height:400px;
	padding-left:5px;

}

#mainColumn{
	width:590px;
	padding-left:5px;
	padding-right:5px;
	float:left;
	
}
.clear{
	clear:both;
}
#footer{
	
	background-color:#FFF;
	
}
/* END CSS ONLY NEEDED FOR THE DEMO */

/* START LAYOUT FOR FALLING TEXT */

#dhtmlgoodies_fallingLinks a,.dhtmlgoodies_fallingLinks a{	/* Syntax for falling links - The id is used for your HTML, the class is used for the dynamically created elements */
	color:blue;
	padding:2px;
	visibility:hidden;
	font-weight:bold;
	text-decoration:none;
}
#dhtmlgoodies_fallingLinks a:hover{
	color:red;
}
/* END LAYOUT FOR FALLING TEXT */
</style>
<script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, December 2005

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	

Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.

Thank you!

www.dhtmlgoodies.com
Alf Magne Kalleland

************************************************************************************************************/
	
var fallFromYPosition = -30;	// 0 = top, other numbers represents pixels from top
var slidePixelPerMove = 15;	// Higher = faster
var slideTimeoutBetweenMoves = 5; 	// Milliseconds
var slideInReverseOrder = false;	// Start with last item?

/* Don't change anything below here */

var dhtmlgoodies_fallingLinks;
var fallingItems = new Array();
var absolutePositionedItems = new Array();
var currentFallingObject = false;

function getTopPos(inputObj)
{		
  var returnValue = inputObj.offsetTop;
  while((inputObj = inputObj.offsetParent) != null){
  	returnValue += inputObj.offsetTop;
  }
  return returnValue;
}

function getLeftPos(inputObj)
{
  var returnValue = inputObj.offsetLeft;
  while((inputObj = inputObj.offsetParent) != null){
  	returnValue += inputObj.offsetLeft;
  }
  return returnValue;
}
	

function slideDownLinks(linkIndex)
{
	var topPos = currentFallingObject.style.top.replace('px','')/1;
	topPos = topPos + slidePixelPerMove;
	var slideEnded = false;

	if(topPos>=fallingItems[linkIndex]['top']){
		topPos = fallingItems[linkIndex]['top'];
		slideEnded = true;
	}
	
	currentFallingObject.style.top = topPos + 'px';
	
	if(!slideEnded){
		setTimeout('slideDownLinks(' + linkIndex + ')',slideTimeoutBetweenMoves);
		return;
	}else{
		currentFallingObject.style.display='none';
		fallingItems[linkIndex]['obj'].style.visibility = 'visible';
		
		if(linkIndex<fallingItems.length-1 && !slideInReverseOrder){
			linkIndex = linkIndex + 1;
			currentFallingObject = absolutePositionedItems[linkIndex];
			currentFallingObject.style.display='block';
			slideDownLinks(linkIndex);
			return;
		}
		
		if(linkIndex>0 && slideInReverseOrder){
			linkIndex = linkIndex - 1;
			currentFallingObject = absolutePositionedItems[linkIndex];
			currentFallingObject.style.display='block';
			slideDownLinks(linkIndex);
		}
	}
	
}


function initFallingLinks()
{
	dhtmlgoodies_fallingLinks = document.getElementById('dhtmlgoodies_fallingLinks');
	var subs = dhtmlgoodies_fallingLinks.getElementsByTagName('*');
	for(var no=0;no<subs.length;no++){
		
		var thisIndex = fallingItems.length;
		fallingItems[thisIndex] = new Array();
		fallingItems[thisIndex]['obj'] = subs[no];	
		fallingItems[thisIndex]['left'] = getLeftPos(subs[no]);	
		fallingItems[thisIndex]['top'] = getTopPos(subs[no]);	
		
		
		
		absolutePositionedItems[thisIndex] = document.createElement('DIV');
		absolutePositionedItems[thisIndex].style.display='none';
		absolutePositionedItems[thisIndex].style.position='absolute';
		absolutePositionedItems[thisIndex].style.left=fallingItems[thisIndex]['left'] + 'px';
		absolutePositionedItems[thisIndex].style.top= fallFromYPosition + 'px';
		absolutePositionedItems[thisIndex].className = 'dhtmlgoodies_fallingLinks';
		
		document.body.appendChild(absolutePositionedItems[thisIndex]);
		
		var innerItem = document.createElement(subs[no].tagName);
		innerItem.innerHTML = subs[no].innerHTML;	
		absolutePositionedItems[thisIndex].appendChild(innerItem);	
		
		innerItem.style.visibility = 'visible';		
	}
	
	if(absolutePositionedItems.length>0){
		if(slideInReverseOrder)startIndex = absolutePositionedItems.length-1; else startIndex = 0;
		currentFallingObject = absolutePositionedItems[startIndex];
		currentFallingObject.style.display='block';
		slideDownLinks(startIndex);
	}
}

window.onload = initFallingLinks;
</script>

Put this into your <BODY> section

<div id="mainContainer">
	<div id="header">
		<img src="/images/heading3.gif">
	</div>
	<div id="leftMenu">
		This is the left column	
	</div>
	<div id="mainColumn">
	This is a script where links falls from the top of the page and to the place where you have placed them in your HTML code. 
	</div>
	<div class="clear"></div>
	<div id="footer">
		<!-- START OF FALLING LINKS -->
		<div id="dhtmlgoodies_fallingLinks">
			<a href="#">This</a> | 
			<a href="#">Is</a> | 
			<a href="#">An</a> | 
			<a href="#">Example</a> | 
			<a href="#">Of</a> | 
			<a href="#">Falling</a> | 
			<a href="#">Links</a> | 
		</div>	
		<!-- END OF FALLING LINKS -->
	</div>
</div>

Configuration

Create falling text items

The falling text items are typically links. These items are created by use of plain HTML. This is how they are created in the demo:

<div id="dhtmlgoodies_fallingLinks"> is the parent element. It's important that you have an element like this with the ID dhtmlgoodies_fallingLinks. It doesn't nescessary have to be a DIV.

Layout

CSS is used to add layout to the falling items. Example:

#dhtmlgoodies_fallingLinks a,.dhtmlgoodies_fallingLinks a{
  color:blue;
  padding:2px;
  visibility:hidden;
  font-weight:bold;
  text-decoration:none;
}
#dhtmlgoodies_fallingLinks a:hover{
  color:red;
}

Note! You don't have to use links(<A> tags) in this script. You can for example use <SPAN> tags. If you do, remember to change it in both your HTML and CSS.

Javascript variables

There are 3 variables you can use to customize the script:

var fallFromYPosition = -30;
var slidePixelPerMove = 15;
var slideTimeoutBetweenMoves = 5;
var slideInReverseOrder = false;

fallFromYPosition = Horizontal position where the items should slide from. -30 which is default means that the links will slide from browsers top edge.
slidePixelPerMove = Slide speed. Higher value = faster.
slideTimeoutBetweenMoves = Slide speed. Lower value = faster
slideInReverseOrder = Slide in reverse order? i.e. start with last item