You are here: irt.org | Articles | JavaScript | Text, String, and Number | Scrolling Text [ previous next ]
Published on: Saturday 26th July 1997 By: Martin Webb
This article will not describe how to add scrolling text to the status bar. I hate them, anyway theres plenty of copies floating around for you to copy. If you really must have a scrolling status bar, then go search on http://www.yahoo.com/ for one.
Instead this article will describe how to scroll text within a textfield and - more importantly - how to let the user stop it scrolling.
It has been observed that a moving item on a web page distracts the attention of the visitor - and can become annoying. Therefore please think twice before using any of the following of your pages.
The example shown here will use the following basic form:
<FORM NAME="scrolling" onSubmit="return false"> <INPUT NAME="textbox" TYPE="TEXT" SIZE="40" VALUE=""> <INPUT TYPE="BUTTON" VALUE=" # "> <INPUT TYPE="BUTTON" VALUE=" > "> </FORM>
The # button will stop the scrolling text using an onClick event handler, and the > button will restart the scrolling text using another onClick event handler.
To ensure that the form is not accidently submitted by the visitor pressing enter whilst the text box has focus, we return false within the onSubmit handler event.
To enable the scrolling text to be stopped and restarted we need to use a global JavaScript variable scroll with its initial value set to true:
<SCRIPT LANGUAGE="JavaScript"><!-- var scroll = true; //--></SCRIPT>
The basic form now needs to be amended to include the onClick event handlers which will set the:
<FORM NAME="scrolling" onSubmit="return false"> <INPUT NAME="textbox" TYPE="TEXT" SIZE="40" VALUE=""> <INPUT TYPE="BUTTON" VALUE=" # " onClick="scroll = false"> <INPUT TYPE="BUTTON" VALUE=" > " onClick="scroll = true;scrollit1()"> </FORM>
All we need now is some JavaScript code to place some text in the text box and then just scroll it. The following code which can be placed in between the <HEAD> and </HEAD> html tags needs a trigger for it to start. This can be accomplished by placing an onLoad event handler within the <BODY> html tag, e.g.:
<HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
var scroll = true;
var scrollingText = "Favourite Authors: Robert Heinlein, " +
"Terry Pratchett. Favourite Artists: " +
"Chris Rhea, Annie Lennox." +
" ";
function scrollit1() {
if (scroll) {
document.scrolling.textbox.value = scrollingText;
scrollingText = scrollingText.substring(1) +
scrollingText.substring(0,1);
}
setTimeout('scrollit1()',100);
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="scrollit1()">The text we want to scroll is paced in scrollingText. If the text is too long (e.g. over 255 characters) some of the older browsers will choke, therefore it is necessary to split the string up and then concatenate the parts together using the + operator.
The scrollit1() function when invoked, first checks that scroll is set to true, and is it is will initially set the value of the textbox field in the scrolling form to the value held in the scrollingText variable.
The next line then uses the substring method to take all the characters except the first of the scrollingText variable plus the first character, and then place this back into the scrollingText variable.
For example, if the scrollingText variable contains the following:
ABBBBBBBBBBBBBBBBBBBBBB
The following the string manipulation it will contain the following:
BBBBBBBBBBBBBBBBBBBBBBA
We then use the setTimeout() function to invoke the scrollit1() function in a further 100 milliseconds (i.e. a tenth of a second later).
If the visitor presses the # button then scroll is set to false, which means that the updating of the textbox field and the string manipulation is not performed. If the visitor presses the > button then scroll is set to true, which means that the scrolling we recontinue where it left off.
The reason why it recontinues, is that the timer set running by setTimeout is continually reset within the scrollit1 function regardless of the value of scroll.
When added to a page the scolling text utility looks like this:
The following example adds more features:
<HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
var scroll2 = true;
var myDir = 'R';
var scrollingText2 = "Favourite Authors: Robert Heinlein, " +
"Terry Pratchett. Favourite Artists: " +
"Chris Rhea, Annie Lennox." +
" ";
function scrollit2() {
if (scroll2) {
document.scrolling2.textbox.value = scrollingText2;
if (myDir == 'L')
scrollingText2 = scrollingText2.substring(1) +
scrollingText2.substring(0,1);
else
scrollingText2 = scrollingText2.substring(scrollingText2.length-1,scrollingText2.length) +
scrollingText2.substring(0,scrollingText2.length-1);
setTimeout('scrollit2()',100);
}
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="scrollit2()">
<FORM NAME="scrolling2" onSubmit="return false">
<INPUT TYPE="BUTTON" VALUE=" < " onClick="scroll2 = true;myDir = 'L';scrollit2()">
<INPUT NAME="textbox" TYPE="TEXT" SIZE="40" VALUE="">
<INPUT TYPE="BUTTON" VALUE=" # " onClick="scroll2 = false">
<INPUT TYPE="BUTTON" VALUE=" > " onClick="scroll2 = true;myDir = 'R';scrollit2()">
</FORM>When added to a page this enhanced scolling text utility looks like this:
One rather niffty feature produced as a result of the way this 2nd scrolling text utility is coded, if you reclick on one of the < or > buttons the speed of the scrolling text increase. This is because another instance of the setTimeout timer is started.
How long is a piece of string?
Random Numbers & Random Events