Home arrow HTML arrow Page 3 - Producing Sub Menus for a Common Browser Menu

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
  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

Producing Sub Menus for a Common Browser Menu - The Statements of the Sixth Code Segment
(Page 3 of 4 )

The main statement for the sixth code segment is an else-if-statement. Its condition tests if subColNo is not and if rootArr is not . If the two results are true, it means that we have to produce a sub menu from a previous sub menu, so the statements in this else-if-block are executed.

The first statement in the block is a for-loop. Another for-loop is immediately nested in this for-loop. The two for-loops are used to arrive at a match. For each iteration of the outer for-loop, all the iterations of the inner for-loop are carried out. The outer for-loop iterates through the length of the spanArr array. The spanArr array has all the numbers for the SPAN elements that would give us the sub menu. The inner for-loop iterates through the length of the rootArr array. The rootArr has the possible roots, but matching has to occur for the SPAN element appropriate for the sub menu table cell to be identified.

Now, for the SPAN element that has to be displayed in a particular cell, the third and fourth digits from the end of the SPAN number have to be the same as the two digits (first and second) of the root number. This is the matching that has to occur. You can work this out using the method we used to give the numbers to the SPAN IDs; remember that the last two digits are not sent for the spanArr.

Well, in our example we do not have any SPAN number with more than six digits. So I compared the first and second digit of the SPAN numbers with the root numbers. In our example the first and second SPAN numbers are the same as the third and fourth SPAN numbers, counting from the end of the number. I did this for simplicity. In your project you would have to write extra code to obtain the third and fourth numbers, counting from the end.

In our example the first statement after the inner for-loop obtains the first and second SPAN number. The statement obtains them in the form of characters, concatenate them to form a string of two characters and assigns the result to the FTN variable. FTN is a string.

Note that all of the statements in the two for-loops are executed for each iteration of either of the for-loops. The number of iterations of either for-loop depends on the length of the corresponding arrays sent (spanArr for the outer and rootArr for the inner). If the length of spanArr is m and that of rootArr is n, then you have mn iterations; all possible combinations are tested.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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