reptile7's JavaScript blog
Friday, February 02, 2007
When We Two Ticker-Taped
Blog Entry #65

Today we examine a script with a distinctly cool effect (or at least I think so):

HTML Goodies offers three scrolling text scripts.
(1) The simplest (and best, IMO) of these scripts is the focus of Script Tips #35, #36, and #37.
In addition, the Beyond HTML : JavaScript section of HTML Goodies sports
(2) a "So, You Want A Scrolling JavaScript, Huh?" tutorial and
(3) a "So, You Want A JavaScript Ticker Tape, Huh?" tutorial
that provide such scripts.

We'll go over the Script Tips #35-37 Script in this entry. We may well return to the other two scripts at some point in the future, as they 'scream out for simplification,' if you get my drift.

The Script Tips #35-36 Script

Script Tips #35 and #36 give a script that writes a scrolling text message to the browser window's status bar. Script Tip #37 slightly modifies the Script Tips #35-36 Script so that the text scroll runs in an <input type="text"> box. The Script Tips #35-36 Script is reproduced below:

<script language="javascript">

var space = "                  "; // 18 spaces
var ScrollText = space + "Hey hey! Look at me scrollin'...";

function SBScroll( ) {

temp = ScrollText.substring(0,1);
ScrollText += temp;
ScrollText = ScrollText.substring(1,ScrollText.length);
window.status = ScrollText.substring(0,ScrollText.length);

setTimeout("SBScroll( );",100); }


Well, you're going to need something to scroll, so let's make it, Joe says in Script Tip #35. Glancing at the script, and without any deconstruction, you can probably figure out that the script's scrolling message is represented by the variable ScrollText. ScrollText comprises two parts:
(1) a "buffer" of 18 spaces is stringified and assigned to the variable space;
(2) space is then prepended to the scrolling message, in this case "Hey hey! Look at me scrollin'...".
(FYI: for its display in Script Tips #35-37, the space declaration appears in the source as:
var space = " &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;".
For executing the script, however, 18 normal spaces via the space bar are good enough for space.)

Next we have the SBScroll( ) function, which creates the scroll and puts it in the status bar. How do we trigger it? In Script Tips #35-36 (and also for Script Tip #37's modified script), Joe uses a push button and an onclick event handler:

<input type="button" value="Click me For the Scroll" onclick="SBScroll( );" />

Perhaps more conventionally and per Joe's recommendation, my demo above calls SBScroll( ) with an onload="SBScroll( );" body element attribute, as we'll see later.

The SBScroll( ) function

To more easily see what's going on, I'm going to replace space's space characters with hyphens. Going into the SBScroll( ) function, then, we have:
ScrollText = ------------------Hey hey! Look at me scrollin'...

Joe's attempted deconstruction in Script Tip #36 is hobbled by his misunderstanding of the substring( ) method of the core JavaScript String object. He correctly begins, The method substring( ) allows you to take only a portion of a text string - so far, so good - but then he confusingly adds, The way a substring( ) method works is taking the higher of two variables...the substring( ) method returns the greater of two items - this description approximately applies to the max( ) method of the JavaScript Math object, but not to the substring( ) method. The substring( ) method definition in the HTML Goodies JavaScript methods keyword reference is better but still leaves room for improvement.

The syntax of the substring( ) method is:

[var stringSubset =] stringObject.substring(indexA, indexB);

Some necessary background from Netscape's String object documentation:
You can think of a string as an array of characters. In this way, you can access the individual characters in the string by indexing that array...Characters in a string are indexed from left to right. The index of the first character is 0, and the index of the last character in a string called stringName is stringName.length - 1.

With respect to the stringObject on which it acts, the substring( ) method returns the subset of stringObject beginning at the indexA character and running to the indexB - 1 character, i.e., up to but not including the indexB character; for example:

"Hello, World!".substring(3,8);
// returns lo, W; recall that the H is the zeroth character of the string

Now that we have this sorted out, let's turn to the SBScroll( ) function and go through it line by line.

(1) temp = ScrollText.substring(0,1);
This statement assigns the zeroth character of ScrollText, - (a hyphen), to the variable temp.

(2) ScrollText += temp;
Something new! This is the first time we've used a shorthand assignment operator; the statement above is a shorthand version of:

ScrollText = ScrollText + temp;

Note the order of addition operands: x += y is equivalent to x = x + y and not x = y + x; although unimportant for arithmetic addition, the operand order is definitely important for string concatenation, our present concern. The ScrollText += temp command thus adds temp's - to the right-hand end of ScrollText, and the resulting one-character-longer string, still beginning with 18 hyphens, is reassigned to ScrollText:
ScrollText = ------------------Hey hey! Look at me scrollin'...-.

(3) ScrollText = ScrollText.substring(1,ScrollText.length);
This command effectively chops off the zeroth character of ScrollText, and the resulting string, now beginning with 17 hyphens, is reassigned to ScrollText:
ScrollText = -----------------Hey hey! Look at me scrollin'...-.
(Note that a ScrollText.substring(1,ScrollText.length-1) command would also chop off ScrollText's last character.)

(4) window.status = ScrollText.substring(0,ScrollText.length);
This statement then writes ScrollText to the browser window's status bar in a normal manner. Of course,

window.status = ScrollText;

would work just as well here.

(5) setTimeout("SBScroll( );",100);
This expression re-calls the SBScroll( ) function after a 100-millisecond time delay. In the course of ten such recursive function calls, here's what we see in the status bar:

-----------------Hey hey! Look at me scrollin'...-
----------------Hey hey! Look at me scrollin'...--
---------------Hey hey! Look at me scrollin'...---
--------------Hey hey! Look at me scrollin'...----
-------------Hey hey! Look at me scrollin'...-----
------------Hey hey! Look at me scrollin'...------
-----------Hey hey! Look at me scrollin'...-------
----------Hey hey! Look at me scrollin'...--------
---------Hey hey! Look at me scrollin'...---------
--------Hey hey! Look at me scrollin'...----------
-------Hey hey! Look at me scrollin'...-----------

In an animation-like effect, the Hey hey! Look at me scrollin'... message appears to travel from right to left, running off the left end of the status bar and reappearing to the right thereof; what we're actually seeing is a cyclical, repeating display of a string of unchanging length but changing composition - in successive displays, we pick up the 0th character, tack it onto the end of the string, and then all of the string's characters shift one position, indexwise, to the left. Do it over and over again and you've got a scroll.

A formatted scroll

(The code appearing in this and the next sections pertains to the post's original textscroll.html and leftscroll.html demos, which are now in self-contained divs.)

As noted above, Script Tip #37 provides code for putting the scroll in a text box; a benefit thereof: you can then format the scroll via some style declarations, if desired. (Maybe your computer will allow you to format status bar text - mine won't.) Here's the style block I used for my demo at the outset of this post:

input {
border-width: 0px;
color: teal;
font-family: sans-serif;
font-size: 16px;
font-weight: bold; }

Here's the demo document body HTML:

<body onload="SBScroll( );">
<input size="50" id="scrollBox" />

In the script element, the scroll is written to the text box with:

document.getElementById("scrollBox").value = ScrollText;

The demo document is itself loaded into an iframe:

<iframe width="100%" height="40" src="" frameborder="0" scrolling="no">Your browser does not support iframes. Please see Script Tip #37 for a related demo.</iframe>

West to east

A scroll that runs from right to left is appropriate for a message in a left-to-right language; recall from high school physics that if the eyes are set at the origin of an inertial frame of reference, then during the normal reading of left-to-right text, the words move to the left (i.e., in the -x direction) as they are being read. If you prefer a scroll that runs from left to right - for a message in a right-to-left language, or simply because you are, like myself, a bit of a contrarian - then this can be easily done by 'reversing' the operations of the Script Tips #35-37 Script.

Here's the script I used; its deconstruction is left to you:

<script type="text/javascript">

var ScrollText = "Here, kitty kitty kitty...                  ";

function SBScroll2( ) {

temp = ScrollText.substring(ScrollText.length-1,ScrollText.length);
ScrollText = temp + ScrollText;
ScrollText = ScrollText.substring(0,ScrollText.length-1);
document.getElementById("scrollBox2").value = ScrollText;

window.setTimeout("SBScroll2( );",100); }


<body onload="SBScroll2( );"><input id="scrollBox2" /></body>

And here's my CSS:

input {
border-width: 0px;
color: maroon;
display: block;
font-family: sans-serif;
font-size: 16px;
font-weight: bold;
margin-left: auto;
margin-right: 0px;
width: 250px; }

In our next episode, we'll tuck into the Script Tips #38-41 Script, which codes a selection-list-based menu of links.



Comments: Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)