JS Menu Display Issue in IE

Discussion in 'JavaScript' started by obolus, Jan 8, 2008.

  1. #1
    Originally, I thought this was simply a CSS problem, perhaps with z-index and other settings being bad. I've done some research and asked around another dev site I'm at and couldn't find a solution.

    Basically, the dropdown menu sits behind the content divs. The menu is partially JS powered (originally written by someone at DynamicDrive, but not recently updated). Here is the code:

    
    var menubgcolor='#000000'  //menu bgcolor
    var disappeardelay=500  //menu disappear speed onMouseout (in miliseconds)
    var hidemenu_onclick="no" //hide menu when user clicks within menu?
    
    /////No further editting needed
    
    var ie4=document.all
    var ns6=document.getElementById&&!document.all
    var vismenus = new Array();
    var dropmenuobj;
    var delayhide;
    
    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
    
    
    function showhide(obj, e, visible, hidden){
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    obj.visibility=visible
    else if (e.type=="click")
    obj.visibility=hidden
    }
    
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function dropdownmenu(obj, e, menucontents){
    hidemenu();
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    clearhidemenu()
    dropmenuobj=document.getElementById? document.getElementById(menucontents) : dropmenudiv
    
    if (ie4||ns6){
    showhide(dropmenuobj.style, e, "visible", "hidden")
    }
    
    vismenus.push(dropmenuobj);
    
    return clickreturnvalue()
    }
    
    function clickreturnvalue(){
    if (ie4||ns6) return false
    else return true
    }
    
    function contains_ns6(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }
    
    function dynamichide(e){
    if (ie4&&!dropmenuobj.contains(e.toElement))
    delayhidemenu()
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    delayhidemenu()
    }
    
    function hidemenu(e){
    var len = vismenus.length;
    for (i = 0; i < len; i++) {
    dropmenuobj = vismenus.pop();
    if (typeof dropmenuobj!="undefined"){
    if (ie4||ns6)
    dropmenuobj.style.visibility="hidden"
    }
    }
    }
    
    function delayhidemenu(){
    if (ie4||ns6)
    delayhide=setTimeout("hidemenu()",disappeardelay)
    }
    
    function clearhidemenu(){
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    }
    
    if (hidemenu_onclick=="yes")
    document.onclick=hidemenu
    
    Code (markup):
    The variables at the top don't really matter since style stuff is controlled by the CSS.

    If someone can help me out with this, I'd greatly appreciate it!

    thanks
     
    obolus, Jan 8, 2008 IP
  2. obolus

    obolus Guest

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    also, before I forget, you can see the page live @ tws.tribalstylemusic.net/tourney
     
    obolus, Jan 8, 2008 IP
  3. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #3
    If you are interested in a cross-browser AJAX solution, email me.

    Screen shot: www.javascript-demos.com/Test/HorizMenu.gif

    Fully customizable. Create / edit the menu by editing a simple .xml file like this one:

    
    <?xml version="1.0" ?>	
    	<menu>		
    		<main>
    			<text>Home</text>
    			<link>links/index.html</link>
    		</main>	
    		<main> 
    			<text>Products</text>
    			<sub>
    				<text>Books</text>
    				<link>links/books.html</link>
    			</sub>
    			<sub>
    				<text>Music</text>
    				<link>links/music.html</link>
    			</sub>
    			<sub>
    				<text>Video</text>
    				<link>links/video.html</link>
    			</sub>
    		</main>			
    		<main> 
    			<text>Terms</text>
    			<sub>
    				<text>Privacy Policy</text>
    				<link>links/privacy.html</link>
    			</sub>
    			<sub>
    				<text>Refunds &amp; Exchanges</text>
    				<link>links/refund.html</link>
    			</sub>
    		</main>
    		<main>
    			<text>Contact Us</text>
    			<sub>
    				<text>By Email</text>
    				<link>links/contact_us.html</link>
    			</sub>
    			<sub>
    				<text>Phone &amp; Fax</text>
    				<link>links/contact_info.html</link>
    			</sub>
    		</main>		
    	</menu>
    Code (markup):
     
    Mike H., Jan 9, 2008 IP