Script fails in I.E. Mac

When I studied web programming, the curriculum was extremely Windows-centric. Thus, it's not surprising that this problem doesn't appear in IE 6; only Mac IE 5.1. I'll attempt to be brief as possible and still convey the main issues.

I have a straightforward set of drop-down menus in my top level navigation bar. As this appears on all pages, I placed the entire batch of code in a Javascript variable called topMen and call it with a document.write() command within each page.

Initially it worked as expected. An early version can be seen at http://edgework.tripod.com/

Links for Air Filters, Water Filters, and Products trigger drop-down menus, the delay feature allows enough time for the mouse to move to the links, and when the mouse moves off the menu, the menu is once more hidden.

When I began working with DreamweaverMX, I recoded the pages to XHTML, using Dreamweaver's convert feature to get me started, and lots of trial and error to finish the job. This is still ongoing, but at the moment, the pages validate as XHTML Transitional. The drop-down menus still work as expected in Windows IE6, but on Mac IE5.1 they have turned buggy.

The latest version is at http://209.61.203.61

The initial mouseover event is triggering the drop-down menus, but the onmouseout events are having no effect, and the process of delaying the hide trigger is completely screwed up. Here's the relevant code, restricted to the Air Filters menu.



var topMen;
var menus = new Array();
var menu=null;
var onmenu=false;
var onlinks=false;
var activemenu=null;
var timr;

topMen="<div id='navbar'>"
topMen+="<div id='homeLink'>"
topMen+="<p><a href='index.html' onfocus='blur();'>Home</a></p>"
topMen+="</div>"
topMen+="<div id='airLink'>"
topMen+="<p><a href='#' onmouseover='showmen(\"air\");' onmouseout='hide_delay();'onfocus='blur();'>Air Filters</a></p>"
topMen+="</div>"


...and the div with enclosed menu links...

topMen+="<div id='airmenu' onmouseover='onmenu=true;' onmouseout=' onmenu=false; hide_delay();'>"
topMen+="<div class='menu' id='airmen' onmouseover='onlinks=true;' onmouseout='onlinks=false;'>"
topMen+="<p class='firstp'><a href='aair.html'>Aller Air</a></p>"
topMen+="<p><a href='amair.html'>Amaircare</a></p>"
topMen+="<p><a href='ahair.html'>Austin Healthmate</a></p>"
topMen+="<p><a href='bair.html'>Blueair</a></p>"
topMen+="<p><a href='iqair.html'>IQ Air</a></p>"
topMen+="<p><a href='norair.html'>Northern Air</a></p>"
topMen+="</div>"
topMen+="</div>"


...the functions that show and hide the menus...

function showmen(menChoice) {
menu=menus[menChoice];
if (activemenu != null && menu != activemenu){
clearTimeout(timr);
activemenu.style.visibility="hidden"
}
clearTimeout(timr);
menu.style.visibility="visible";
activemenu=menu;
}

function hide_delay() {
if (onmenu || onlinks) {
menu.style.visibility="visible";
return true;
}
timr=setTimeout("closeMenu()",200);
}

function closeMenu(){
if (onmenu || onlinks) {
return;
}
else{
activemenu.style.visibility="hidden";
}
}


...and finally, the init fuction that loads the array and sets the initial visibility value to hidden...

function init() {
menus["air"]=document.getElementById("airmenu");
menus["air"].style.visibility="hidden";
menus["water"]=document.getElementById("watermenu");
menus["water"].style.visibility="hidden";
menus["prod"]=document.getElementById("prodmenu");
menus["prod"].style.visibility="hidden";
}

It seems that something is going missing since I switched to XHTML Transitional, but I don't know what it might be.

Yes, I know that Netscape doesn't respond to this script at all. I was getting ready to decipher that problem when I got sidetracked by this one.

Any advice will be greatly appreciated.

Thanks

Ok. So your code works in IE6. It's plenty of code too. I think you're over complicating it. Other than rewriting it so it's easier for any browser to understand my first suggestion is to move this:

document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"ecobestall.css\" />");

to right after your <meta> stuff and before any <script> tags at all. IE on the Mac gets confused on such things.

Don't get me wrong, the codeing style is excellent for c++ :thumbsup: or something but this is JavaScript...

Maybe you could just cheat and use this program. :)

http://software.xfx.net/utilities/dmbuilder/index.html

Not sure how I'd implement your suggestion, since the line you reference is inside my referenced javascript file; there isn't a way to put it "before" the script tags. I could go back and put the style reference in all the pages, I suppose.

As for the program you mentioned, it is tempting, as are the host of extentions available for Dreamweaver. I'm doing this site on a kind of barter arrangement: I get to earn a few bucks, but more importantly I get to work at my pace and learn what I'm doing, and maybe get a real-world reference out of it. Before I start resorting to shortcuts, I want to know what it is I'm shortcutting.

And as for the coding style, thanks for the kind words, but, really, if it was all that great, it would work.

Learning takes time :mad: , but we trudge on. Thanks for your input.

Try monitoring the state of activemenu - maybe it's null state is not "null"

Originally posted by brothercake
Try monitoring the state of activemenu - maybe it's null state is not "null"

It starts out in a null state, but as soon as a menu is selected and displayed, that value is passed to activemenu. Unless I'm overlooking something.

IE5/Mac, although it's standard's support is better than it's Windows counterpart, is pretty buggy. I have a calendar script that works great on nearly every browser on nearly every platform... except IE5/Mac.

Personally, I think it's just the browser... of course, it *might* have something to do with it's implemetation of JavaScript. IE4/5/5.5/6 uses JavaScript 1.3, Gecko uses JavaScript 1.5... Opera (quirky as all-heck) uses JS 1.4 and so does IE5/Mac. Maybe it's something to do with the implementation?