Home arrow HTML arrow React and ToChoose Functions for a Menu for All Browsers

React and ToChoose Functions for a Menu for All Browsers

Welcome to the sixth part of a nine-part series that shows you how to build a menu for all browsers. In this part we continue to take a look at the JavaScript functions, specifically the react() and toChoose() functions.

Author Info:
By: Chrysanthus Forcha
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
June 10, 2009
  1. · React and ToChoose Functions for a Menu for All Browsers
  2. · The Parameters of the react() function
  3. · The toChoose() Function
  4. · The toChoose() Function Continued

print this article

React and ToChoose Functions for a Menu for All Browsers
(Page 1 of 4 )

The react() Function Details

The arguments for this function are not really the ones we saw in the previous series. This function is called when the mouse pointer goes over a drop down menu or sub menu item. Each of the cells for these items has an onmouseover event attribute. One of attributes is:

onmouseover = "react('TD11','1','sub','5')"

Now let us look at the function. Here it is:

function react(ID,colNo,submenu,noRows)


//first make sure all background colors of the sub menu cells are brown.

for (i=0; i<noRows; i++)


//form the ID

theID = "TD" + i + colNo;

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


//let the background of the current sub menu cell be firebrick.

document.getElementById(ID).style.backgroundColor = "firebrick";

//remove any lower sub menu that was displayed before you display the new one

if (ID.length == 4)


else if (ID.length == 5)


//display sub menu

if (submenu == "sub")


//ID of sub table

beginslice = 2;

endslice = ID.length;

slicedStr = ID.slice(beginslice,endslice);

IDSUB = 'ST' + slicedStr;

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

document.getElementById(IDSUB).style.visibility = "visible";



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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials