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] + " "))
}
<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")
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()\">"
How to get this routine to work as part of template
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.
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
Last edited by vwphillips; 06-05-2005 at 11:04 AM..
<!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>
Last edited by vwphillips; 06-05-2005 at 02:55 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.
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
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)
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 ??
but will need to get the page to scroll for the text to remain in view
PHP Code:
<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>
Last edited by vwphillips; 06-06-2005 at 08:18 AM..
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)
}
Before you post, read our: 
Array - Add Delay between Elements
