Scripting a Common Browser Menu

In this section I give you the details of the dropDownMenu(ID) function. To be specific, I explain the details of the three code segments above.

First Code Segment Details

For this first code segment, all you have is:

subMenuJustClicked = true; //do not want to remove the sub menu

This is a global variable that is set to true. It is used by the removeSubMenu() function, which removes the sub menu. The removeSubMenu() function has to know if the click is coming from the BODY element alone, or if it is coming from the sub menu and the BODY element. When this variable is true, the removeSubMenu() function does not remove the sub menu.

Note that when you click the drop down button, the BODY element also receives a click. Whenever the BODY element receives a click, the removeSubMenu() function first checks to see if this variable is set to true. If it is false, it removes the sub menu.

If this variable did not exist, the removeSubMenu() function would remove any sub menu that was displayed. Under this condition, the sub menu will appear and disappear, since the BODY also received a click when the drop down button was clicked. So the first thing the dropDownMenu(ID) function does is set this variable to true. In that way, a sub menu will only be removed when this variable is false.

Second Code Segment Details

The second code segment is:

//first un-show all the SPAN elements in the DIV and reset the table cells

for (i=0; i<5; i++)

{

for (j=0; j<5; j++)

{

//form the IDs of sub menu column and backup cells

tdIDCol = 'TD' + i + j;

tdIDBack = 'TDB' + i + j;

//replace the content of the table cell with that of the backup table cell

document.getElementById(tdIDCol).innerHTML = document.getElementById(tdIDBack).innerHTML;

//make the background of the cell, transparent

document.getElementById(tdIDCol).style.background = "transparent";

//reset the Boolean and SPAN number tables as well

document.getElementById('TB').rows[i].cells[j].innerHTML = "";

document.getElementById('TNo').rows[i].cells[j].innerHTML = "";

}

}

The content of each table cell is one or more SPAN elements. When the page is opened, the value of the CSS display property of all of these SPAN elements in all of the cells is "none." Exact copies of these SPAN elements with the value "none" are in the Copy Table. This segment copies the SPAN elements from the Copy Table to our table, at their respective positions. In that state, the SPAN elements do not occupy space.

Each time we make the value of the display property of a SPAN element, "block" we also give the background of the corresponding cell a color. When a cell has a color, that cell is no longer transparent. So this segment makes the background of all the cells transparent. In this way, the whole table becomes transparent. Its DIV element is always transparent. This segment effectively clears the area for all the sub menus. That is its purpose.

As I said in part one, the code I give you in this series works with Internet Explorer, Mozilla Firefox and Netscape very well without any code segment specialized for any of these brands. Statistics have shown that the majority of users use one of these three browsers, with Internet Explorer taking the greater share (of users). The aim of this series is to have code that will work for most browsers. I tested the code with Internet Explorer 6, Mozilla Firefox 2 and Netscape 8.

It is time to take a break. We'll resume in the next part of the series.