menuArray Error

[BrianJ]

I've been working on installing menus for a new site. Here is a test page:

http://www.globethink.com/metabrand/

Everything seems to be working fine, except when you are loading the page or reload the page, and have the cursor over one of the menu's, it pops up a script error:

Line: 85
Char: 3
Error: 'menuArray' is null or not an object
Code: 0

All of the code should be on the page, if anyone can help in solving this problem.

Thanks, Brian

[Dave Morton]

What browser are you using to test it? IE6 in XP works great, with no errors.

[BrianJ]

I'm using IE 6 on Windows XP.

If you have "Display a notification about every script error" enabled in the Advanced preferences for IE, it will show.

Note that it will only show the error if you have your cursor over top of the menu bar while the rest of the page is still loading.

If the page completes the load, no problem... no errors.

Brian

[MikeFoster]

Hi Brian,

Nice page!

Wow, I haven't looked at the code for that menu in a long time.

Try this: add the event listeners 'after' the call to init().

function windowOnload()
{
if (is.nav4) return;
menuArray = new Array();
init();
window.cbe.addEventListener("resize", resizeListener);
document.cbe.addEventListener("mousemove", menuHide);
}

[BrianJ]

Hey Mike,

Thanks for the help. Got the same error that pops up now, but at a different line location:

Line: 94
Char: 3
Error: 'menuArray' is null or not an object
Code: 0

[Dave Morton]

Ah. Since it's only while the page is loading, I won't usually get an error, since the page loads faster than I can get my mouse to move. DSL is nice for surfing, but not for debugging these types of problems. :D

[MikeFoster]

Hi Brian,

I see it now. Mousing over the link calls the menuShow() function - but the download of the images delays the window.onload event, so menuArray has not yet been created (by windowOnload).

Below is a quick fix. I added the menuReady variable.


var menuReady = false;
function windowOnload()
{
if (is.nav4) return;
menuArray = new Array();
window.cbe.addEventListener("resize", resizeListener);
document.cbe.addEventListener("mousemove", menuHide);
setTimeout("init()", 250);
}

function resizeListener(e) {
menuReady = false;
init();
}

function windowOnload()
{
if (is.nav4) return;
menuArray = new Array();
init();
window.cbe.addEventListener("resize", resizeListener);
document.cbe.addEventListener("mousemove", menuHide);
}

function init() {
var i, menuLabel;
for (i = 1; i <= menuCount; ++i) {
menuLabel = cbeGetElementById('menuLabel'+i).cbe;
menuArray[i] = cbeGetElementById('menu'+i).cbe;
menuArray[i].moveTo(menuLabel.pageX(), menuLabel.pageY() + menuLabel.height());
menuArray[i].menuLabel = menuLabel;
menuArray[i].zIndex(2);
}
menuReady = true;
}

function menuShow(e,mn)
{
if (!menuReady) return;
if (is.nav4) return;
if (mn == activeMenu && menuOpen) return;
menuArray[activeMenu].hide()
for (i = 1; i <= menuCount; ++i) {
menuArray[i].menuLabel.background(inactiveColor);
}
menuArray[mn].show();
menuArray[mn].menuLabel.background(activeColor);
activeMenu = mn;
menuOpen = true;
}


In later menu implementations I solved this issue by not using the A element's inline onmouseover property. For example, xMenu2 (http://cross-browser.com/test/).

[MikeFoster]

Here's an xMenu2 Demo (http://cross-browser.com/test/x/menus/xmenu2.html).

[BrianJ]

Mike,

That worked great... you rule! :-)

Thanks for the help and effort. I'll look into the xMenu2 demo and see about updating the menu's in the future.

Brian

[MikeFoster]

Thanks Brian,

Keep in touch