Gotta Love IE
I have been working on a site that uses a lot of [YUI](http://developer.yahoo.com/yui/) components — specifically Grids and Menubar. They were both CSS based, even though the Menubar required a touch of JavaScript, like so:
var oMenuBar = new YAHOO.widget.MenuBar(“menubar”,
{visible: true,
position: “static”,
autosubmenudisplay:true
}
);
oMenuBar.render();
oMenuBar.show();
function onMenuMouseOver(p_sType, p_aArguments) {
var oEvent = p_aArguments[0];
}
The page had been rendering just fine in FireFox. When I loaded it up in IE6, however, the page rendered correctly, but then a popup appeared, saying that it couldn’t render the page. When you clicked “Okay” it went to IE’s standard “Page Not Found” display.
Weird, I know.
I looked at the code and didn’t see anything that I could see that caused it. I went to the YUI Message Board and appealed to the experts. [Dav Glass](http://blog.davglass.com/) that sometimes that happens when IE hasn’t rendered the object that you are trying to access. The work-around is to use the [`onAvailable` or `onContentReady`](http://developer.yahoo.com/yui/event/#onavailable) methods. I looked at my code and quickly figured out that it must be the `menubar` div that isn’t rendered yet. So I changed it to this:
function MenuObj(id) {
YAHOO.util.Event.onAvailable(id,this.makeMenu,this);
}
MenuObj.prototype.makeMenu = function(that) {
var oMenuBar = new YAHOO.widget.MenuBar(“menubar”,
{visible: true,
position: “static”,
autosubmenudisplay:true
}
);
oMenuBar.render();
oMenuBar.show();
}
var menubar = new MenuObj(“menubar”);
function onMenuMouseOver(p_sType, p_aArguments) {
var oEvent = p_aArguments[0];
}
And wouldn’t you know? That worked.
Big thanks to Dav for helping me out!
