Scripper…
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.
So, take a look, smile at how impressive it is, and then come back to see how it all gets put together.
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”,
“Testing”,
“Windows”,
“Assembly”,
“Data Base”,
“Statistical”,
“Graphical”,
“Text”,
“Spreadsheet”,
“Command”];
var nCols = 4;
var bgColor = “Yellow”;
var fgColor = “Black”;
We begin with an array of titles. The author didn’t feel the need to hand number each element because they will be called on later by a loop. JavaScript has numbered them already, so it’ll just stay that way.
Note that each is a text string (the double quotes) and separated by a comma.
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:
A new array is starting. The array will be named “Text” and there will be ten elements to it. What you are looking at here is element number one. Remember that JavaScript starts counting at zero, so this is number one.
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.
Note the text must be contained within quotes or JavaScript will see it as a command. The numbers can sit just as you see them. Yes, you could put them in quotes, but there’s no need.
There are two very small functions that will call up and then lose the pop-up tables. They look like this:
function eShow(name)
{
document.all(name).style.display = “inline”;
}
function eHide(name)
{
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: jburns@htmlgoodies.com. |
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
