Sunday, April 06, 2014
A Visit to the Visible Region, Part 1
Blog Entry #315
For at least the next two entries we will discuss the Java Goodies "Color Gradient Text" script. Authored by "commoner" in the spring of 1998, the Color Gradient Text script applies a discontinuous spectrum of colors to a text string.
You can grab the Color Gradient Text script here or here. The script's effect looks best on a dark background - check out this page or this page.
gradient( ) overview
The Color Gradient Text script is set in motion by a gradient( ) function, whose calls have the following form:
gradient("This is the text string to be colored ...", "hexcode0 hexcode1 hexcode2 ...");(1) The first gradient( ) argument is a text string of ASCII characters; if present, markup and character references are not acted on but are printed out literally.
(2) The second gradient( ) argument is a string of space-delimited hexadecimal RRGGBB color values not prefaced by hash (#) marks; other color value formats (color keywords, three-digit RGB values, rgb( ) functions) are not acceptable.
The script puts four gradient( ) calls in a script element in a centered div in the document body. Here's the first of those calls:
gradient("always wanted to be a genius?", "ff0000 ffffff 0000ff");The
ff0000, ffffff, and 0000ff values are for the colors red, white, and blue, respectively. The script sequentially runs the 29 characters of the "always wanted to be a genius?" string through a red-to-white-to-blue 'continuum':• The starting lowercase a is pure red.
• The subsequent characters progressively become less red and more white culminating in a pure white t in the middle of the string.
• The subsequent characters progressively become less white and more blue culminating in a pure blue ? at the end of the string.
String lows and highs
If the text string has only one character, then that character will be painted the first RRGGBB color (
hexcode0) as opposed to a blend of the RRGGBB colors. If the color string has only one value, then the text string will be given the default foreground color and not the hexcode0 color. Otherwise there really aren't any restrictions on the lengths of the text and color strings, but as a practical matter the number of colors must be less than the number of text characters in order to see a gradient effect.Pre-color
The gradient( ) calls are preceded by some top-level code that is in fact unnecessary, but let's talk about it anyway, shall we? The script's executable JavaScript begins with some browser sniffing:
var browser = "unknown"; var version = 0;
if (navigator.userAgent.indexOf("Opera") >= 0) browser = "opera";
else if (navigator.userAgent.indexOf("obot") >= 0) browser = "robot";
else if (navigator.appName.indexOf("etscape") >= 0) browser = "netscape";
else if (navigator.appName.indexOf("icrosoft") >= 0) browser = "msie";
version = parseFloat(navigator.appVersion);
if (isNaN(version)) version = 0;
if ((browser == "msie") && (version == 2)) version = 3;The browser and version flags were meant to weed out very early/
unrecognizedbrowsers whose JavaScript implementations were not up to snuff at the time. However, all of the script's features have specification-wise been in place from JavaScript 1.1 onward, and there is no need to hold onto any of the above statements. Be that as it may:
• Opera's navigator.userAgent string no longer contains "Opera" but its navigator.appName string does contain "etscape", i.e., Opera currently identifies as Netscape, as does Firefox and Safari.
• Go here for the current parseFloat( ) page and here for the current isNaN( ) page in the Mozilla JavaScript Reference.
• For all of the common browsers, the number at the beginning of the navigator.appVersion string generally does not correspond to the actual browser version: for example, on my computer Firefox 25.0.1's navigator.appVersion return is 5.0 (Macintosh). (I don't know if there are any browsers out there whose appVersion value does not begin with a number.) But again, this is code that we will be throwing out.
Subsequently the script creates an array of two-digit hexadecimal number strings running from "00" to "ff", inclusive:
var tohex = new Array(256);
var hex = "0123456789abcdef";
var count = 0;
for (x = 0; x < 16; x++) {
for (y = 0; y < 16; y++) {
tohex[count] = hex.charAt(x) + hex.charAt(y);
count++; } }The tohex array will later be used to build RRGGBB values for coloring the characters of the gradient( ) text string; however, we'll see that those characters can be colored more simply via a decimal rgb( ) function.
Past the sell-by date
Before we get to the script's functions, I want to briefly comment on the advertising banner code that appears at the beginning of the document body:
<body bgcolor="black" text="white" link="2070ff">
<!-- Begin Advertising Banner -->
<center>
<a href="http://adforce.imgis.com/?adlink|2|5823|621|1|IMGIS" target="_top">
<img src="http://adforce.imgis.com/?adserv|2|5823|621|1|IMGIS"
border="0" height="60" width="468" naturalsizeflag="0" align="bottom" alt="Another Wonderful HTML Goodies Advertiser"></a>
<p><hr width="60%"><p>
</center>
<!-- End Advertising Banner -->• URLs should not contain unescaped pipe (|) characters.
• The nonstandard naturalsizeflag attribute is an HTML editor 'artifact' - read about it here. (Real coders do not use HTML editors, but you knew that, right?)
• You wouldn't expect the
src="http://adforce.imgis.com/?adserv|2|5823|621|1|IMGIS" image to still be available, and it isn't. Modern browsers apply the body's 2070ff link color to the image alt text.gradient( ) intro
We're ready to get the gradient( ) action under way. The text string and color string arguments are given the identifiers thetext and thecolors, respectively:
function gradient(thetext, thecolors) { ... }The browser first goes through the following gate:
if (((browser == "netscape") || (browser == "msie") || (browser == "opera")) && (version >= 3.0)) {
... }
else document.write(thetext);The gradient( ) function then calls on ColorList( ) and ColorCode( ) functions to separate and decimalize the RR, GG, and BB parts of the thecolors colors - this code deserves its own entry so we'll deal with it next time.
- posted by A. Peak @ 12:59 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)