Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org

Related items

Math functions in JavaScript

Selecting Random Numbers

Nested Splitting

Split Ends

How long is a piece of string?

Random Numbers & Random Events

Scrolling Text

You are here: irt.org | Articles | JavaScript | Text, String, and Number | Scrolling Text [ previous next ]

Published on: Saturday 26th July 1997 By: Martin Webb

Introduction

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 basic form

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.

Starting and Stopping it

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>

The scrolly thingy

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:

An advanced scrolly thingy

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.

Related items

Math functions in JavaScript

Selecting Random Numbers

Nested Splitting

Split Ends

How long is a piece of string?

Random Numbers & Random Events

Feedback on 'Scrolling Text'

©2018 Martin Webb