reptile7's JavaScript blog is Andrew Peak's personal technical writing project: it focuses on JavaScript and the analysis of JavaScript scripts, although HTML, CSS, and anything else related to coding for the Web are also fair game.

In today's post we'll discuss the Scripts that Display Text collection's "Animated Text on Status Bar" (AToSB) script, which was authored by Bart Jellema. The AToSB script codes an animation that appears to continuously move rightwards and leftwards double arrows into a central string. The AToSB animation is carried out by running separate sets of strings in and out of the beginning and ending of a window.status string, and is analogous to animations that cycle a set of images in and out of a common <img> placeholder (e.g., see the script offered by HTML Goodies' JavaScript Primers #28).

The AToSB script is posted here and its demo page is here. The script output is easily moved from the status bar to an HTML container that can be styled. Click the button below for a span-based demo that enlarges and adds some color to the original display.

There are three parts to each frame, from left to right:
(1) a four-character string that mimics one or two ⇒ (rightwards double arrow) characters by combining one or two > characters and three or two = characters;
(2) the thetext string; and
(3) a four-character string that mimics one or two ⇐ (leftwards double arrow) characters by combining one or two < characters and three or two = characters.

The frames are effectively arrayed by a step counter; note that
(a) the > characters shift from left to right and
(b) the < characters shift from right to left
as step increases from 1 to 6.

The anim( ) function calls itself every 200 milliseconds. As it iterates, anim( ) increments step and uses it to order the animation process. When step hits 7 it is reset to 1 and the frame sequence begins anew.

In the name of completeness

Between the welcometext( ) function and the anim( ) function is a showstatustext( ) function

Actually, the showstatustext( ) function isn't the only dispensable part of the AToSB script; the hellotext, started, and times variables and the welcometext( ) function are all excess baggage. Moreover, the anim( ) function can itself be substantially slimmed down.

Here is the coding approach I used in crafting the demo at the outset of the post:

(1) Initialize step to 0 as in the original script; assign the central string to thetext from the get-go; put the changing parts of the display in bona fide arrays.