...

View Full Version : Array - Add Delay between Elements



DavidBer
06-02-2005, 11:19 PM
Hello,

I wonder if you can help me with the following question.

I am trying to display 1 phrase at a time so that a long paragraph would be easier to read. I need to insert a short delay between each element of the following array so that each phrase appears on the screen a few seconds apart from the one that came before.

For example,


Fourscore and seven years ago <--- appears first
our fathers brought forth <--- should appear 3 seconds later after the first phrase


<script type="text/javascript">
var phrase = new Array("Fourscore and seven years ago,","our fathers brought forth","on this continent","a new nation"," conceived in liberty", "and dedicated to the proposition")

for (i=0;i<phrase.length; i++)
{
(document.write(phrase[i] + " "))
}


</script>



Thank you.



David

Mr J
06-02-2005, 11:37 PM
Please try the following


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
var phrase = new Array("Fourscore and seven years ago,","our fathers brought forth","on this continent","a new nation"," conceived in liberty", "and dedicated to the proposition")

count=0
timer=""
function next_phrase(){

document.getElementById("display").innerHTML+=phrase[count] + " "

count++
timer=setTimeout("next_phrase()",3000)

if(count==phrase.length){
clearTimeout(timer)
}
}


</script>

</HEAD>
<BODY onload="next_phrase()">

<div id="display">&nbsp;</div>

</BODY>
</HTML>

Willy Duitt
06-02-2005, 11:39 PM
Your question has also been answered here: http://www.webdeveloper.com/forum/showthread.php?t=68190

DavidBer
06-02-2005, 11:49 PM
The code that Mr. J. responded with does exactly what I was asking for.

Thank you for responding so quickly.

DavidBer
06-03-2005, 04:40 PM
Hi,

I thought you'd be interested. Ultimater on Webdeveloper.com added a replay button to the code's functionality making the routine even more useful:

<script type="text/javascript">
var phrase = new Array("Fourscore and seven years ago,","our fathers brought forth","on this continent","a new nation"," conceived in liberty", "and dedicated to the proposition")
var timerId=null
var myPhrase=0
function nextPhrase(){
clearTimeout(timerId)
document.getElementById("displayer").innerHTML+=phrase[myPhrase]+" "
myPhrase++;if(myPhrase>=phrase.length){;timerId=setTimeout("clearIt()",3000);return false}
timerId=setTimeout("nextPhrase()",3000)
}
function rePlay(){
document.getElementById("displayer").innerHTML=""
timerId=null
myPhrase=0
nextPhrase()
return true
}
function clearIt(){
clearTimeout(timerId)
document.getElementById("displayer").innerHTML="<input type=\"button\" value=\"replay\" onclick=\"rePlay()\">"

Mr J
06-03-2005, 06:25 PM
But you did not ask for a replay button :D

All you had to do is add this function and link to it



function replay(){
count=0
document.getElementById("display").innerHTML=""
next_phrase()
}

DavidBer
06-03-2005, 09:02 PM
Thanks for the added piece of code.

True, I hadn't asked for replay, but it is helpful to have. :)

DavidBer
06-04-2005, 11:38 PM
Hi,

Can anyone advise how this routine can be made generic? I would like to add it to a template file so that it could be run on any page and multiple times on a page. As it exists, the code would have to be changed each time it is run on a page.

Thanks in advance.

David

vwphillips
06-05-2005, 11:33 AM
Just Playing




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

var zxcContinious='Y';

var zxcDelay,zxcObj,zxcTxt,zxcCnt,zxcTO;
var zxcTxtAry=new Array();
var zxcReg=/<br>/g;

function zxcLineParse(id,nu,t){
zxcDelay=t;
zxcTxtAry=new Array();
zxcObj=document.getElementById(id);
zxcObj.onclick=function(){ if (!zxcTO){ if (!zxcCnt){ zxcCnt=0; }; zxcLineRun(); } else { clearTimeout(zxcTO); zxcTO=null; } }
zxcTxt=zxcObj.innerHTML;
zxcTxt=zxcTxt.replace(zxcReg,'<BR>');
zxcTxt=zxcTxt.split('<BR>');
zxcObj.innerHTML='';
zxcCnt=-1;
for (zxc0=0;zxc0<zxcTxt.length;zxc0++){
if (zxc0%nu==0){
zxcTTxt='';
zxcCnt++;
}
zxcTTxt+=zxcTxt[zxc0]+'<BR>';
zxcTxtAry[zxcCnt]=zxcTTxt;
}
zxcCnt=0;
zxcLineRun();
}

function zxcLineRun(){
zxcObj.innerHTML=zxcTxtAry[zxcCnt++];
if (zxcCnt<zxcTxtAry.length){ zxcTO=setTimeout('zxcLineRun()',zxcDelay); }
else {
zxcCnt=0;
if (zxcContinious=='Y'){
zxcLineRun();
}
}
}

//-->
</script>
</head>

<body onload="zxcLineParse('MyLines',3,2000);" >
<p id="MyLines" >
Click Me to Start,Click Me to Stop
<br>
Line 1 Line 1 Line 1 Line 1 Line 1 Line 1 Line 1 Line 1 Line 1<br>
Line 2 Line 2 Line 2 Line 2 Line 2 Line 2 Line 2 Line 2 Line 2<br>
Line 3 Line 3 Line 3 Line 3 Line 3 Line 3 Line 3 Line 3 Line 3<br>
Line 4 Line 4 Line 4 Line 4 Line 4 Line 4 Line 4 Line 4 Line 4<br>
Line 5 Line 5 Line 5 Line 5 Line 5 Line 5 Line 5 Line 5 Line 5<br>
Line 6 Line 6 Line 6 Line 6 Line 6 Line 6 Line 6 Line 6 Line 6<br>
Line 7 Line 7 Line 7 Line 7 Line 7 Line 7 Line 7 Line 7 Line 7<br>
Line 8 Line 8 Line 8 Line 8 Line 8 Line 8 Line 8 Line 8 Line 8<br>
Line 9 Line 9 Line 9 Line 9 Line 9 Line 9 Line 9 Line 9 Line 9<br>
Line 10 Line 10 Line 10 Line 10 Line 10 Line 10 Line 10 Line 10 Line 10<br>
Line 11 Line 11 Line 11 Line 11 Line 11 Line 11 Line 11 Line 11 Line 11<br>
Line 12 Line 12 Line 12 Line 12 Line 12 Line 12 Line 12 Line 12 Line 12<br>
Line 13 Line 13 Line 13 Line 13 Line 13 Line 13 Line 13 Line 13 Line 13<br>
Line 14 Line 14 Line 14 Line 14 Line 14 Line 14 Line 14 Line 14 Line 14<br>
Line 15 Line 15 Line 15 Line 15 Line 15 Line 15 Line 15 Line 15 Line 15<br>
Line 16 Line 16 Line 16 Line 16 Line 16 Line 16 Line 16 Line 16 Line 16<br>
Line 17 Line 17 Line 17 Line 17 Line 17 Line 17 Line 17 Line 17 Line 17<br>
</p>
</body>

</html>


Although Thing this would be better as a scroller

may be back later

vwphillips
06-05-2005, 03:02 PM
or even



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Limit Line Display lldPart1 (05-06-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Limit the number of lines displayed
// and display more lines at specified intervals.
//
// OnClick 'hold' and 'continue'.
// Optional automatic start on document load.
// There may be any number of applications on a Page.

// Application Notes and Customising Variables

// Application Notes

// The lines must be contained within an element e.g <p>
// The element must be allocated a unique id e.g. <p id="MyLines" >

// The script is initialised by a <BODY> onload event
// e.g. <body onload="lldLineDisplay('*ID*',*NumberofLines*);lldLineDisplay('MyLines2',4);" >
// where:
// *ID* = the unique id of the element (string)
// *NumberofLines* = the number of lines to be displayed (digit)

// the Functional Code 'lldPart2'(about 1K) is best as an extenal JavaScript

// All variables, functions etc. are prefixed with 'lld' to minimise conflicts with other JavaScripts,

// Tested with IE6 and Mozilla FoxFire

// Customising Variables

var lldDelay=1000; // speed of line display (milliSeconds)
var lldStart=true; // true to auto start, false for manual start

//-->
</script>

<script language="JavaScript" type="text/javascript">
<!--
// Limit Line Display lldPart2 (05-06-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Functional Code - NO Need to Change

var lldDelay,lldObj,lldTxt,lldCnt,lldTO;
var lldTxtAry=new Array();
var lldObjAry=new Array();
var lldReg=/<br>/g;

function lldLineDisplay(id,nu){
lldObj=document.getElementById(id);
lldObj.ary=new Array();
lldObj.to=true;
lldObj.onclick=function(){ if (!this.to){ this.to=true; if (!this.cnt){ this.cnt=0; } } else { this.to=false; } }
lldTxt=lldObj.innerHTML;
lldTxt=lldTxt.replace(lldReg,'<BR>');
lldTxt=lldTxt.split('<BR>');
lldCnt=-1;
for (lld0=0;lld0<lldTxt.length;lld0++){
if (lld0%nu==0){
lldTTxt='';
lldCnt++;
}
lldTTxt+=lldTxt[lld0]+'<BR>';
lldObj.ary[lldCnt]=lldTTxt;
}
lldObj.cnt=0;
lldObjAry[lldObjAry.length]=lldObj;
lldObj.innerHTML=lldObj.ary[0];
if (lldStart){
lldLineRun();
lldStart=false;
}
}


function lldLineRun(){
for (lld0=0;lld0<lldObjAry.length;lld0++){
if (lldObjAry[lld0].to){
lldObjAry[lld0].innerHTML=lldObjAry[lld0].ary[lldObjAry[lld0].cnt++];
if (lldObjAry[lld0].cnt>lldObjAry[lld0].ary.length-1){
lldObjAry[lld0].cnt=0;
}
}
}
lldTO=setTimeout('lldLineRun()',lldDelay);
}

//-->
</script>
</head>

<body onload="lldLineDisplay('MyLines',3,2000);lldLineDisplay('MyLines2',4);" >
<p id="MyLines" style="height:100px;" >
Click Me to Start,Click Me to Stop
<br>
Line 1 Line 1 Line 1 Line 1 Line 1 Line 1 Line 1 Line 1 Line 1<br>
Line 2 Line 2 Line 2 Line 2 Line 2 Line 2 Line 2 Line 2 Line 2<br>
Line 3 Line 3 Line 3 Line 3 Line 3 Line 3 Line 3 Line 3 Line 3<br>
Line 4 Line 4 Line 4 Line 4 Line 4 Line 4 Line 4 Line 4 Line 4<br>
Line 5 Line 5 Line 5 Line 5 Line 5 Line 5 Line 5 Line 5 Line 5<br>
Line 6 Line 6 Line 6 Line 6 Line 6 Line 6 Line 6 Line 6 Line 6<br>
Line 7 Line 7 Line 7 Line 7 Line 7 Line 7 Line 7 Line 7 Line 7<br>
Line 8 Line 8 Line 8 Line 8 Line 8 Line 8 Line 8 Line 8 Line 8<br>
Line 9 Line 9 Line 9 Line 9 Line 9 Line 9 Line 9 Line 9 Line 9<br>
Line 10 Line 10 Line 10 Line 10 Line 10 Line 10 Line 10 Line 10 Line 10<br>
Line 11 Line 11 Line 11 Line 11 Line 11 Line 11 Line 11 Line 11 Line 11<br>
Line 12 Line 12 Line 12 Line 12 Line 12 Line 12 Line 12 Line 12 Line 12<br>
Line 13 Line 13 Line 13 Line 13 Line 13 Line 13 Line 13 Line 13 Line 13<br>
Line 14 Line 14 Line 14 Line 14 Line 14 Line 14 Line 14 Line 14 Line 14<br>
Line 15 Line 15 Line 15 Line 15 Line 15 Line 15 Line 15 Line 15 Line 15<br>
Line 16 Line 16 Line 16 Line 16 Line 16 Line 16 Line 16 Line 16 Line 16<br>
Line 17 Line 17 Line 17 Line 17 Line 17 Line 17 Line 17 Line 17 Line 17<br>
</p>
<p id="MyLines2" style="height:100px;" >
Click Me to Start,Click Me to Stop
<br>
Line 1 Line 1 Line 1 Line 1 Line 1 Line 1 Line 1 Line 1 Line 1<br>
Line 2 Line 2 Line 2 Line 2 Line 2 Line 2 Line 2 Line 2 Line 2<br>
Line 3 Line 3 Line 3 Line 3 Line 3 Line 3 Line 3 Line 3 Line 3<br>
Line 4 Line 4 Line 4 Line 4 Line 4 Line 4 Line 4 Line 4 Line 4<br>
Line 5 Line 5 Line 5 Line 5 Line 5 Line 5 Line 5 Line 5 Line 5<br>
Line 6 Line 6 Line 6 Line 6 Line 6 Line 6 Line 6 Line 6 Line 6<br>
Line 7 Line 7 Line 7 Line 7 Line 7 Line 7 Line 7 Line 7 Line 7<br>
Line 8 Line 8 Line 8 Line 8 Line 8 Line 8 Line 8 Line 8 Line 8<br>
Line 9 Line 9 Line 9 Line 9 Line 9 Line 9 Line 9 Line 9 Line 9<br>
Line 10 Line 10 Line 10 Line 10 Line 10 Line 10 Line 10 Line 10 Line 10<br>
Line 11 Line 11 Line 11 Line 11 Line 11 Line 11 Line 11 Line 11 Line 11<br>
Line 12 Line 12 Line 12 Line 12 Line 12 Line 12 Line 12 Line 12 Line 12<br>
Line 13 Line 13 Line 13 Line 13 Line 13 Line 13 Line 13 Line 13 Line 13<br>
Line 14 Line 14 Line 14 Line 14 Line 14 Line 14 Line 14 Line 14 Line 14<br>
Line 15 Line 15 Line 15 Line 15 Line 15 Line 15 Line 15 Line 15 Line 15<br>
Line 16 Line 16 Line 16 Line 16 Line 16 Line 16 Line 16 Line 16 Line 16<br>
Line 17 Line 17 Line 17 Line 17 Line 17 Line 17 Line 17 Line 17 Line 17<br>
</p>
</body>

</html>

DavidBer
06-05-2005, 10:20 PM
Thank you for taking the time to present a different solution. I like the abilty to start and stop with a mouse click. But let me describe in a little more detail what I am trying to do:

In order to read large amounts of text on the screen easily, I want to present meaning parts of a sentence on the screen. One part appears and then after a short delay, a second part appears and then after a short delay the third part appears until the whole sentence appears on the screen. The process continues until the whole paragraph is on the screen. Then the second paragraph is displayed in the same way as the first until the entire page is displayed.

Your solution displays entire sentences (lines) not parts, and then washes them away. If the parts could be joined together as described above and kept on the screen, then it looks like I'd have the generic routine I am looking for.

Thanks again for taking the time.

Mr J
06-06-2005, 12:06 AM
This is still in the editing stage but give it a try to see if its on the right lines



<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
<!--

var message_obj1=new message_reader('display',1000)
message_obj1_array=new Array("Fourscore and seven years ago","our fathers brought forth","on this continent","a new nation"," conceived in liberty","and dedicated to the proposition")

var message_obj2=new message_reader('display2',2000)
message_obj2_array=new Array("Seperate messages","can be shown","in the same page","with individual speed","control")

var message_obj3=new message_reader('display3',3000)
message_obj3_array=new Array("I suppose you could have","any number of displays","in the same page","simply by creating a","new object for it to be shown")


function message_reader(id,speed){
var count=0
var timer=null
var running=0

this.next_message=function(n){
running=1
//document.getElementById(id).innerHTML=""
document.getElementById(id).innerHTML+=window[n+"_array"][count] + " "
count++
timer = setTimeout(n+".next_message('"+n+"')",speed)

if(count==window[n+"_array"].length){
clearTimeout(timer)
count=0
running=0
}
}

this.replay_message_message=function(n){
if(running==1){return}
clearTimeout(timer)
count=0
document.getElementById(id).innerHTML=""
timer = setTimeout(n+".next_message('"+n+"')",speed)
}

this.stop_message = function(){
if(timer){
clearTimeout(timer)
running=0
}
}

}

function init(){
message_obj1.next_message('message_obj1')
message_obj2.next_message('message_obj2')
message_obj3.next_message('message_obj3')
}
//-->
</script>

</HEAD>
<BODY onload="init()">

<div id="display">&nbsp;</div>
<BR><BR>

<div id="display2">&nbsp;</div>

<BR><BR>

<div id="display3">&nbsp;</div>

</BODY>
</HTML>



Or do you mean something like this?


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
<!--

paragraph1=new Array("Fourscore and seven years ago","our fathers brought forth","on this continent","a new nation"," conceived in liberty","and dedicated to the proposition")

paragraph2=new Array("Seperate messages","can be shown","in the same page","with individual speed","control")

paragraph3=new Array("I suppose you could have","any number of displays","in the same page","simply by creating a","new object for it to be shown")

num=1
index=0
timer=null
speed=1000
paras=3

function init(){
document.getElementById("display"+num).innerHTML=""
message_reader2()
}


function message_reader2(){
document.getElementById("display"+num).innerHTML+=window["paragraph"+num][index] + " "
index++
timer = setTimeout("message_reader2()",speed)


if(index==window["paragraph"+num].length){
clearTimeout(timer)
index=0
if(num!=paras){
num++
setTimeout("init()",3000)
}
}

}

//-->
</script>

</HEAD>
<BODY onload="init()">

<div id="display1">&nbsp;</div>
<BR><BR>

<div id="display2">&nbsp;</div>

<BR><BR>

<div id="display3">&nbsp;</div>

</BODY>
</HTML>

DavidBer
06-06-2005, 05:37 AM
Mr J.

Thank you again for taking the time. It is important for me to get this routine to work and I appreciate your suggestions.

Your second example comes very close to what I am trying to do. The "paragraphs" are displayed in the manner I am seeking. However, I need to have other paragraphs be displayed in the same way elsewhere on the page at different times.

I suspect that if I could get control of the "num" value and assign it to the paragraph and the display object, then I would have control over when and where the paragraph is displayed.

I changed the line "function message_reader2()" to "function message_reader2(num)" and then called the function as follows:

<p onClick="javascript:message_reader2(1) ;">Click to display message</p>

However, only the first phrase appeared on the screen.

Obviously, there is something I am not understanding. Any suggestions ??

Thank you.

David

vwphillips
06-06-2005, 09:12 AM
Done?

but will need to get the page to scroll for the text to remain in view




<SCRIPT language=JavaScript type=text/javascript>
<!--
// Limit Line Display lldPart1 (05-06-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Limit the number of lines displayed
// and display more lines at specified intervals.
//
// OnClick 'hold' and 'continue'.
// Optional automatic start on document load.
// There may be any number of applications on a Page.

// Application Notes and Customising Variables

// Application Notes

// The lines must be contained within an element e.g <p>
// The element must be allocated a unique id e.g. <p id="MyLines" >

// The script is initialised by a <BODY> onload event
// e.g. <body onload="lldLineDisplay('*ID*',*NumberofLines*);lldLineDisplay('MyLines2',4);" >
// where:
// *ID* = the unique id of the element (string)
// *NumberofLines* = the number of lines to be displayed (digit)

// the Functional Code 'lldPart2'(about 1K) is best as an extenal JavaScript

// All variables, functions etc. are prefixed with 'lld' to minimise conflicts with other JavaScripts,

// Tested with IE6 and Mozilla FoxFire

// Customising Variables

var lldDelay=1000; // speed of line display (milliSeconds)
var lldStart=true; // true to auto start, false for manual start

//-->
</SCRIPT>

<SCRIPT language=JavaScript type=text/javascript>
<!--
// Limit Line Display lldPart2 (05-06-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Functional Code - NO Need to Change

var lldDelay,lldObj,lldTxt,lldCnt,lldTO;
var lldTxtAry=new Array();
var lldObjAry=new Array();
var lldReg=/<br>/g;

function lldLineDisplay(id,nu){
lldObj=document.getElementById(id);
lldObj.ary=new Array();
lldObj.to=true;
lldObj.txt='';
lldObj.onclick=function(){ if (!this.to){ this.to=true; if (!this.cnt){ this.cnt=0; } } else { this.to=false; } }
lldTxt=lldObj.innerHTML;
lldTxt=lldTxt.replace(lldReg,'<BR>');
lldTxt=lldTxt.split('<BR>');
lldCnt=-1;
for (lld0=0;lld0<lldTxt.length;lld0++){
if (lld0%nu==0){
lldTTxt='';
lldCnt++;
}
lldTTxt+=lldTxt[lld0]+'<BR>';
lldObj.ary[lldCnt]=lldTTxt;
}
lldObj.cnt=0;
lldObjAry[lldObjAry.length]=lldObj;
lldObj.innerHTML=lldObj.ary[0];
if (lldStart){
lldLineRun();
lldStart=false;
}
}


function lldLineRun(){
for (lld0=0;lld0<lldObjAry.length;lld0++){
if (lldObjAry[lld0].to){
lldObjAry[lld0].txt+=lldObjAry[lld0].ary[lldObjAry[lld0].cnt++];
lldObjAry[lld0].innerHTML=lldObjAry[lld0].txt
if (lldObjAry[lld0].cnt>lldObjAry[lld0].ary.length-1){
lldObjAry[lld0].to=false; // ----------------------------- Optional
lldObjAry[lld0].cnt=0;
lldObjAry[lld0].txt='';
}
}
}
lldTO=setTimeout('lldLineRun()',lldDelay);
}

//-->
</SCRIPT>

Mr J
06-06-2005, 03:28 PM
Ok, give this a try



<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
<!--

paragraph1=new Array("Fourscore and seven years ago","our fathers brought forth","on this continent","a new nation"," conceived in liberty","and dedicated to the proposition")

paragraph2=new Array("Lorem ipsum dolor sit amet, ","consectetuer adipiscing elit. ","Suspendisse tincidunt. ","Pellentesque semper lacus ut mauris. ","vestibulum ante ipsum primis in ","faucibus orci luctus et ultrices posuere cubilia curae ","Maecenas malesuada arcu et tortor. Aliquam ligula elit ")

paragraph3=new Array("Lorem ipsum ","sed cursus mattis lorem ","donec egestas ipsum ac nisl ","duis sollicitudin, mi ac rutrum ornare ","tortor magna volutpat leo ","vel tristique tellus lorem quis diam.")

index=0
running=0
timer=null
speed=1000

function message_reader(num){
if(running==1){
return
}
document.getElementById("display"+num).innerHTML=""
run_reader(num)
}

function run_reader(num){
running=1
document.getElementById("display"+num).innerHTML+=window["paragraph"+num][index] + " "
index++
timer = setTimeout("run_reader("+num+")",speed)

if(index==window["paragraph"+num].length){
clearTimeout(timer)
index=0
running=0
document.getElementById("d"+num).innerHTML="Replay message "+num
}

}

//-->
</script>

</HEAD>
<BODY>

<div id="d1" onclick="message_reader(1)" style="cursor:hand;cursor:pointer;font-weight:bold">Click to display message 1</div>
<div id="display1">&nbsp;</div>

<BR><BR>

<div id="d2" onclick="message_reader(2)" style="cursor:hand;cursor:pointer;font-weight:bold">Click to display message 2</div>
<div id="display2">&nbsp;</div>

<BR><BR>

<div id="d3" onclick="message_reader(3)" style="cursor:hand;cursor:pointer;font-weight:bold">Click to display message 3</div>
<div id="display3">&nbsp;</div>

</BODY>
</HTML>

DavidBer
06-06-2005, 04:59 PM
Mr. J.

Thanks again and again, your solution is exactly what I need. You have made it easier to read extensive text on a page.

----------------------------------------------------

The next step is to add a number of features that make the routine even more useful:

For example, vwphillips in his suggestion, provides the ability to start and stop the display (very helpful for very long paragraphs).

Having each phrase fade in as it appears would make the text even easier to read.

It is useful for me to be able to adjust the speed of the display for each message as you have done, but giving the reader the ability to adjust the speed would make the routine that much more useful to everyone who comes to the page.

Again, thank you for taking the time and coming up with a very compact solution that is easy to implement

David

DavidBer
06-06-2005, 05:04 PM
vwphillips,

Thank you for taking the time in answering my question. I will try to implement the start/stop feature to Mr. J's solution which, as you can see from this thread, provides exactly the functionality I need.

David

vwphillips
06-06-2005, 09:48 PM
to DaveBer and MrJ

As I see it the major advantage with my solution is displaying the original HTML code without the need for arrays thus making the modification of existing pages minimal, also the ability of multiple implementations on a page.

This can be easily implemented with MrJ code, as can displaying paragraphs rather than lines with mine.

Interesting little project though.

DavidBer
06-07-2005, 08:36 PM
Hello,

I just found the web site of a company carries what I am exploring in this thread to a much higher level. It provides parsing of text into meaningful groups of words and displays the text in a layout that makes the text very easy to read.

See Live Ink at http://www.liveink.com/whatis/how.htm

If anyone knows of similar software or coding routines, I would be very interested in hearing about them.

Thank you.

DavidBer
06-13-2005, 11:35 PM
Hello,

In my thank-you message I wrote, "it is useful for me to be able to adjust the speed of the display for each message as you have done .." However, upon closer examination, I find I was confusing a previous solution with the later one provided. In the last solution, the speed of each message cannot be adjusted, only the speed for all of them.

Can anyone suggest a fix to this code so the speed can be adjused for each message ?

Thanks.

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
<!--

paragraph1=new Array("Fourscore and seven years ago","our fathers brought forth","on this continent","a new nation"," conceived in liberty","and dedicated to the proposition")

paragraph2=new Array("Lorem ipsum dolor sit amet, ","consectetuer adipiscing elit. ","Suspendisse tincidunt. ","Pellentesque semper lacus ut mauris. ","vestibulum ante ipsum primis in ","faucibus orci luctus et ultrices posuere cubilia curae ","Maecenas malesuada arcu et tortor. Aliquam ligula elit ")

paragraph3=new Array("Lorem ipsum ","sed cursus mattis lorem ","donec egestas ipsum ac nisl ","duis sollicitudin, mi ac rutrum ornare ","tortor magna volutpat leo ","vel tristique tellus lorem quis diam.")

index=0
running=0
timer=null
speed=1000

function message_reader(num){
if(running==1){
return
}
document.getElementById("display"+num).innerHTML=""
run_reader(num)
}

function run_reader(num){
running=1
document.getElementById("display"+num).innerHTML+=window["paragraph"+num][index] + " "
index++
timer = setTimeout("run_reader("+num+")",speed)

if(index==window["paragraph"+num].length){
clearTimeout(timer)
index=0
running=0
document.getElementById("d"+num).innerHTML="Replay message "+num
}

}

//-->
</script>

</HEAD>
<BODY>

<div id="d1" onclick="message_reader(1)" style="cursor:hand;cursor:pointer;font-weight:bold">Click to display message 1</div>
<div id="display1">&nbsp;</div>

<BR><BR>

<div id="d2" onclick="message_reader(2)" style="cursor:hand;cursor:pointer;font-weight:bold">Click to display message 2</div>
<div id="display2">&nbsp;</div>

<BR><BR>

<div id="d3" onclick="message_reader(3)" style="cursor:hand;cursor:pointer;font-weight:bold">Click to display message 3</div>
<div id="display3">&nbsp;</div>

</BODY>
</HTML>

Mr J
06-14-2005, 12:04 AM
Please try the following, the speed is denoted by the first index of the array



<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
<!--
// Coded by Jeff
// www.huntingground.freeserve.co.uk

paragraph1=new Array(1000,"Fourscore and seven years ago","our fathers brought forth","on this continent","a new nation"," conceived in liberty","and dedicated to the proposition")

paragraph2=new Array(2000,"Lorem ipsum dolor sit amet, ","consectetuer adipiscing elit. ","Suspendisse tincidunt. ","Pellentesque semper lacus ut mauris. ","vestibulum ante ipsum primis in ","faucibus orci luctus et ultrices posuere cubilia curae ","Maecenas malesuada arcu et tortor. Aliquam ligula elit ")

paragraph3=new Array(100,"Lorem ipsum ","sed cursus mattis lorem ","donec egestas ipsum ac nisl ","duis sollicitudin, mi ac rutrum ornare ","tortor magna volutpat leo ","vel tristique tellus lorem quis diam.")

index=1
running=0
timer=null

function message_reader(num){
if(running==1){
return
}
document.getElementById("display"+num).innerHTML=""
speed=window["paragraph"+num][0]
run_reader(num)
}

function run_reader(num){
running=1
document.getElementById("display"+num).innerHTML+=window["paragraph"+num][index] + " "
index++
timer = setTimeout("run_reader("+num+")",speed)

if(index==window["paragraph"+num].length){
clearTimeout(timer)
index=1
running=0
document.getElementById("d"+num).innerHTML="Replay message "+num
}

}

//-->
</script>

</HEAD>
<BODY>

<div id="d1" onclick="message_reader(1)" style="cursor:hand;cursorointer;font-weight:bold">Click to display message 1</div>
<div id="display1">&nbsp;</div>

<BR><BR>

<div id="d2" onclick="message_reader(2)" style="cursor:hand;cursorointer;font-weight:bold">Click to display message 2</div>
<div id="display2">&nbsp;</div>

<BR><BR>

<div id="d3" onclick="message_reader(3)" style="cursor:hand;cursorointer;font-weight:bold">Click to display message 3</div>
<div id="display3">&nbsp;</div>

</BODY>
</HTML>

DavidBer
06-14-2005, 03:59 PM
Mr. J,

Thanks once again for responding so promptly and directly to my question. You have helped me get closer to my goal. The next step is to have the words in each phrase gradually appear on the screen word by word. I believe this fading into view would make the phrases even easier to read. Having control on the speed of the fading would help in making the phrase more readable. Any suggestions ?

Again thank you for taking the time.

David

Mr J
06-14-2005, 11:46 PM
Here's what I have so far



<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
<!--
// Coded by Jeff
// www.huntingground.freeserve.co.uk

var message1=new message_reader(1,100)
message1_str="Fourscore and seven years ago our fathers brought forth on this continent a new nation conceived in liberty and dedicated to the proposition"

var message2=new message_reader(2,500)
message2_str="new message_reader(num1,num2)<br><br> num1 = display number<br> num2 = speed of display"

var message3=new message_reader(3,50)
message3_str="<b>Stop :</b> Stops the display<br><br> <b>Start :</b> If running and stop is pressed the display will restart from where it stopped.<br> If pressed at the end of the run the display will restart from the beginning<br><br> <b>Replay :</b> If stop has been pressed the display starts from the beginning"

function message_reader(num,speed){
running=0
var step=4
var opac=0
var count=0
var timer=null
var timer2=null
var opac_speed=10

this.next_message=function(num){
if(running==1){return}
stopped=0

document.getElementById("d"+num).innerHTML="<span onclick=\"message"+num+".stop_message("+num+")\">Stop</span> || <span onclick=\"message"+num+".next_message("+num+")\">Start</span> || <span onclick=\"message"+num+".replay_message("+num+")\">Replay</span>"

if(document.getElementById("display"+num).innerHTML.length>window["message"+num+"_str"].length){
document.getElementById("display"+num).innerHTML="&nbsp;"
}

temp_array=window["message"+num+"_str"].split(" ")

this.next_message2(num)
}

this.next_message2=function(num){
running=1

one=document.createElement("span")
one.setAttribute("id","temp_span")
one.innerHTML=temp_array[count]
document.getElementById("display"+num).appendChild(one)

if(IE){
document.getElementById("temp_span").filters.alpha.Opacity=0
}
else{
document.getElementById("temp_span").style.MozOpacity=0
}

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

}


IE=document.all

this.fade=function(num){

if(IE){
document.getElementById("temp_span").filters.alpha.Opacity=opac
}
else{
document.getElementById("temp_span").style.MozOpacity=(opac/100)-0.01
}

opac+=step

timer2=setTimeout("message"+num+".fade('"+num+"')",opac_speed)


if(opac>=100){
document.getElementById("display"+num).removeChild(one)
document.getElementById("display"+num).innerHTML+=temp_array[count]+"&nbsp;"
clearTimeout(timer2)
opac=0

if(stopped==0){
timer = setTimeout("message"+num+".next_message2('"+num+"')",speed)
}

count++
if(count==temp_array.length){
clearTimeout(timer)
count=0
running=0
}

}

}

this.replay_message=function(num){
if(running==1){return}
clearTimeout(timer)
count=0
document.getElementById("display"+num).innerHTML="&nbsp;"
timer = setTimeout("message"+num+".next_message('"+num+"')",speed)
}

this.stop_message = function(){
stopped=1
if(timer){
clearTimeout(timer)
running=0
}
}

}

//-->
</script>
<style>
#temp_span{
position:absolute;
filter:alpha(opacity=0);
-moz-opacity:0.1;
}

html>body #temp_span{
position:static;
}

#d1,#d2,#d3{
cursor:hand;
cursor:pointer;
font-weight:bold;
}
</style>
</HEAD>
<BODY>
<div id="d1"><span onclick="message1.next_message(1)">Click to display message 1</span></div><BR>
<div id="display1">&nbsp;</div>

<BR><BR>
<div id="d2"><span onclick="message2.next_message(2)">Click to display message 2</span></div><BR>
<div id="display2" style="width:250px;height:100px;border:1px solid black">&nbsp;</div>

<BR><BR>
<div id="d3"><span onclick="message3.next_message(3)">Click to display message 3</span></div><BR>
<div id="display3">&nbsp;</div>

</BODY>
</HTML>

DavidBer
06-15-2005, 04:34 PM
Mr. J,

Once again you have come up with a compact and easy to implement answer to my question. Thanks for the added feature of starting and stopping; it is very useful.

You have come very close to what I had in mind. In the interest in being concise I apologize for not describing completely enough the functionality I am seeking. I should have referenced the Fading Text script at http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=80. This script fades the words of the phrase onto the screen, fades them out, and then fades the next phrases onto the screen. However, unlike your script, all the text does not remain on the screen and the text keeps cycling. I would like the phrase to fade in the same manner, but with the second word fading in just a split second after the first, and the third word fading in just a split second after the second word. In that way the eye would see/recognize each word as it appears; the mind would grasp the meaning of the phrase and be prepared to read the next phrase and take in its meaning.

Said another way: reading the phrase is what is important; the words fade in to make the phrase understandable. The goal is for the phrases to become linked in the reader's mind so that when he/she gets to the end of the sentence, he/she understands more quickly and easily what has just been read than if the text were laid out in the normal way.

I hope the above describes that I am looking for more clearly. Again your assistance in this project is greatly appreciated.

David

Mr J
06-15-2005, 08:48 PM
second word fading in just a split second after the first

As timing is a key word here I think a small incite into the fading technique is required.

A fade effect is created by changing the opacity of an object within the range of 0 to 100.
To have an object "fade in" a function is run that increments the opacity value by a set number, this function is then re-run until the desired opacity level is reached.

For a maximum "fade in" effect the opacity of the object would begin at zero and increment up to 100 in steps of 1 therefore the calculation for this is

100 / 1 = 100 steps.

If the function is run every 10 milliseconds it will take 1 second to reach 100% opacity

100 x 10 = 1000 milliseconds.

Because the speed that the function is repeated is 10 milliseconds setting this to say, 1ms, would not have any significant effect so to increase the speed of the "fade in" you would increase the size of the steps

100 / 4 = 25 steps

25 x 10 = 250 milliseconds

When you increase the step size of the "fade in" you lose some of its effect because you are increasing the opacity value in greater steps.

You then have to take into account how long it will take to read what has become visible and apply a pause between each word, especially if a large amout of text was being faded in.

As you are showing one word at a time this pause can be set very low to a few milliseconds after the word has faded in but at 1 step per 10 milliseconds it will still take a full second.

I hope this gives a better understanding of the script and the effect when talking about "the second word fading in just a split second after the first"

There are 3 areas of the script that will affect the overall timing display of the words

var message1=new message_reader(1,100)

where 100 is the time between showing the next word after the previous word has reached 100% opacity

var step=4 is the value that the opacity is incremented, a lower value would mean a more prominent fade in with 1 being the lowest value

var opac_speed=10 is the speed at which the fade in function is run and determines how fast an opacity of 100 is reached in steps of 4.

For the effect you are after there is not much leeway with regards to the timing and only you can decide if this is going to be acceptable.

I would suggest trying the following

Set variable step to a value of 1

and for each object set the second argument to 1

var message1=new message_reader(1,1)
var message2=new message_reader(2,1)
var message3=new message_reader(3,1)

This will give the best fade in effect with the quickest show time, after this you would have to increase the value of variable step by 1 for a faster but less prominant fade.

I was playing around with an additional effect which I thought was a bit on the cool side, give it a try and see what you think.

Add the following 2 lines to the style rule #temp_span

font-weight:bold;
color:red;

DavidBer
06-15-2005, 10:40 PM
Mr. J

Thanks so much for the prompt detailed reply. Your suggestion to change the var step and set the style color brings the routine closer to what I have in mind. I first used red and then teal. Setting the step to 1.5 and the color to teal creates more of a fade-in effect to my eye.

In the routine your first wrote in answer to my initial question, you displayed the words in phrases as follows:

paragraph1=new Array("Fourscore and seven years ago","our fathers brought forth","on this continent","a new nation"," conceived in liberty","and dedicated to the proposition")

In the current routine, the words are displayed one by one. If they could be displayed as phrases, the routine would be very close to what I have in mind.

If there were a millisecond delay between the display of each phrase, wouldn't that create more of a fade-in effect?

Again, thank you for taking the time. I really do appreciate it.

David

Mr J
06-15-2005, 11:50 PM
In post #22 you said


The next step is to have the words in each phrase gradually appear on the screen word by word

so I changed the script to suit.

In post #24 you talked about


the second word fading in just a split second after the first, and the third word fading in just a split second after the second word

so I assumed I was still on the right track.

Do you mean to show this word by word

Fourscore and seven years ago

then a pause then this word by word

our fathers brought forth

etc. etc

DavidBer
06-16-2005, 05:19 AM
Mr. J,

You asked:

Do you mean to show this word by word

Fourscore and seven years ago

then a pause then this word by word

our fathers brought forth

Yes, that is what I would like to happen with the fade in. The phrases should then remain on the screen.

Sorry for any confusion. I was assuming the phrase display was implied. Your post #21 combined with Post #23 and additional suggestions in post #25 come close to what I am looking for in relation to the fade in. If each word in the first phrase could fade in almost immediately after each other and then each word in the next phrase could fade in almost immediately after each other and so on, then the routine would do what I need it to. Being able to control the speed as you provided in Post #21 would be helpful.

The goal is to make the screen display of a lot of text easier to read. I believe that having the words appear in phrases with the fading in of each word of the phrase would make text on the screen easier to read.

Again thank you for taking this project seriously and responding so promptly to my request.

David

Mr J
06-16-2005, 08:55 PM
Ok, lets see how we do with this one. :)



<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, phraseSpeed in milliseconds
phrase1Str=new Array("Fourscore and seven years ago","our fathers brought forth","on this continent","a new nation"," conceived in liberty","and dedicated to the proposition")

var phrase2=new phraseReader('display2',2,2000)
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.")

var phrase3=new phraseReader('display3',3,3000)
phrase3Str=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.")

running=0
IE=document.all

function phraseReader(num,wordSpeed,phraseSpeed){

var opacStep=1.5 // 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 onclick=\"phrase"+num+".stopReader("+num+")\">Stop</span> || <span onclick=\"phrase"+num+".restartReader("+num+")\">Start</span> || <span onclick=\"phrase"+num+".replayPhrase("+num+")\">Replay</span>"

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

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(IE){document.getElementById("tempSpan").filters.alpha.Opacity=0}
else{document.getElementById("tempSpan").style.MozOpacity=0}

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

}

this.fade=function(num){

if(IE){document.getElementById("tempSpan").filters.alpha.Opacity=opacValue}
else{document.getElementById("tempSpan").style.MozOpacity=(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+"')",phraseSpeed)
}

if(strCount==window["phrase"+num+"Str"].length){
running=0
strCount=0
}

}

}

}

this.stopReader = function(){
if(running==0){return}
clearTimeout(wordTimer)
clearTimeout(phraseTimer)
running=0
}

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

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

}

//-->
</script>
<style>
#tempSpan{
position:absolute;
filter:alpha(opacity=0);
-moz-opacity:0.1;
color:teal;
}

html>body #tempSpan{
position:static;
}

#d1,#d2,#d3{
cursor:hand;
cursor:pointer;
font-weight:bold;
}
</style>
</HEAD>
<BODY>
<div id="d1"><span onclick="phrase1.startReader(1)">View Phrase 1</span></div><BR>
<div id="display1">&nbsp;</div>

<BR><BR>
<div id="d2"><span onclick="phrase2.startReader(2)">View Phrase 2</span></div><BR>
<div id="display2">&nbsp;</div>

<BR><BR>
<div id="d3"><span onclick="phrase3.startReader(3)">View Phrase 3</span></div><BR>
<div id="display3">&nbsp;</div>

</BODY>
</HTML>



In the meantime I am toying with an idea regarding the controls

Stop || Start || Replay

How about when the phrase is started instead of having the above showing you just have the Stop control.

When the Stop control is clicked this is replaced with a Restart or Replay control.

When the display has finished you then just get the Replay control.

Just a thought

DavidBer
06-16-2005, 11:23 PM
Mr. J,

Once again you come through with flying colors. The latest Post appears to be right on target ( I only had a few minutes to look at it so far ). You have provided contols for word and phrase speed (very useful to finetune the display of text !!! ) as well as the ability to control the display of each message. The code can be added to a template = used throughout web site.


In the meantime I am toying with an idea regarding the controls

Stop || Start || Replay

How about when the phrase is started instead of having the above showing you just have the Stop control.

When the Stop control is clicked this is replaced with a Restart or Replay control.

When the display has finished you then just get the Replay control.

Just a thought

Your suggestion is a good one: it will take less screen real estate while still providing control on the display.

Thank you again. Your help is greatly appreciated. I will now make use of this code. Just like you gave credit to Jeff:
// Coded by Jeff
// www.huntingground.freeserve.co.uk

how should I give you the credit for designing this routine?

David

Mr J
06-17-2005, 12:23 AM
Thats ok, I am jeff :D

Didn't get time to try the new control method yet, maybe tomorrow.

darkwolf
06-30-2005, 11:15 PM
I was wondering if you could add text fading to the first script you posted here. I'm a n00b to coding, and would greatly appreciate the help.

Mr J
06-30-2005, 11:43 PM
Take a look here for a slightly enhanced version of that script.

For now it is going under the title of Text Reader 2 until I can come up with a more suitable name for it.

www.huntingground.freeserve.co.uk/style/text_reader2.htm

darkwolf
07-01-2005, 09:01 PM
Is there a simpler way, just to fade in all the text at once?

edit:: never mind . . I found it :p



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum