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.

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 ABCDEFGthetext string; before we deploy this data, however, we have to deal with some...

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*:

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

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