rollover menu code help

[kneebar]

I am working on a javascript menu system which is a modification of Dieter Bungers collapsible/expandable menu system (please see:

http://www.siteexperts.com/tips/techniques/ts01/index.htm).

The menu system uses 3 frames: one on the left hand side of the web page that acts as the main source of navigation, a target frame where all the resulting pages will reveal themselves, and another frame located at the top of the target.

It is this 3rd frame which I am trying to create a synchronized menu system. This menu system will consist of Bunger’s collapsible menu system in the left frame and another dynamically generated rollover menu system on the top frame. This top frame will reveal all the sublmenu items immediately under the item clicked on in the left frame of the collapsible menu. When these submenus are rolled over, they will in turn generate all the submenu items that they may contain.

I have almost completed this dynamic menuing system. I can get the menu system in the top frame to be generated - all the immediate submenu items of the main menu item clicked on the left. However, I have run into some snags. When you roll over the dynamically generated submenu items in the top frame I cannot for the life of me to get the sub-submenu to disappear when the you are no longer over the button.

I also have a trouble if there are multiple sub-submenus that need to pop out. They will simply overlap and not disappear for the next sub-submenu item to gain prominence. The second sub-submenu simply stays there creating an overlap.

My 3rd problem is that if a person rolls over a submenu item then he should be able to drag his mouse down to the resulting sub-sub menu without either of them disappearing. I cannot do wither and right now I am getting an object error in lone 33 char 2.

Can anyone please take a look at the code and tell me if there id anything I can try, functions that i can use? Can anyone give me seme actual code help (examples ect.). I have the range of js files if I can send them to you. For now, the code is right here:

Here is dicplayTOC (the javascript code that I have modifying up until this point:


/*-------------------------------------------------------------------
Author's Statement:
This script is based on ideas of the author.
You may copy, modify and use it for any purpose. The only condition is that if you publish web pages that use this script you point to its author at a suitable place and don't remove this Statement from it.
It's your responsibility to handle possible bugs even if you didn't modify anything. I cannot promise any support.
Dieter Bungers
GMD (

http://www.gmd.de)

and infovation (

http://www.infovation.de)

--------------------------------------------------------------------*/
// Checking the client's browser and setting the text sizes of the headings in the ToC depending on the global parameter textSizes set in tocParas and the browser useed:

var isIE = navigator.appName.toLowerCase().indexOf("explorer&quot > -1;
var mdi = (isIE) ? textSizes[1]:textSizes[3];
var sml = (isIE) ? textSizes[2]:textSizes[4];

// Other global variables:

// oldCurrentNumber is required to keep a hedings ordering string (or number) in case the ToC should change (tocChange > 0) but the content's location should remain unchanged (i.e. noLink == 1). In those cases the heading preceeded by oldCurrentNumber has to remain hilited (otherwise the heading preceeded by currentNumber has to be hilited).
var oldCurrentNumber = "", oldLastVisitNumber = "";

// toDisplay: Array to keep the display status for each heading. It is initialised so only the top level headings are displayed (headings preceeded by a single string without a dot):
var toDisplay = new Array();
for (ir=0; ir<tocTab.length; ir++) {
toDisplay[ir] = tocTab[ir][0].split(&quot;.&quot.length==1;
}
var menuDisplay = new Array();
for (ir=0; ir<tocTab.length; ir++) {
menuDisplay[ir] = tocTab[ir][0].split(&quot;.&quot.length==1;
}


function displaySubMenu(submenu) {
window.frames(&quot;menu&quot.document.getElementById(submenu).style.visibility = &quot;visible&quot;;
}

function clearSubMenu(submenu) {
window.frames(&quot;menu&quot.document.getElementById(submenu).style.visibility = &quot;hidden&quot;;
}

// ***************************************
// The function redisplays the ToC and the content
// ***************************************

function reDisplay(currentNumber,tocChange,noLink,e) {

var subitems = new Array();
subitemcount = 0;

// Input parameters:
// currentNumber: Hierarchical ordering string (or number) of the heading the user wants to display (we call this heading the &quot;current&quot. This controls the change of both, the ToC depending on the second parameter tocChange and the content's URL depending on the third parameter noLink.
// tocChange: Controls how to change the ToC. 0 = No change, 1 = Change with automatic collapsing of expanded headings that are not on the path to the current heading, 2 = Change wthout automatic colapsing (as use for example by Windows Explorer or Mac OS).
// noLink: Controls wether the content's URL shall be changed to the value given by the 3rd element of an tocTab's entry (= 0) or not (= 1).
// e: The event that triggered the function call. If it is set it must be the event object.

// If there is an event that triggered the function call: Checking the control key depending on the browser used. If it is pressed and tocChange is greater than 0 tocChange is set to 2 so the ToC schanges without automatic collapsing:
if (e) {
ctrlKeyDown = (isIE) ? e.ctrlKey : (e.modifiers==2);
if (tocChange && ctrlKeyDown) tocChange = 2;
}

// Initializing the ToC window's document and displaying the title on it's top. The ToC is performed by a HTML table:
toc.document.clear();
toc.document.write(&quot;<html>\n<head>\n<title>ToC</title>\n</head>\n<body bgcolor=\&quot;&quot; + backColor + &quot;\&quot;>\n<table border=0 cellspacing=1 cellpadding=0>\n<tr>\n<td colspan=&quot; + (nCols+1) + &quot;><a href=\&quot;javaScript:history.go(0)\&quot; onMouseDown=\&quot;parent.reDisplay('&quot; + tocTab[0][0] + &quot;',0,0)\&quot; style=\&quot;font-family: &quot; + fontTitle + &quot;; font-weight:bold; font-size:&quot; + textSizes[0] + &quot;em; color: &quot; + titleColor + &quot;; text-decoration:none\&quot;>&quot; + tocTab[0][1] + &quot;</a></td></tr>\n<tr>&quot;

// This is for defining the number of columns of the ToC table and the width of the last one. The first cells of each following row shall be empty or contain the heading symbol, the last ones are reserved for displaying the heding's text:
for (k=0; k<nCols; k++) {
toc.document.write(&quot;<td>&nbsp;</td>&quot;
}
toc.document.write(&quot;<td width=240>&nbsp;</td></tr>&quot;

// currentLevel = the level of the current heading:
var currentNumArray = currentNumber.split(&quot;.&quot;
var currentLevel = currentNumArray.length-1;

// currentIndex = Current heading's index in the tocTab array:
var currentIndex = null;
for (i=0; i<tocTab.length; i++) {
if (tocTab[0] == currentNumber) {
currentIndex = i;
break;
}
}
// If currentNumber was not found in tocTab: No action.
if (currentIndex == null) return false;

// currentIsExpanded = Expand/Collaps-state of the current heading:
if (currentIndex < tocTab.length-1) {
nextLevel = tocTab[currentIndex+1][0].split(&quot;.&quot.length-1;
currentIsExpanded = nextLevel > currentLevel && toDisplay[currentIndex+1];
}
else currentIsExpanded = false;

// Determining the new URL and target (if given) of the current heading
theHref = (noLink) ? &quot;&quot; : tocTab[currentIndex][2];
theTarget = tocTab[currentIndex][3];

// ***************************************
// 1st loop over the tocTab entries: Determining which heading to display:
// ***************************************
for (i=1; i<tocTab.length; i++) {

// Nothing to do if the tocChange parameter is set to 0. If it is set to 1 or 2...
if (tocChange) {
thisNumber = tocTab[0];
thisNumArray = thisNumber.split(&quot;.&quot;
thisLevel = thisNumArray.length-1;
// isOnPath = this heading is on the path to the current heading in the ToC hierarchy or a sibling of such a heading:
isOnPath = true;
if (thisLevel > 0) {
for (j=0; j<thisLevel; j++) {
isOnPath = (j>currentLevel) ? false : isOnPath && (thisNumArray[j] == currentNumArray[j]);
}
}
// By the following, the headings on the path to the current heading and the siblings of such headings (isOnPath==true, see above) will be displayed anyway. If the tocChange parameter is set to 1 no other heading will be displayed. If it is set to a number greater than 1 the headings that have been displayed before will additionally be displayed again.
toDisplay = (tocChange == 1) ? isOnPath : (isOnPath || toDisplay);

// Now let's perform the expand/collaps mechanism: If the heading is a descendant of the current heading it's next display depends on wether the current heading was expanded or collapsed. If it was expanded the descendants have not to be displayed this time, otherwise only the childs has to be displayed but not the grandchildren, great-grandchildren etc.. Remember that currentIsExpanded says wether the current heading was expanded or not. The if-clause is a criteria for being a descendant of the current heading. If it's a descendant and thisLevel == currentLevel+1 it's a child.
if (thisNumber.indexOf(currentNumber+&quot;.&quot==0 && thisLevel > currentLevel) {
if (currentIsExpanded) toDisplay = false;
else toDisplay = (thisLevel == currentLevel+1);
}
}
} // End of loop over the tocTab

// ***************************************
// 2nd loop over the tocTab entries: Displaying the headings:
// ***************************************
var scrollY=0, addScroll=tocScroll;
for (i=1; i<tocTab.length; i++) {
if (toDisplay) {
thisNumber = tocTab[0];
thisNumArray = thisNumber.split(&quot;.&quot;
thisLevel = thisNumArray.length-1;
isCurrent = (i == currentIndex);

// Setting the heading's symbol depending on whether this heading is expanded or not or if it is a leaf. It is expanded if the next heading has a greater level than this one AND has to be displayed:
if (i < tocTab.length-1) {
nextLevel = tocTab[i+1][0].split(&quot;.&quot.length-1;
img = (thisLevel >= nextLevel) ? &quot;leaf&quot; : ((toDisplay[i+1]) ? &quot;minus&quot; : &quot;plus&quot;
}
else img = &quot;leaf&quot;; // The last heading is always a leaf.

// If the scoll parameter is set true than increment the scrollY value:
if (addScroll) scrollY+=((thisLevel<2)?mdi:sml)*25;
if (isCurrent) addScroll=false;

// thisTextColor = the text color of this heading
if (noLink)
thisTextColor = (thisNumber==oldCurrentNumber) ? currentColor(thisNumber==oldLastVisitNumber) ? lastVisitColor:normalColor);
else thisTextColor = (thisNumber==currentNumber) ? currentColor(thisNumber==oldCurrentNumber) ? lastVisitColor:normalColor);

// Now writing this ToC line, i.e. a table row...:
toc.document.writeln(&quot;<tr>&quot;

// ...first some empty cells for the line indent depending on the level of this heading...:
for (k=1; k<=thisLevel; k++) {
toc.document.writeln(&quot;<td>&nbsp;</td>&quot;
}

// ...then the hading symbol and the heading text each with a javaScript link caling just this function reDisplay again:
toc.document.writeln(&quot;<td valign=top><a href=\&quot;javaScript:history.go(0)\&quot; onMouseDown=\&quot;parent.reDisplay('&quot; + thisNumber + &quot;',&quot; + tocBehaviour[0] + &quot;,&quot; + tocLinks[0] + &quot;,event)\&quot;><img src=\&quot;Images/&quot; + img + &quot;.gif\&quot; width=13 height=12 border=0></a></td> <td colspan=&quot; + (nCols-thisLevel) + &quot;><a href=\&quot;javaScript:history.go(0)\&quot; onMouseDown=\&quot;parent.reDisplay('&quot; + thisNumber + &quot;',&quot; + tocBehaviour[1] + &quot;,&quot; + tocLinks[1] + &quot;,event)\&quot; style=\&quot;font-family: &quot; + fontLines + &quot;;&quot; + ((thisLevel<=mLevel)?&quot;font-weight:bold&quot;:&quot;&quot + &quot;; font-size:&quot; + ((thisLevel<=mLevel)?mdi:sml) + &quot;em; color: &quot; + thisTextColor + &quot;; text-decoration:none\&quot;>&quot; + ((showNumbers)?(thisNumber+&quot; &quot:&quot;&quot + tocTab[1] + &quot;</a></td></tr>&quot;
}
} // End of loop over the tocTab


// Closing the ToC table and the document
toc.document.writeln(&quot;</table>\n</body></html>&quot;
toc.document.close();

menu.document.clear();
menu.document.write(&quot;<html>\n<head><link rel =\&quot;stylesheet\&quot; href =\&quot;menu1.css\&quot; id =\&quot;css_menu\&quot;>\n<link rel=\&quot;stylesheet\&quot; href=\&quot;menu2.css\&quot; id=\&quot;css_menu\&quot;>\n<link rel=\&quot;stylesheet\&quot; href=\&quot;menu3.css\&quot; id=\&quot;css_menu\&quot;>\n</head\>\n<body bgcolor=\'cornflowerblue\'>\n</head>\n<body topmargin=\&quot;0\&quot; bottommargin=\&quot;0\&quot; leftmargin=\&quot;0\&quot; rightmargin=\&quot;0\&quot; bgcolor=\&quot;&quot; + backColor + &quot;\&quot;>\n&quot;
menu.document.write(&quot;<table border=\&quot;1\&quot;>\n&quot;
menu.document.writeln(&quot;<tr>&quot;

// ***************************************
// 1st loop over the tocTab entries: Determining which heading to display:
// ***************************************
for (i=1; i<tocTab.length; i++) {

thisNumber = tocTab[0];
thisNumArray = thisNumber.split(&quot;.&quot;
thisLevel = thisNumArray.length-1;

isOnPath = true;
if (thisLevel > 0) {
for (j=0; j<thisLevel; j++) {
isOnPath = (j>currentLevel) ? false : isOnPath && (thisNumArray[j] == currentNumArray[j]);
}
}

menuDisplay = false;
if (isOnPath && thisLevel == currentLevel+1) {
menuDisplay = true;
}
} // End of loop over the tocTab

// ***************************************
// 2nd loop over the tocTab entries: Displaying the headings:
// ***************************************
var scrollY=0, addScroll=tocScroll;
for (i=1; i<tocTab.length; i++) {
if (menuDisplay) {
thisNumber = tocTab[0];
thisNumArray = thisNumber.split(&quot;.&quot;
thisLevel = thisNumArray.length-1;
isCurrent = (i == currentIndex);

// If the scoll parameter is set true than increment the scrollY value:
if (addScroll) scrollY+=((thisLevel<2)?mdi:sml)*25;
if (isCurrent) addScroll=false;

// thisTextColor = the text color of this heading
if (noLink)
thisTextColor = (thisNumber==oldCurrentNumber) ? currentColor(thisNumber==oldLastVisitNumber) ? lastVisitColor:normalColor);
else thisTextColor = (thisNumber==currentNumber) ? currentColor(thisNumber==oldCurrentNumber) ? lastVisitColor:normalColor);


// ...then the hading symbol and the heading text each with a javaScript link caling just this function reDisplay again: `
menu.document.writeln(&quot;<td>&quot;
menu.document.writeln(&quot;<a href=\&quot;javaScript:history.go(0)\&quot; onMouseOver=\&quot;parent.displaySubMenu('&quot; + thisNumber + &quot;');\&quot; onMouseDown=\&quot;parent.reDisplay('&quot; + thisNumber + &quot;',&quot; + &quot;1&quot; + &quot;,&quot; + tocLinks[1] + &quot;,event)\&quot; style=\&quot;font-family: &quot; + fontLines + &quot;; alert();&quot; + ((thisLevel<=mLevel)?&quot;font-weight:bold&quot;:&quot;&quot + &quot;; font-size:&quot; + ((thisLevel<=mLevel)?mdi:sml) + &quot;em; color: &quot; + thisTextColor + &quot;; text-decoration:none\&quot;>&quot; + tocTab[1] + &quot;</a>&quot;
menu.document.writeln(&quot;</td>&quot;
subitems[subitemcount] = thisNumber;
subitemcount++;
}
} // End of loop over the tocTab




menu.document.write(&quot;</tr>\n&quot;
menu.document.write(&quot;</table>\n&quot;

//==================================================

for (z=0; z< subitemcount; z++) {

menu.document.writeln(&quot;<table ID=&quot; + subitems[z] + &quot; border=\&quot;1\&quot; STYLE='position:absolute; top:30px; left:0px; visibility:hidden'>&quot;
menu.document.writeln(&quot;<tr>&quot;

targetNumber = subitems[z];
targetNumberArray = targetNumber.split(&quot;.&quot;
targetLevel = targetNumberArray.length-1;

for (i=1; i<tocTab.length; i++) {

thisNumber = tocTab[0];
thisNumArray = thisNumber.split(&quot;.&quot;
thisLevel = thisNumArray.length-1;



isOnPath = true;
for (j=0; j<=targetLevel; j++) {
isOnPath = isOnPath && (thisNumArray[j] == targetNumberArray[j]);
}


menuDisplay = isOnPath && ((targetLevel+1) == thisLevel);

} // End of loop over the tocTab

var scrollY=0, addScroll=tocScroll;
for (i=1; i<tocTab.length; i++) {
if (menuDisplay) {
thisNumber = tocTab[0];
thisNumArray = thisNumber.split(&quot;.&quot;
thisLevel = thisNumArray.length-1;
isCurrent = (i == currentIndex);

// If the scoll parameter is set true than increment the scrollY value:
if (addScroll) scrollY+=((thisLevel<2)?mdi:sml)*25;
if (isCurrent) addScroll=false;

// thisTextColor = the text color of this heading
if (noLink)
thisTextColor = (thisNumber==oldCurrentNumber) ? currentColor(thisNumber==oldLastVisitNumber) ? lastVisitColor:normalColor);
else thisTextColor = (thisNumber==currentNumber) ? currentColor(thisNumber==oldCurrentNumber) ? lastVisitColor:normalColor);


// ...then the hading symbol and the heading text each with a javaScript link caling just this function reDisplay again:
menu.document.writeln(&quot;<td>&quot;
menu.document.writeln(&quot;<a href=\&quot;javaScript:history.go(0)\&quot; onMouseOver=\&quot;parent.displaySubMenu('&quot; + thisNumber + &quot;');\&quot; onMouseDown=\&quot;parent.reDisplay('&quot; + thisNumber + &quot;',&quot; + &quot;1&quot; + &quot;,&quot; + tocLinks[1] + &quot;,event)\&quot; style=\&quot;font-family: &quot; + fontLines + &quot;; alert();&quot; + ((thisLevel<=mLevel)?&quot;font-weight:bold&quot;:&quot;&quot + &quot;; font-size:&quot; + ((thisLevel<=mLevel)?mdi:sml) + &quot;em; color: &quot; + thisTextColor + &quot;; text-decoration:none\&quot;>&quot; + tocTab[1] + &quot;</a>&quot;
menu.document.writeln(&quot;</td>&quot;
}
} // End of loop over the tocTab

}


menu.document.writeln(&quot;</tr>&quot;
menu.document.writeln(&quot;</table>&quot;

//==============================================
menu.document.writeln(&quot;</body></html>&quot;
menu.document.close();

// ***************************************
// Closing the ToC document, scrolling its frame window and displaying new content in the content frame or in the top window if required
// ***************************************

// Updating the global variables oldCurrentNumber and oldLastVisitNumber. See above for its definition
if (!noLink) {
oldLastVisitNumber = oldCurrentNumber;
oldCurrentNumber = currentNumber;
}

// Scrolling the ToC if required
if (tocScroll) toc.scroll(0,scrollY);

// Setting the top or content window's location if required
if (theHref)
if (theTarget==&quot;top&quot top.location.href = theHref;
else if (theTarget==&quot;parent&quot parent.location.href = theHref;
else if (theTarget==&quot;blank&quot open(theHref,&quot;&quot;
else content.location.href = theHref;
}