Hierarchical Menus in Frames
initialization
The Frameset onLoad
FRAMESETs, being special BODY tags, have an onLoad event handler. It fires when all the contained frames have been loaded. We want our menus to be created in our main frame, when both the navigation frame and the main frame have loaded. The navigation frame must be loaded since it contains the menu script. The main frame will have dynamic creation of positioned elements, possible only after load. The function that the onLoad handler calls is startIt(), a new one, discussed below. We could include the handler in our frameset, but it is more elegant to invoke it dynamically from our script in the navigation frame. Remember that we are trying to keep our non-navigation frame script to a minimum.
Thus, the first statements in menuFrames.js define the frameset's onload behavior:
if (NS4) parent.onload = startIt;
if (IE4) parent.document.body.onload = startIt;
As we know, from previous columns, the HTML:
<BODY onLoad="functionName()">
and the script:
window.onload = functionName; or
onload = functionName;
do the same thing, and for both browsers. The parent object, included in a frame script, refers to the containing frameset for both browsers. The syntax parent.frames.siblingFrameName is the same in both browsers. For reasons unknown, referencing the parent frameset's events through script are handled differently.
Navigator sticks to the script version above, (window.onload), so a containing frameset's onLoad handler is set through: parent.onload. Explorer insists on the BODY-FRAMESET tautology, so it requires: parent.document.body.onload.
Don't ask.
Our fist two statements, therefore, establish that when all the frames are loaded the startIt() function will be called.
The Global Variables
Next, we have previously discussed variables pertaining to the child menu position, the time menu is visible, and the image used for denoting the existence of a child menu:
if (perCentOver != null) {
childOverlap = (perCentOver/100) * menuWidth
}
mSecsVis = secondsVisible*1000;
imgStr = "<IMG SRC=" + imgSrc + " WIDTH=" + imgSiz
+ " HEIGHT=" + imgSiz +" BORDER=0 VSPACE=2 ALIGN=RIGHT>"
The remainder of our old global variables are, in the frames version, included in a function, since we will need to set them more than once:
function initVars() {
topCount = 1;
areCreated = false;
isOverMenu = false;
currentMenu = null;
allTimer = null;
}
As soon as the initVars() function is defined, we call it, thus initializing the variables for the first time:
initVars();
The Controlling Function
The function called when our frames have loaded is startIt(). First, it creates an easy reference for the main frame, by assigning it to a varible called main.
Next we set the onUnload event handler of our main frame, using the same syntax as the frameset handler above. Our menus will be created every time the main frame hosts a new page. Since our variables exist in our navigation frame, they will not reflect the clean-slate status of the new page in the main frame. Therefore, when the user navigates to a new page, and the old page "unloads," our variables need to be reinitialized, by calling initVars().
function startIt() {
main = parent.frames.main;
if (NS4) main.onunload = initVars;
if (IE4) main.document.body.onunload = initVars;
if (NS4) makeClass();
makeTop();
}
Once the handlers are established, startIt() calls makeClass() for Navigator, to define the menu style, before the menus, themselves, are created. Then, we are free to finally call our old function makeTop(), that creates the menus.
On the next page, we look at makeClass() and defining styles in a frame (window) from another frame (window) in Navigator 4.
| 
Find a programming school near you