PDA

View Full Version : 'Dropping' text in


snapper
09-25-2005, 03:43 PM
I have searched loads of sites but can't find the java (I assume) for a text effect I have seen (yes I know, I should have remembered the site!). The effect is essentially a list of items which all 'scroll' in from the bottom of a frame, one after the other, to a fixed position in the top right hand of the frame (and then stop, i.e don't need a scrolling menu). Any ideas?

birdbrain
09-25-2005, 04:46 PM
Hi snapper,

try this simple example...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>XHTML 1.0 Transitional</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="Content-Script-Type" content="text/javascript"/>
<meta name="Content-Style-Type" content="text/css"/>
<style type="text/css">
/*<![CDATA[*/
body {
color:#000;
background-color:#eef;
}
#container {
position:absolute;
top:10px;
left:10px;
width:200px;
height:212px;
border:3px double #000;
background-color:#fff;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
color:#000;
overflow:hidden;
}
#contents {
top:216px;
left:0px;
width:200px;
height:212px;
color:#000;
background-color:#fff;
}
#contents ul {
margin-top:0px;
color:#000;
background-color:#fff;
}
#contents a:link,#contents a:visited{
color:#000;
background-color:#fff;
}
#contents a:hover {
color:#f00;
background-color:#fff;
}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
var i=216;
var speed=20;
function scrollText() {
document.getElementById('contents').style.position='absolute';
document.getElementById('contents').style.top=i+'px';
if(i>=20) {
i--;
setTimeout('scrollText()',speed);
}
}
//]]>
</script>

</head>
<body onload="scrollText()">

<div id="container">
<div id="contents">
<ul>
<li><a href="#">item one</a></li>
<li><a href="#">item two</a></li>
<li><a href="#">item three</a></li>
<li><a href="#">item four</a></li>
<li><a href="#">item five</a></li>
<li><a href="#">item six</a></li>
<li><a href="#">item seven</a></li>
<li><a href="#">item eight</a></li>
<li><a href="#">item nine</a></li>
<li><a href="#">item ten</a></li>
</ul>

</div>
</div>

</body>
</html>

snapper
09-26-2005, 09:13 AM
Thanks - just what I was after!

birdbrain
09-26-2005, 09:39 AM
You're welcome. :)