Completing the React Function of a Common Browser Menu
(Page 1 of 4 )
In this eighth part of a ten-part series on building a common browser menu, we treat the last code segment of the react() function. This is the last part of the in-depth analysis we are making of the react() function.
The Seventh Code Segment Details
When you click the drop down button, the whole table is cleaned up. This means that all of the SPAN elements are replaced by the SPAN elements in the Copy Table. Recall that the SPAN elements in the Copy Table are in their original state where the value of the Display property is "none." When you click the drop down button, everything is recopied and we can say the table is cleaned up. This cleaning is done by the dropDownMenu() function.
However, when a sub menu appears, any other sub menu of the same level has to disappear; from what we have explained so far, the SPAN elements for the previous sub menus are not cleaned up. It is the seventh code segment that does this. This is the segment:
//Cleanup removes SPAN elements that are not supposed to be shown, resulting from sub menus.
//get the row no. and col. no. of the current cell ID
cellrowNo = "" + tdID.charAt(2);
cellColNo = "" + tdID.charAt(3);
//get the number of the current SPAN element displayed
spanNo = document.getElementById('TNo').rows[cellrowNo].cells[cellColNo].innerHTML;
//scan the whole table and clear elements that are not supposed to be shown
for (i=0; i<5; i++)
{
for (j=0; j<5; j++)
{
otherSpanNo = document.getElementById('TNo').rows[i].cells[j].innerHTML;
if (otherSpanNo.length > spanNo.length)
{
beginslice = 0;
endslice = spanNo.length;
slicedStr = otherSpanNo.slice(beginslice,endslice);
if (slicedStr != spanNo)
{
//form the IDs of sub menu and backup cells
IDCell = "TD" + i + j;
tdIDBack = 'TDB' + i + j;
//reset the cell content
document.getElementById(IDCell).innerHTML = document.getElementById(tdIDBack).innerHTML;
//also reset the background
document.getElementById(IDCell).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 = "";
}
}
}
}
Next: Explanation of the Seventh Code Segment >>
More HTML Articles
More By Chrysanthus Forcha
