View Full Version : Menu with Separated scripting & style in IE

04-03-2003, 03:13 PM
Background (feel free to skip ahead): I'm currently reworking some menu code, and effectively scrapping all that is in effect currently. The current menu reads an XML file, and spends at least three seconds per page load creating the menu from the XML. I'm trying to create a menu that has none of that lag.

I've got a valid page here (http://www.10mar2001.com/work/menu/) that contains the (dummy) menu, written as HTML, with the script and styles each in separate files.

This menu works without any scripting in Mozilla-based browsers, due to its honoring of :hover on arbitrary elements (LI, in this case). If you view the menu in Mozilla, Phoenix, Netscape 7 (maybe 6), possibly Chimera/Camino, and probably Thunderbird, it will work as expected. Mouse over the menu items, and any sub-menu items appear.

Now. If you view it with any other browser, it fails. The sub-lists of menu items never appear. More than just not working, IE leaves any <span> element boxes visible onmouseout, while hiding the text as it should.

I need the sub-ULs to appear on their parents' mouseovers, but I also need the <span> boxes to disappear onmouseout.

Example, complete with dummy text:



Can anybody shed some light?

04-03-2003, 08:19 PM
or are you folks stumped?

I'm still new here, so please forgive any minor transgression. I have, in fact, read the "How to post a JavaScript question" post, and I thought I followed most of it; please let me know if I haven't.

Thanks again,

Roy Sinclair
04-03-2003, 10:11 PM
Honestly, the more complex the overall code, the less likely you're going to get help. We're all volunteers here and have our own projects to work on so it's rare that anyone here will be able to tackle a big project. Also menu systems are a dime a dozen so there's less compulsion to jump out and recreate the wheel for the 100,000th time, of course they're also greate venues for learning a lot about javascript so don't let that discourage you either.

Try making some simple cases dealing with only one part of the overall problem at a time and see if you can get help that way.

04-04-2003, 09:42 PM
Originally posted by Roy Sinclair
menu systems are a dime a dozen
That's true in general, but what Choopernickel is making is pretty cutting edge; there aren't many menus out there that work in this way.

And that might be another reason (on top of what Roy said) why not so much help is forthcoming. It's not tried, tested and easy-to-answer like normal, pure-javascript menus.

Have you seen gazingus.org - his methodogy might help you http://www.gazingus.org/dhtml/?id=109 - (it's good, but it lacks the finer subtlety of a menu which needs no hard-coded event, ID or class bindings at all ;))

I also did something similar myself; it uses a DHTML behavior to make up for IE - http://www.brothercake.com/scripts/navmeister/page.php

04-08-2003, 04:00 PM
Thanks, brothercake, for the kind word.

Yeah, I've seen gazingus, and pulled a couple of tricks out of that. I like your menu; it seems pretty durn near what I'm going for. Did you take a look at my page?

Will you explain to me a little more about this DHTML behavior? I've found the line in your stylesheet; I just don't understand how/why it works. Do I need to have hover.htc on my server?

Thanks again!

(btw, I just got back from Mexico - the weather down there r0x0rs!)

04-08-2003, 07:56 PM
Yeah the behavior is an external file, which you call like this:

ul.navmeister li {

The file looks like this:


<attach event="onmouseover" handler="showChild" />
<attach event="onmouseout" handler="hideChild" />

<script type="text/javascript">

var eleChild,eleStyle;

function showChild() {
//show child list
eleChild = element.childNodes[2];
eleChild.style.display = "inline";

function hideChild() {
//reset rollover color
eleStyle = element.style;
//hide child list
eleChild.style.display = "none";



The <attach/> components define what events to listen to, and what functions to call from them. Then you just write the functions like normal, where "element" is the object reference.

Behaviors are great; and they also suck. You'll see ;)

04-08-2003, 08:18 PM
Is that all you have to do to get that menu working in IE? If so, WOW. Also, screw off, Microsoft - why must your browser pain me so?

I've got like almost 300 lines of CSS and JS to get this menu working; turns out I need like fifty. HOW GRAND! :mad:

Thanks, bro'cake.

04-08-2003, 09:15 PM
Yeah mate - 10K for the whole thing, and half of that is the <ul> tree :)

04-08-2003, 10:23 PM
bro -

I can't seem to get this to work. Haven't tried too hard just yet; I'm sure my old scripting's getting in the way of the new scripting.

Have you tried editing the hover.htc to change the style of the LI and its children via className?

I'm about out of here for the day, so I'll check back in the morning... hopefully I get to finish this before my boss gives me a new project. ;)

04-09-2003, 04:46 PM
Okay, removing the script and replacing it with the hover.htc behavior doesn't seem to want to work for me. I'm getting the same results as before, when I first posted this thread:

- Mozilla-based browsers (recent-ish versions, at least) work because of their support for arbitrary element hovering.

- Opera does nothing.

- IE6 displays the "popup" spans onmouseover, but not the sub-lists. It hides the popup text onmouseout, but leaves the popup boxes visible.

:mad: Aaaarrrgghh! :mad:

I just want to get this thing working.

04-09-2003, 07:07 PM
Well I must admit, it looks to me like you're writing and processing a lot of code for nothing - all that span business - it would be much easier (and semantically more meaningful) if the extra text were in attribute values, and you generated the tooltip layers on the fly. As it is, those spans are just polluting your UL DOM, making it harder to position the nodes and giving you problems with event bubbling.

Well that's my impression anyway.