reptile7's JavaScript blog
Thursday, June 19, 2014
 
A String Movie
Blog Entry #324

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.

What do you think of this?



Script deconstruction

The script begins by initializing five variables.

<script language="javascript">
var hellotext = "What do you think of this?";
var thetext = "";
var started = false;
var step = 0;
var times = 1;


Loading the page

<body bgcolor="white" onload="welcometext( );">

calls a welcometext( ) function.

function welcometext( ) { times--; if (times == 0) { if (started == false) { started = true; window.status = hellotext; window.setTimeout("anim( );", 1); } thetext = hellotext; } }

The welcometext( ) function decrements times to 0, switches started to true, writes the hellotext string to the status bar, triggers an anim( ) function, and copies the hellotext string to thetext. BTW, the minimum window.setTimeout( ) delay is 4 milliseconds.

The anim( ) function assembles the 'frames' of the AToSB animation and sequentially loads them into the status bar.

function anim( ) { step++; if (step == 7) { step = 1; } if (step == 1) { window.status = ">===" + thetext + "===<"; } if (step == 2) { window.status = "=>==" + thetext + "==<="; } if (step == 3) { window.status = ">=>=" + thetext + "=<=<"; } if (step == 4) { window.status = "=>=>" + thetext + "<=<="; } if (step == 5) { window.status = "==>=" + thetext + "=<=="; } if (step == 6) { window.status = "===>" + thetext + "<==="; } window.setTimeout("anim( );", 200); }

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

function showstatustext(txt) { thetext = txt; window.setTimeout("welcometext( );", 4000); times++; }

that is never called and can be thrown out.

Prune it

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.

var step = 0;
var thetext = "What do you think of this?";
var leftArray = [">===", "=>==", ">=>=", "=>=>", "==>=", "===>"];
var rightArray = ["===<", "==<=", "=<=<", "<=<=", "=<==", "<==="];


(2) Cue up an animSpan span container to hold the display. Get the animSpan span and set the anim( ) function in motion when the page loads.

var animSpan, animID;
window.onload = function ( ) { animSpan = document.getElementById("animSpan"); animID = window.setInterval(anim, 200); }
...
<span id="animSpan"></span>


(3) Recast the anim( ) function as:

function anim( ) { animSpan.textContent = leftArray[step] + thetext + rightArray[step]; step = (step < 5) ? (step + 1) : 0; }

See? No need for all those if statements once step-synchronized leftArray and rightArray arrays are in place.

"What about the color?"

Oh yeah - I did that with:

animSpan.innerHTML = leftArray[step].fontcolor("red") + thetext + rightArray[step].fontcolor("blue");

Comments: Post a Comment

<< Home

Powered by Blogger

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