HTML Goodies: Script Tip: Week 92
This script amazed me the first time I saw it. I was very impressed with not only the roll overs but the full tables that popped up. The author, Peter C. Trenholme used the effect on his online resume. You'll notice the example is made up of his programming expertise.
The script is in a format that is hard to display in HTML, I have set the script to display using <XMP> tags. If the script renders rather than displaying, look at the source code.
Like all other very large scripts, there's no easy way to attack it. This script has HTML in it. That's where I usually start, but since the HTML is rendered by the script, we'll simply start from the very top and get some variable names out of the way:
Titles=[ "General Programming",
var nCols = 4;
var bgColor = "Yellow";
var fgColor = "Black";
The variable "nCols" represents the number of columns in the pop up tables. (But there are only three displaying! - Just wait.)
The variables "bgColor" sets the background of the pop up tables and "fgColor" sets the color of the text that appears in the pop up table.
I need to keep the next blip of code in the same format as the code shows. It won't be red because I'm using the <XMP> flags to display it:
The array is a series of lines, each themselves broken into four parts. Notice there are ten lines in the first array element. Each of those lines has four elements, the name of the programming language, how many years the author has known the language, last time he used it, and then if he wants the line bolded or not.
Later on, you'll understand that the number one means bold.
Now do you see why "nCols" reads four, but three display? One is only there to set the text to bold.
That format is followed again and again through the next nine array elements. The number of lines may vary, but the four elements in each line stay the same throughout.
There are two very small functions that will call up and then lose the pop-up tables. They look like this:
document.all(name).style.display = "inline";
document.all(name).style.display = "none";
The first, eShow(name) is triggered when the mouse passes over the blue link. The effect is that "name" (which will become "Titles" next week) is to display inline. in plain English, it'll show up.
The second function, eHide(name), does the same thing except it sets the display to "none". That loses the table.
OK, we know all the part, next week we'll build the table that first displays on the page. You'll also learn how the number one sets text to bold.
Next Week: Build the Table!
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: