LanguagesJavaScriptPop Up Tables

Pop Up Tables content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.


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’s Effect

Here’s the Code


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",
      "Data Base",

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:

Text = new Array(10);
//       Language     Years Last Used   Bold
//       -----------  ----- ---------   ----
    Text[0] = new Array(
         "C",         13, "Current", 1,
         "C++",        5, "Current", 1,
         "FORTRAN",   30, 1986,      1,
         "BASIC",     20, 1987,      1,
         "PROLOG",     1, 1990,      1,
         "ADA",      1/2, 1985,      0,
         "LISP",       2, 1975,      0,
         "PL/1",       1, 1978,      0,
         "APL",        2, 1971,      0,
         "COBOL",    1/4, 1967,      0);

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 stays 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 Time: Build the Table!

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories