Text Reader 1

Lines of text are faded in one word at a time.
The pause rate between each word and each line of text can be adjusted for each display.

View Phrase 1

 
View Phrase 2

Mulitple displays can be put in the same page but only one can be run at a time.

There are 4 parts to creating a display

In the script

  1. var phraseNUM=new phraseReader('displayNUM',1,100) // displayID ,wordSpeed, lineSpeed
    This creates a new display, wordSpeed is the pause time between each word and lineSpeed is the pause time between each line, both of these are in milliseconds.

  2. phraseNUMStr=new Array("One fine day in the middle of the night<br>","Two dead men got up for a fight<br>","Back to back they faced each other<br>","Drew their swords and shot each other.")
    This is where the display text is put.

In the document body

  1. <div id="d1"><span onclick="phraseNUM.startReader(NUM)">View Phrase 1</span></div>
    This is for the Stop, Restart, and Replay controls

  2. <div id="displayNUM">&nbsp;</div>
    This is where the display is shown.

NUM relates to the display number, so for the first display this would be 1 and for a second display this would be 2 etc.

The style rule #tempSpan references the word being faded in, this is where you can change the colour of the word while it is fading in.
For an additional effect include a font size of 25px.

You can aslo adjust the fade rate and speed by changing the values of variables
var opacStep=4
var opacSpeed=10

While I would suggest leaving the opacSpeed at 10 you could change opacStep to anything between 1, for maximum fade, and 100 for no fade. 

<HTML>

<HEAD>
<TITLE>Phrase reader</TITLE>

<script type="text/javascript">
// Coded by Jeff
// www.huntingground.freeserve.co.uk
 
var phrase1=new phraseReader('display1',1,1000) // displayID ,wordSpeed in milliseconds, lineSpeed in milliseconds
phrase1Str=new Array("One fine day in the middle of the night<br>","Two dead men got up for a fight<br>","Back to back they faced each other<br>","Drew their swords and shot each other.") 
var phrase2=new phraseReader('display2',500,1000)
phrase2Str=new Array("Yesterday I am going to the pictures<br>","I sat at the front at the back<br>","A woman she gave me some chocolates<br>","I ate them and gave her them back.") 
running=0

function phraseReader(num,wordSpeed,lineSpeed){

var opacStep=4 // user definable
var opacSpeed=10 // user definable

var count=0 
var strCount=0
var opacValue=0
var fadeTimer=null
var wordTimer=null
var phraseTimer=null

this.startReader=function(num){
if(running==1){return}
running=1

document.getElementById("d"+num).innerHTML="<span class=\"stop\" onclick=\"phrase"+num
+".stopReader("+num+")\">Stop</span>"

if(document.getElementById("display"+num).innerHTML.length>window["phrase"+num+"Str"].length){
document.getElementById("display"+num).innerHTML=" "
}

this.nextWord(num)

}

this.nextWord=function(num){
tempArray=window["phrase"+num+"Str"][strCount].split(" ")
tempEl=document.createElement("span")
tempEl.setAttribute("id","tempSpan")
tempEl.innerHTML=tempArray[count]
document.getElementById("display"+num).appendChild(tempEl)

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

setTimeout("phrase"+num+".fade('"+num+"')",1)

}

this.fade=function(num){

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

opacValue+=opacStep

fadeTimer=setTimeout("phrase"+num+".fade('"+num+"')",opacSpeed)

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

if(running==1){
wordTimer = setTimeout("phrase"+num+".nextWord('"+num+"')",wordSpeed)
}

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

if(strCount<window["phrase"+num+"Str"].length){
phraseTimer=setTimeout("phrase"+num+".nextWord('"+num+"')",lineSpeed)
}

if(strCount==window["phrase"+num+"Str"].length){
running=0
strCount=0
document.getElementById("d"+num).innerHTML="<span class=\"replay\" onclick=\"phrase"+num
+".replayPhrase("+num+")\">Replay</span>"
}

}

}

}

this.stopReader = function(num){
if(running==0){return}
clearTimeout(wordTimer)
clearTimeout(phraseTimer)
running=0
document.getElementById("d"+num).innerHTML="<span class=\"restart\" onclick=\"phrase"+num
+".restartReader("+num+")\">Restart</span> || <span class=\"replay\" onclick=\"phrase"+num
+".replayPhrase("+num+")\">Replay</span>"
}

this.restartReader=function(num){
if(running==1){return}
running=1
document.getElementById("d"+num).innerHTML="<span class=\"stop\" onclick=\"phrase"+num
+".stopReader("+num+")\">Stop</span>"
this.nextWord(num)
}

this.replayPhrase=function(num){
if(running==1){return}
clearTimeout(wordTimer)
count=0
strCount=0
document.getElementById("display"+num).innerHTML=" "
timer = setTimeout("phrase"+num+".startReader('"+num+"')",wordSpeed)
}

}

</script>

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

html>body #tempSpan{
position:static;
}

#d1,#d2,#d3{
cursor:hand;
cursor:pointer;
font-weight:bold;
}

.stop{
color:#AA0000;
}

.restart{
color:00AA00;
}

.replay{
color:0000AA;
}
</style>

</HEAD> 
<BODY>

<P>
<div id="d1"><span onclick="phrase1.startReader(1)">View Phrase 1</span></div><BR>
<div id="display1" style="height:100px"> </div>

<div id="d2"><span onclick="phrase2.startReader(2)">View Phrase 2</span></div><BR>
<div id="display2" style="height:100px"></div>

</BODY>
</HTML>