Main Points

Unobtrusive Javascript Example 8

Yes! I finally found a function that the links like enough not to hide from. Of course, I had to go completely back to the drawing board. There's something in how the XHTML Id detection works, that triggers some DOM difficulties when dealing with event handlers in unobtrusive Javascript. I finally found a parallel way -- a different subroutine that will accomplish the same purpose. We found the syntax to pass parameters to an unobtrusive Javascript function.

document.getElementById("button01").onmouseover = function() {drivingMenu(1, "on")};
document.getElementById("menu01").onmouseover = function() {drivingMenu(1, "on")};

We're passing two parameters into the drivingMenu function which runs everything. The first is the number of the menu to activate. We assemble the parameter into the menu name, which saves us from having to pass the entire menu name as a string. We could do that too, but the script Really doesn't like it when we pass the string into the heart of the function. We had to declare the variable first to get it to work, so why not assemble the menu name?

function drivingMenu(strWhichMenu, strOnOff) {

//This tests to see if the browser supports getElementById and abandons the function if it does not
if (!document.getElementById) return;

//This expression assembles the name of the menu which was triggered
var strThisMenu = "menu0" + strWhichMenu;
}

Once the menu name is assembled, we turn it on or off depending on the second parameter. The second parameter is fed into an if condition to set the menu display to block if it's "on", and to none if it's "off".

//This if loop determines whether the menu should be turned on or off and executes the command if (strOnOff == "on") {
document.getElementById(strThisMenu).style.display="block";
}
else {
document.getElementById(strThisMenu).style.display="none";
}

We still need to figure out a way to condense all the event handler calls if possible. But this one function, controls turning all the menus on and off. This is the function which runs all of our navbars. With the slight exception that we have two navbars. Our website code nests this function inside another conditional to choose which of our two navbars the menu is a part of. This also requires a third parameter. But other than that tweak, this example is run by the same code.

Skip to Main Points
<-- Back to 7. Oops! Adding Links
Continue to 9. Contact Form - Image Rollovers-->