Home arrow HTML arrow Producing Sub Menus for a Common Browser Menu
HTML

Producing Sub Menus for a Common Browser Menu


In this seventh part of a ten-part series on building a menu that works in all browsers, we shall continue with our in-depth analysis of the react() function. This is the longest function in this series. In this part we shall treat the details of the sixth code segment.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
April 17, 2009
TABLE OF CONTENTS:
  1. · Producing Sub Menus for a Common Browser Menu
  2. · More Description of the Sixth Code Segment
  3. · The Statements of the Sixth Code Segment
  4. · The Matching

print this article
SEARCH DEVARTICLES

Producing Sub Menus for a Common Browser Menu
(Page 1 of 4 )

The Sixth Code Segment Details

Before we continue, note that when the react() function is called, the program goes through all the code segments of the function. Certain parts are not executed based on an if-condition. The react() function refers either to the drop-down menus or sub menus. Also note that drop down menus are also sub menus; I make the distinction because I want to differentiate between a sub menu got to by clicking the drop-down button and a sub menu obtained when the mouse goes over a menu item.

The fifth code segment was an if-statement. The sixth code segment is the else-if part of the fifth code segment (there is only this if-else part). The fifth code segment produces a sub menu emanating from a drop-down menu. The sixth code segment produces any sub menu after that. This is the code:


else if ((subColNo != "")&&(rootArr != ""))

{

for (i=0; i < spanArr.length; i++)

{

for (j=0; j < rootArr.length; j++)

{

FTN = spanArr[i].charAt(0) + spanArr[i].charAt(1);

if (FTN == rootArr[j])

{

//form the cell ID

tdIDR = 'TD' + FTN;

if (document.getElementById(tdIDR).style.backgroundColor == "firebrick")

{

for (k=0; k<5; k++)

{

//form the TD ID

tdIDSub = 'TD' + k + subColNo;

//form ID of SPAN

spanID = 'S' + spanArr[i] + k + subColNo;

if (document.getElementById(spanID)) //if it exist

{

document.getElementById(tdIDSub).style.backgroundColor = "brown";

document.getElementById(spanID).style.display = "block";

//indicate the cell that is displayed in the boolean table

document.getElementById('TB').rows[k].cells[subColNo].innerHTML = "true";

//indicate the first two numbers of the shown SPAN ID in the table that shows the Nos.

number = "" + spanArr[i] + k + subColNo;

document.getElementById('TNo').rows[k].cells[subColNo].innerHTML = number;

}

}

}

}

}

}

}


Recall that the if-condition of the fifth code segment tests if the argument for the subColNo parameter is not and if the argument for the rootArr parameter is . Under this condition, a sub menu is to be developed from a drop-down menu. The if-condition of the code segment above tests if the subColNo is not and if the rootArr is not also . Under this condition, a sub menu has to be developed from a previous sub menu when the mouse goes over a menu item on the previous sub menu.


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