Her

Home Web Programming JavaScript Typed Scrolling Text

Typed Scrolling Text

Author: bengaliboy00 Author's URL: www.webdesignhelper.co.uk More by this author

 
 
 
 
Click to start the script.

Put this code into your page:

<html>
<head>

<style>
.scroll
{
FONT: 10pt arial;
COLOR: black;
background-color: white;
border: medium none
}
</style>

</head>

<BODY BGCOLOR="#ffffff" LEFTMARGIN="0" RIGHTMARGIN="0" TOPMARGIN="0" onload="animate();">

<br><br><br>
<center>
<form name="bannerform">
<TABLE width="150" border="0" cellpadding="0" cellspacing="0" bgcolor=#F5F4E0>
<tr>
<td colspan=3><img src=images/spacer.gif height=10></td>
</tr>
<tr>
<td><img src=images/spacer.gif width=10></td>
<td><input type="text" name="banner" size="35" class=scroll onfocus="blur()"></td>
<td><img src=images/spacer.gif width=10></td>
</tr>
<tr>
<td colspan=3><img src=images/spacer.gif height=10></td>
</tr>
</table>
</form>
</center>

</body>

<script language="JavaScript1.2">
<!--

//Secify scroller contents
var line=new Array()
line[1]="This is a great bit of script"
line[2]="You enter the text you want..."
line[3]="Its then typed one letter at a time"
line[4]="You can easily add and subtract lines"
line[5]="It's very simple and easy to use"

lines=line.length-1 //--Number of lines

temp=""
nextchar=-1;
nextline=1;
cursor="_"

function animate()
{
if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines)
{
nextline++;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){
nextline=1;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else{
nextstep()
}
}

function nextstep()
{
nextchar++;
temp+=line[nextline].charAt(nextchar);
document.bannerform.banner.value=temp+cursor
setTimeout("animate()",25)
}

// -->
</script>
</html>