Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Menu with Separated scripting & style in IE

    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 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:
    http://www.10mar2001.com/work/menu/

    Script:
    http://www.10mar2001.com/work/menu/menu.js

    Style:
    http://www.10mar2001.com/work/menu/menu.css


    Can anybody shed some light?
    Last edited by Choopernickel; 04-03-2003 at 04:19 PM.

  • #2
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Is my question poorly formed?

    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,
    choop

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by brothercake; 04-05-2003 at 01:43 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!)

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah the behavior is an external file, which you call like this:
    Code:
    ul.navmeister li {
    	behavior:url(hover.htc);
    	}
    The file looks like this:
    Code:
    <public:component>
    
    <attach event="onmouseover" handler="showChild" />
    <attach event="onmouseout" handler="hideChild" />
    
    <script type="text/javascript">
    
    	var eleChild,eleStyle;
    	
    	function showChild() {
    		//rollover
    		element.style.backgroundColor="#f8fbfb";
    		//show child list
    		eleChild = element.childNodes[2];
    		if(eleChild){
    			eleChild.style.display = "inline";
    			}
    		}
    
    	function hideChild() {
    		//reset rollover color
    		eleStyle = element.style;
    		(element.className=="youAreHere")?
    			eleStyle.backgroundColor="#ffefdc":
    			eleStyle.backgroundColor="#f8fbd0";
    		//hide child list
    		if(eleChild){
    			eleChild.style.display = "none";
    			}
    		}
    				
    </script>
    
    </public:component>
    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
    Last edited by brothercake; 04-08-2003 at 09:03 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #7
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

    Thanks, bro'cake.

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah mate - 10K for the whole thing, and half of that is the <ul> tree
    Last edited by brothercake; 04-08-2003 at 10:18 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #9
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Aaaarrrgghh!

    I just want to get this thing working.

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by brothercake; 04-09-2003 at 08:12 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •