Home arrow HTML arrow Completing the React Function of a Common Browser Menu
HTML

Completing the React Function of a Common Browser Menu


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.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
April 24, 2009
TABLE OF CONTENTS:
  1. · Completing the React Function of a Common Browser Menu
  2. · Explanation of the Seventh Code Segment
  3. · Explanation of the Seventh Code Segment Continued
  4. · Cleaning Up for Previous Sub Menus

print this article
SEARCH DEVARTICLES

Completing the React Function of a Common Browser Menu
(Page 1 of 4 )

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 = "";

}

}

}

}



blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials