reptile7's JavaScript blog: Gradient Finale

Thursday, May 01, 2014

Gradient Finale
Blog Entry #319

Today's post will complete our deconstruction of the Java Goodies "Color Gradient Text" script. In the previous post we called on the script's interpolate( ) function to calculate decimal rgb(rr, gg, bb) color values for the characters of the ABCDEFG thetext string; before we deploy this data, however, we have to deal with some...

Opera strangeness

The interpolate( ) calls are followed by the following if statement:

if (browser == "opera") {
	rr = 255 - rr;
	gg = 255 - gg;
	bb = 255 - bb; }

The preceding code would 'invert' the interpolate( ) rr/gg/bb settings if the user's browser had been identified as Opera at the beginning of the script. I have absolutely no idea why we would want to do this. Throw it out.

FWIW

As noted in the Pre-color section of Blog Entry #315, Opera passes the script's navigator.appName.indexOf("etscape") >= 0 test, i.e., it identifies as Netscape. However, we can in fact flag Opera qua Opera via the OPR in its userAgent string*:

if (/OPR/.test(navigator.userAgent)) browser = "opera";

/* The test( ) method of the RegExp object is documented here. */

*Opera has quietly dropped support for the window.opera object, BTW.

Here's what the display would look like if the browser == "opera" if condition returned true:

ABCDEFG

I don't think we want that.

Get it on the page

The thetext characters are colored and written to the page with:

document.write(thetext.charAt(i).fontcolor(tohex[rr] + tohex[gg] + tohex[bb])); } // End of for loop

The tohex array was previously detailed in the Pre-color section of Blog Entry #315 (vide supra). The rr/gg/bb values are plugged into the tohex array to get the values' two-digit hexadecimal string equivalents, e.g., tohex[255] outputs "ff", tohex[170] outputs "aa", and tohex[85] outputs "55". The tohex outputs are concatenated to give a (#-less) RRGGBB color value, which is applied to the charAt(i)^th character via a fontcolor( ) operation. Finally, a document.write( ) operation prints out the newly colored character.

An alternative rendering

The original rendering leaves a lot of room for improvement.
• The fontcolor( ) method's HTML reflection, the font element, is deprecated: we should be using some sort of CSS operation to color the thetext characters.
• The tohex thing is unnecessary: we can color the thetext characters with the rr/gg/bb values just as they are.
• The document.write( ) commands require us to commingle structure and behavior: the script's code will be easier to read and maintain if we can separate its HTML and JavaScript.
A bit of cleanup is in order, wouldn't you say?

Rather than put the display in a single div, let's cue up a set of four empty divs for the four thetext strings. The divs can be coded normally

<div id="div0"></div>

<div id="div1"></div>

<div id="div2"></div>

<div id="div3"></div>

and styled at will at a later point.

The gradient( ) calls can be placed in a window.onload-triggered function and equipped with arguments[2]s

window.onload = function ( ) {
	gradient("always wanted to be a genius?", "ff0000 ffffff 0000ff", "div0");
	gradient("...well...do it, in...", "444444 dddddd 444444", "div1");
	gradient("snazzy, eye-catching, gradient colors!","ff8888 ffff88 88ff88 88ffff 8888ff ff88ff", "div2");
	gradient("but, um, just be careful not to overdo it", "884488 444488 448888 448844 888844 884444", "div3"); }

that will allow us to direct the outputted colored strings to the empty divs.

function gradient(thetext, thecolors, divID) {
	...
	document.getElementById(divID).innerHTML = colorString; }

The colored strings can be built with:

var colorString = "";
for (i = 0; i < numchars; ++i) {
	...
	colorString += "<span style='color:rgb(" + rr + ", " + gg + ", " + bb + ");'>" + thetext.charAt(i) + "</span>"; }

Each thetext character is placed in a separate span element in order to style it. The CSS coloration of an element with an rgb( ) function is treated here in the CSS 2.1 Specification.

OK, gradient("ABCDEFG", "ff0000 ffffff 0000ff"); was a pretty simple example. But you now have the tools to work through the original gradient( ) runs or another gradient( ) run of your liking.

At this point I would ordinarily offer you a gradientdemo.html demo based on the new-and-improved code we've developed over the last several entries. However, I canceled my EarthLink Dial-Up Service a few weeks ago and I do not have server space to which I can FTP files as of this writing - a situation I hope to rectify in the not-too-distant future. Frustratingly, I cannot upload a demo to Blogger itself: Blogger does allow me to upload images and videos but (as far as I am aware) not *.html files. Having said all this, I trust you're up to the task of crafting your own demo if you want to do that.
- posted by A. Peak @ 4:05 PM

Comments: Post a Comment

<< Home

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

About Me