React and ToChoose Functions for a Menu for All Browsers - The Parameters of the react() function
(Page 2 of 4 )
The first parameter, ID, is for the ID of the cell on which the mouse pointer is sitting. If the mouse pointer is sitting on a cell that is in a drop down menu, then the second parameter, colNo, is the column number of the main table with the drop down menu. If the cell is in a sub menu, then colNo is the number part of the ID of the Table (nesting) with the sub menu.
The submenu parameter can take the word "sub" or be empty. If the onclick attribute (calling function) has the word "sub" for this argument, it means that the cell has the character ‘>’ and should give rise to a sub menu. So, when the react() function sees "sub" it knows that it has to produce a corresponding sub menu.
The last parameter, noRows, is the number of menu items (rows) of the sub menu that have the cell on which the mouse pointer is sitting, not the number of menu items of the sub menu to be generated.
The Statements of the react() Function
The react() function first of all makes sure the background colors of all the cells of the table are brown. It uses a for-loop and the ID of the cell that triggered the event for this. The noRows parameter gives us the number of iterations. The first statement in the for-loop forms the ID of the current cell using the iteration index and the colNo argument. The next statement in the for-loop gives the brown color.
The statement after the for-loop gives the firebrick color to the background of the cell on which the mouse pointer is sitting. With this process, only one cell in a table will always have the firebrick color.
Next we have an if-else-if statement. If the length of the ID of the cell that triggered the event (called the react() function) is four characters, then the number part of the ID has two digits. It means the cell is in a drop down menu. So any sub menu has to be removed. In our example, the sub menus are of two different levels. For the first level, the number part of the table ID has two digits. For the second level, the number part of the table ID has three digits.
The if-statement checks if the length of the ID of the cell that triggered the event is 4 characters. If it is, it calls the remove2NumID() function, which will in turn call the remove3NumID() function. In that way, any table whose ID has a number part equal to or greater than 2 digits will be removed.
The else-if part checks if the length of the ID is 5 characters long. If this is the case, it means that the number part of the ID has three digits. It means the cell is in a first level sub menu. So any second level sub menu has to be removed. This is done by calling the remove3NumID() function. With this process, any unwanted sub menu that was previously displayed is removed. If any previous sub menu is to be re-displayed, then that will be achieved by the next statement in the react() function.
The next statement displays the sub menu if, in the call of the react() function, the third argument is "sub." We have an if-statement here. The if-statement tests to see if the argument is "sub." If it is, then the relevant sub menu is displayed by executing the statements in the block of the if-statement.
In the block, the ID of the table to be displayed has to be formed. The ID of this table begins with "ST." The number part of this ID is the same as the number part of the cell that triggered the event. In order to get the number part of this cell, we use the JavaScript "slice" method of the string object.
The first statement in the if-block declares the variable for the value where slicing will begin. The ID is a string; it begins with "TD." So slicing has to begin at the index value of 2. So 2 is assigned to this variable. After the "TD" characters of the cell ID, the rest of the characters are digits. So slicing has to end at the end of the ID (string). The second statement of the block declares a variable for this and assigns the length of the ID string to it.
The next statement in the block does the slicing and assigns the returned number to the slicedStr variable. The next statement forms the ID of the table (nesting) to be displayed. The statement after that displays the sub menu table.
Now the last statement sets the value of the visibility property of the displayed sub menu table to "visible." This statement is only obligatory if you used the "hidden" statement in the places we mentioned before.
Next: The toChoose() Function >>
More HTML Articles
More By Chrysanthus Forcha
