<script type="text/javascript">
<!--
var count = 0 // counter
var text1= "These examples shows how to create a simple typing effect."
+ " The text box below"
+ " Shows how many characters there are."

function type(){
isrunning=1 // 
document.typing1.t1.value= document.typing1.t1.value + text1.charAt(count) // add next character
document.typing1.t2.value=document.typing1.t1.value.length // get length of string
window.status= document.typing1.t1.value.length +" "+ document.typing1.t1.value // show in status bar

document.getElementById("display1").innerHTML=document.getElementById("display1").innerHTML 
+ text1.charAt(count) // table display
document.getElementById("display2").innerHTML=document.getElementById("display1").innerHTML.length // table display

count++ // increment counter by 1
timeID= setTimeout("type()",50) // speed

if(count==text1.length){ // stop running when all characters shown
clearTimeout(timeID)
count=-1 // reset counter
isrunning=0 // not running
}

}

isrunning=0 // not running
function restart1(){ // reset values on restart
if(isrunning==1){return} // if already running then return
document.typing1.t1.value=""

document.getElementById("display1").innerHTML=""
document.getElementById("display2").innerHTML=0

type()
isrunning=1 // is running
}

// include onload="type()" in the opening body tag

// -->
</script>

<table border="0" width="100%"><tr><td>

<form name="typing1">
<textarea name="t1" rows=6 cols=45 wrap=virtual"></textarea> 
<P>There are <input type="text" name="t2" size=4> letters in this message
<input type="button" value ="Restart" onclick="restart1()">
</form>

<p><script type="text/javascript">
<!--
document.write("There are "+text1.length+" letters in this message")
document.write("<br>The fifth letter is "+text1.charAt(count+4).toUpperCase())
document.write("<br>The tenth letter is "+text1.charAt(count+10).toUpperCase())
document.write("<br>The twentieth letter is "+text1.charAt(count+19).toUpperCase())
//-->
</script>

</td>
<td valign="top" width="250">

<table border="1"width=100%>
<tr valign=top>
<td height="70"><div id="display1"></div></td></tr>
<tr>
<td align="center">[ <span id="display2"></span> ]</b></td>
</tr></table>

</td>
</tr>
</table>

<script type="text/javascript">
<!--
// Realised by Apache Jeff
// www.huntingground.freeserve.co.uk

function init(){ // default message
opening_txt="\nMaximum number of characters allowed is 60.\nThe limit can be set within the script."
document.typing2.t1.value = opening_txt
document.typing2.t2.value=limit
}

limit=60 // character limit
function type2(){
chk_count=document.typing2.t1.value.length // how many characters
chk_count=limit-chk_count // remaining characters
document.typing2.t2.value=chk_count // display remaining characters

if(document.typing2.t1.value.length>limit){ // if limit reached
temp=document.typing2.t1.value.substring(0,limit) // get limit range
document.typing2.t1.value=temp // only show limit range
}

if(chk_count<=0){ // if count is zero
chk_count=0 // count = zero
document.typing2.t2.value=0 // display zero
}

if(document.typing2.t1.value.length==0){ // if no text is shown
document.typing2.t2.value=limit // display limit number
}
}
document.onkeyup=type2 // run function

clear_txt=0
function chk_txt(){ // clear comment textbox on first focus only
if(clear_txt==1){return}
clear_txt=1
document.typing2.t1.value = ""
document.typing2.t2.value=limit
}

// add  onload="init()" to the opening body tag

// -->
</script>

<form name="typing2">
<textarea wrap=virtual name="t1"  rows=6 cols=45  onfocus="chk_txt()"></textarea><br>
<img src="images/spacer.gif" border=0 height=3 width=0><br>
<INPUT TYPE=text name="t2" value="0" size="3" readonly> characters left    
<input type="button" value="Clear" onClick="init();document.typing2.t2.value=limit;clear_txt=0">
</form>