HTML Goodies: Script Tip: Week 81
WEBINAR: On-demand Event
Replace Oracle with the NoSQL Engagement Database: Why and how leading companies are making the switch REGISTER >
This script was sent to me to use as a tip. I really liked it the first time I saw it. Yeah, I'm 35, but bright lights and lots of color still make me happy. The script itself is a lot more interesting than the effect suggests. The coding is compact and gets the job done quickly.
This is actually two scripts. I want to begin with the bottom script. That's the one that has all of the display text.
<!-- Start hiding
ColoredText("This is a text sample written using the function ColoredText");
ColoredText("Another text sample, this time only with red and orange repeatedly","red","orange");
ColoredText("Another sample with shades of green","#006000","#007000","#008000","#009000","#00A000","#00B000");
document.write ("</H1><BR><BR><CENTER><FONT FACE=courier SIZE=+2>")
ColoredText("Try refreshing the page a couple of times!");
// Stop hiding -->
I can't stress enough that the code above is truncated. see how some of the long lines break into two lines? When you run this on your system, the lines must all be one one line as it shows in the script.
What is on this page is for display purposes only.
OK, you can see that this is both the text on the page and a script. Notice that the text that appears on the page is enclosed in a function's instance. The concept is that the text within the instance will be displayed on the page only after the function ColoredText() has had the opportunity to act upon it.
Notice also that the HTML commands that will alter the text are not included with the text. Those HTML tags are contained within document.write commands. They had to be. This is a script, remember. Without the document.write, the script wouldn't know what to do with the text and you'd get an error.
If you tried to put the tags inside the ColoredText() instance, the script wouldn't see them as tags but rather as text to be altered. The concept of tags outside of the text is pretty easy to follow. Notice all of the beginning tags are in the document.write before the text and all of the end tags are in the document.write after the text.
No big deal. Moving along...
If you look at the first ColoredText() line of text, you see that it's just text with nothing following it. Yet, the next two lines of text do have something following it. It may seem odd at first, but the text that had nothing following it is the most colorful.
The second line has "red" and "orange" afterwards. Note the displayed text is only red and orange.
The next line has a series of green hex codes; this the text is in shades of green.
Rule of Thumb: The more colors you offer after the text, the more colorful your text will be. The more shades of the same color you offer, the more smoothly your text will appear to flow. If you put in 50 differe colors of green from lightest to darkest, you're text will gradiate through that spectrum.
What are those colors?
They're arguments. See the format? First you have text in double quotes, then a list of elements, in this case colors, in double quotes one after the other.
Want more information about text?
Search the Web.
Now, that's helpful.
So now we have four lines of text, two of which have arguments so we know what color they're going to be. But how does that code that has no arguments get to be so darn colorful?
Next Week: The Colorful Non-Argument Text
Do YOU have a Script Tip you'd like to share? How about suggesting a Script Tip to write about? I'd love to hear it. Write me at: