Producing Sub Menus for a Common Browser Menu - The Matching
(Page 4 of 4 )
The next statement after the above (FTN) is an if-statement. The condition of this if-statement tests for the matching (if (FTN == rootArr[j])). Note that for each iteration of the spanArr array, FTN is developed. The rest of the statements are inside this if-block. If the test (comparison) matches, then the statements in the block are executed.
The first statement inside this block forms the ID of the cell over which the mouse pointer is hovering. The statement following is an if-statement. This if-statement verifies if we are dealing with the cell that triggered the onmouseover event by testing if its background color is firebrick. Any statement of the sixth code segment that still has to be executed is inside this if-block. Now the previous statement and this if-statement are for convenience. If matching has already occurred, you do not really need these two statements.
Next you have a for-loop. It is this for-loop that actually displays the sub menu. The for-loop iterates through the indices 0 to 4. These five numbers are for the five cells in a column that we have. A sub menu is made up of SPAN elements in consecutive cells in a table column. Not all the cells in the column have to be involved.
Do not confuse the for-loop here with the two for loops above. This one iterates through the length of the column, while the other two iterate through the lengths of their respective arrays. Also, the other two have all the statements of the sixth code segment. The one here has the statements to produce the sub menu. This one iterates through a column, and in some consecutive cells it displays SPAN elements. Of course, before it does that, other preparations have been done outside it, within the segment.
The first statement in this for-loop forms the ID for the cell at the iteration. Recall that the digits of the numbers sent for the spanArr do not include the last two. The next statement forms the ID of the SPAN element that might be in the cell. It does this by adding the row and column numbers for that cell to the matched SPAN number. It then precedes the result with "S."
A sub menu does not necessarily have SPAN elements in all the cells of a column. As we iterate though the column, we form a SPAN ID for each cell in the column. The element for that ID may not exist. Before anything else, we have to check if the element exists. This is what the next if-statement does. If the test returns true, then the statements in this if-block are executed.
The first statement in this if-block turns the background color of the cell to brown. The next statement displays the SPAN element. The statement following, sets the content of the corresponding cell in the Boolean Table to true. The next statement forms the SPAN ID number of the SPAN element just displayed. For this statement, the expression on the right hand side of the assignment (=) symbol begins with “”. This makes sure the result is a string. The number form here is complete and includes the last two digits. The last line writes this number into the corresponding cell of the Number Table.
I have finished with the detailed explanation for the sixth code segment. I'll see you in the next part of the series.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
