reptile7's JavaScript blog: Text Fader 1.4

Monday, October 27, 2014

Text Fader 1.4
Blog Entry #339

Excepting a small amount of unused code, we have now worked through the Java Goodies Text Fader 1.3 script in its entirety. Over the past four entries we have made various modifications to the script, namely, we've
(a) cross-browserized the layers|style|both-gated features of the getMid( ), moveLayer( ), and changeColor( ) functions,
(b) eliminated the script's base 16 ↔ base 10 interconversion code (the convert and hexbase arrays, the value index, etc.),
(c) removed inapplicable or unnecessary style declarations, and
(d) cleaned up the fadeText( ) and changeColor( ) function call syntax.
Are there any other changes we would like to make?

More extra stuff

We haven't said anything about the script's writeOn( ) function

function writeOn(obj, str) {
	if (layers)
		with (document[obj]) {
			document.open( );
			document.write(str);
			document.close( ); }
	if (style) { eval(obj + ".innerHTML =  str"); } }

and there's a reason for that: it's never called. The writeOn( ) function's raison d'être is to load the str string into the fadeMe01|fadeMe02 div, a task already handled by the changeColor( ) function. Throw it out.

What else? The style sheet in the document head includes a

.content1 { font: 16pt Verdana, Arial, Helvetica; width: 400px; text-align: center; }

rule but there are no class="content1" elements in the document. The .content1 rule is superfluous, and can be removed, because its font, width, and text-align settings are identical to those for the style sheet's .content rule.

Deparameterization

In parameterizing the recursive changeColor( ) function we effectively set its five parameters

function changeColor(obj, str, rgb1, speed, counter) { ... }

over and over again. In point of fact, we don't need to parameterize the changeColor( ) function at all.

(0-1) If we get the obj div and assign it to a global stringDiv variable in the fadeText( ) function, then we won't need to pass obj to the changeColor( ) function. The str string can subsequently be loaded into the stringDiv div in the fadeText( ) function.

var stringDiv;
function fadeText(obj, str, rgb1, rgb2, step) { /* We'll lose the fadeText( ) speed parameter momentarily. */
	stringDiv = document.getElementById(obj);
	stringDiv.innerHTML = str; ... }

(2) If we use the decimal tempR/tempG/tempB values and an rgb( ) function to style.color the stringDiv div and its link descendants in the changeColor( ) function

stringDiv.style.color = "rgb(" + tempR + ", " + tempG + ", " + tempB + ")";

var divLinks = stringDiv.getElementsByTagName("a");

for (i = 0; i < divLinks.length; i++)
	divLinks[i].style.color = "rgb(" + tempR + ", " + tempG + ", " + tempB + ")";

// In the fadeText( ) function, initialize tempR/tempG/tempB just before the changeColor( ) call:

tempR = s2r, tempG = s2g, tempB = s2b;

changeColor( );

then we won't need to pass rgb1 to the changeColor( ) function.

(3) For all twelve fadeText( ) calls, the value of the speed parameter is 10. If you're OK with this (I'm OK with it) then instead of feeding 10/speed to the fadeText( ) and changeColor( ) functions we can either set it in the top-level code

var speed = 10;
function changeColor( ) {
	...
	timerID = window.setTimeout(changeColor, speed);
	... }

or hard-code the 10 in the recursive changeColor( ) call.

timerID = window.setTimeout(changeColor, 10);

(4) Lastly, the counter counter can be initialized to 0 in the top-level code and reset via an else counter = 0; clause that follows the if (counter < smallest) { ... } clause in the changeColor( ) function.

Separating structure and behavior

The Text Fader 1.3 movie works with a total of eight str strings (as noted in the previous post, two of the strings, "<span class='content'><b>TeXT FaDeR 1.3</b></span>" and "<span class='content'>THe ReWRiTTeN VeRSioN</span>", appear in more than one scene). I prefer to place the strings (their text+HTML) in separate divs in the document body rather than in the fadeText( ) calls.

<!-- Put these guys right after the fadeMe02 div. -->

<div id="string0" class="movieString"><span class="content"><b><a href="mailto:agent_teg@ThePentagon.com?subject=Text%20Fader%201.3">Teg WoRKz</a></b> Interactive</span><div class="small">proudly presents</div></div>

...

<div id="string7" class="movieString"><span class="content"><b>The</b> - <b>End</b>!!!</span></div>

The divs are equipped with class="movieString" attributes so that they can be zeroed out with a .movieString { display:none; } style rule. The divs have id strings that can be assigned to the fadeText( ) str parameter

function fadeText(obj, str, rgb1, rgb2, step) { ... }

...

fadeText("fadeMe01", "string0", "000000", "CCCCCC", 2);

window.setTimeout(function ( ) { fadeText("fadeMe01", "string1", "CCCCCC", "000000", 4); }, 8000);

...

in order to load the div content into the stringDiv div (vide supra) via a

stringDiv.innerHTML = document.getElementById(str).innerHTML;

statement.

Last-minute notes

• Remove the document type declaration at the beginning of the document so that older versions of IE can get the viewport dimensions with document.body.clientWidth and document.body.clientHeight.

• Most of the movie strings contain b elements, whose bolding action can be carried out by a font-weight:bold; style declaration if you're a stickler for separating structure and presentation.

/* Recast the .content style rule as: */

.content { font: bold 16pt Verdana, Arial, Helvetica; }

/* Use a separate rule for non-bolded spans: */

.content1 { font: 16pt Verdana, Arial, Helvetica; }

Moreover, it is now clear to me that the divs in those strings (e.g., <div class="small">proudly presents</div>) are not just style carriers but are also being used to cause line breaks, which rubs me the wrong way; in the next section's demo I've converted those divs to spans and inserted <br>s as appropriate.

• Keep the smallest = Math.round(smallest / step); operation in the fadeText( ) function - there's no point in resetting smallest over and over again in the changeColor( ) function.

• If you're going to keep the stopClock( ) function, then call it before calling the layout( ) function.

window.onload = function ( ) { stopClock( ); layout( ); }

Demo

A "Text Fader 1.3 : The re-written version" Google search turns up several pages that put the script into practice. These pages employ the original script code and consequently do not accommodate non-IE modern browsers. It evidently falls to us, then, to put forward a cross-browser demo.

Click the Lights, Camera, Action! button to view the Text Fader 1.3 movie.
The movie takes about a minute to run - it's over when you see
The - End!!!.

The movie takes place in an id="screenDiv" div. To position the fadeMe01/fadeMe02 divs in the screenDiv div it is necessary to give the latter a position:relative; styling.
- posted by A. Peak @ 4:36 PM

Comments: Post a Comment

<< Home

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

About Me