Text Reader 2

Each message is contained in an array and is split up into as many indexes as required.
The following example array has 4 indexes

message1=new Array("This is some example text to show how a message can be split.","This is some example text","to show how a message","can be split.")

To set another message simply create another array and call it messageNUM where NUM is the next ordinal number, in this case message2.

Once a word has faded in there is a pause denoted by variable wordPause.
When all the words in an index have been shown there is a pause, denoted by variable linePause, before the next index of text is shown.
When the message is complete there is a pause, denoted by variable messagePause, before the next message begins.

If a break tag is used in the message a space must be included immediately after it unless it is used at the end of the index

Because the script works by splitting the message at every space you are limited to using tags such as  , , , and  in your message because these do not require that you leave a space, you cannot use something like text or text because there is a space between the words font and color and div and style.

<HTML>

<HEAD>
<TITLE>Text Reader 2</TITLE>

<script type="text/javascript">
// Coded by Jeff
// www.huntingground.freeserve.co.uk

message1=new Array("This is some example text to show the effect produced depending on how the message is split. ","This is some example text","to show the effect produced","depending on how the message is split. ","This is some example text to show the effect produced depending on how the message is split. ","This is some example text ","to show the effect produced ","depending on how the message is split. ")

message2=new Array("Although limited with regards to formating the text, at this time, you can adjust the following 1) Rate the word fades in 2) Time between each word (wordPause) 3) Time between each line (linePause) 4) Time between each message (messagePause)")

opacStep = 4 // user definable
wordPause = 1 // user definable
linePause=3000 // user definable
messagePause = 5000 // user definable

count=0 
strNum=1
running=0
strCount=0
opacValue=0
strTimer=null
opacSpeed=10
fadeTimer=null
wordTimer=null

n=1
while(window["message"+n]!=null){
n++
}
strLimit = n-1

function startReader(){
if(running==1){return}
running=1

if(document.getElementById("display").innerHTML.length>window["message"+strNum].length){
document.getElementById("display").innerHTML=" "
}

getStr()

}

function getStr(){
tempArray=window["message"+strNum][strCount].split(" ")
nextWord()
}

function nextWord(){
tempEl=document.createElement("span")
tempEl.setAttribute("id","tempSpan")
tempEl.innerHTML=tempArray[count]
document.getElementById("display").appendChild(tempEl)

if("filters" in document.body && "alpha" in document.body.filters){
document.getElementById("tempSpan").filters.alpha.Opacity=0
}
else{
document.getElementById("tempSpan").style.MozOpacity=0
}

fade()

}

function fade(){

if("filters" in document.body&&"alpha" in document.body.filters){
document.getElementById("tempSpan").filters.alpha.Opacity=opacValue
}
else{
document.getElementById("tempSpan").style.MozOpacity=(opacValue/100)-0.01
}

opacValue+=opacStep

fadeTimer=setTimeout("fade()",opacSpeed)

if(opacValue>=100){
document.getElementById("display").removeChild(tempEl)
document.getElementById("display").innerHTML+=tempArray[count]+" "
clearTimeout(fadeTimer)
opacValue=0

if(running==1){
wordTimer = setTimeout("nextWord()",wordPause)
}

count++
if(count==tempArray.length){
clearTimeout(wordTimer)
count=0
strCount++

if(strCount<window["message"+strNum].length){
setTimeout("getStr()",linePause)
}

if(strCount==window["message"+strNum].length){
strCount=0
strTimer=setTimeout("document.getElementById(\"display\").innerHTML=\" \" ; getStr()",messagePause)

strNum++
if(strNum>strLimit){
strNum=1
}

}

}

}

}

// include  onload="startReader()" in the opening BODY tag

</script>

<style>
#tempSpan{
position:absolute;
filter:alpha(opacity=0);
opacity:0.1;
color:teal;
/*
font-size:25px;
*/
}

html>body #tempSpan{
position:static;
}

</style>

</HEAD>
<BODY onload="startReader()">
<h1>Text Reader 2</h1>

<div id="display" style="width:580px;height:220px;border:1px solid black"> </div>

</BODY>
</HTML>

Text Reader 2

Basic Setup