Home arrow HTML arrow Drop Down Functions for a Common Browser Menu
HTML

Drop Down Functions for a Common Browser Menu


In this part of the series, we continue with the JavaScript for the main menu and its sub menus. We will first complete the explanation of the second code segment of the dropDownMenu(ID) function, and then introduce a new feature with it.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
March 27, 2009
TABLE OF CONTENTS:
  1. · Drop Down Functions for a Common Browser Menu
  2. · The Third Segment of the dropDownMenu() Function
  3. · The Third Segment of the dropDownMenu() Function Continued
  4. · The react() Function

print this article
SEARCH DEVARTICLES

Drop Down Functions for a Common Browser Menu
(Page 1 of 4 )

Second Code Segment of the dropDownMenu(ID) Function Continued

There are actually three tables whose value for the display property is "none." The first one we talked about is the Copy Table. The second one is called the Boolean Table. It has the same structure as our table of interest. Its cells are initially empty. For any cell in our table of interest that has a SPAN element displayed, the corresponding cell content in the Boolean table is "true." In this way we can always know which cell in our table has a SPAN element displayed.

The third table whose value for the display property is "none" has the same structure as our table. The table is called the Number Table. For any cell in our table of interest that has a SPAN element displayed, the corresponding cell of the Number Table is given the number part of the ID of the SPAN element displayed. There can be more than one SPAN element in a cell in our table, but only one of these SPAN elements can be displayed at any time. We use this third table to know which SPAN element is displayed in which cell of our table. These two tables and their roles are the new features I mentioned above.

You may ask why I did not use a JavaScript two-dimensional array for each of these three tables. There are two reasons: A) JavaScript 2D arrays still need to be well-developed. B) After going though this series, you may want to create a template which would make it easy for any novice to use your code. You would want the novice, without knowing what your code is doing, to type in the number of rows and columns, and then your code will create the tables. Today, this kind of thing is better done with an HTML table than with the JavaScript 2D array. DOM has properties that you can use to create rows and cells.

The aim of the second segment in the dropDownMenu() function is to clear our table of interest. If you clear what is displayed in our table, you have to clear the related contents in the Boolean and Number Tables. The last two statements in the if-block of this segment do that. Note: the Copy table is never cleared. 


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