Drop Down Functions for a Common Browser Menu
(Page 1 of 4 )
In this part of the series, we continue with the JavaScript for the main menu and its sub menus. We will first complete the explanation of the second code segment of the dropDownMenu(ID) function, and then introduce a new feature with it.
Second Code Segment of the dropDownMenu(ID) Function Continued
There are actually three tables whose value for the display property is "none." The first one we talked about is the Copy Table. The second one is called the Boolean Table. It has the same structure as our table of interest. Its cells are initially empty. For any cell in our table of interest that has a SPAN element displayed, the corresponding cell content in the Boolean table is "true." In this way we can always know which cell in our table has a SPAN element displayed.
The third table whose value for the display property is "none" has the same structure as our table. The table is called the Number Table. For any cell in our table of interest that has a SPAN element displayed, the corresponding cell of the Number Table is given the number part of the ID of the SPAN element displayed. There can be more than one SPAN element in a cell in our table, but only one of these SPAN elements can be displayed at any time. We use this third table to know which SPAN element is displayed in which cell of our table. These two tables and their roles are the new features I mentioned above.
You may ask why I did not use a JavaScript two-dimensional array for each of these three tables. There are two reasons: A) JavaScript 2D arrays still need to be well-developed. B) After going though this series, you may want to create a template which would make it easy for any novice to use your code. You would want the novice, without knowing what your code is doing, to type in the number of rows and columns, and then your code will create the tables. Today, this kind of thing is better done with an HTML table than with the JavaScript 2D array. DOM has properties that you can use to create rows and cells.
The aim of the second segment in the dropDownMenu() function is to clear our table of interest. If you clear what is displayed in our table, you have to clear the related contents in the Boolean and Number Tables. The last two statements in the if-block of this segment do that. Note: the Copy table is never cleared.
Next: The Third Segment of the dropDownMenu() Function >>
More HTML Articles
More By Chrysanthus Forcha
