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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Help with cross browser support

    Heres my problem, i have the code listed below which is used on the page http://www.extremealcohol.com/?id=brew ... the problem is, the code comes up top-dog on IE and Opera but doesnt work so well on FF or NS, infact it delays the dropdown instead of sliding and simply drops. If you repeat this more than once on FF or NS it also screws up and doesnt allocate room for the links.

    What i need help with is, instead of re-writing this code is it possible for someone to help me by writing a small javascript in which of FF or NS is detected the drops work instantly and bypass the code, making the drop down less snazzy but more effective. As far as i can read from the code you may just need to set the div's display back to visible, but as you can tell this is dynamic drive free opensource code so i dont atchually know how to do this myself.

    Thanks for your time/responses.

    An example of the html code on my webpage:
    Code:
    <div class="mainDiv" state="1">
    	<div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this);"> Beer &amp; Ale </div>        
    	<div class="dropMenu" >
    		<div class="subMenu" state="0">
    			<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">Introduction</a></span><br />
    			<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">Starters</a></span><br />
    			<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">Equiptment</a></span><br />
    			<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">Lager Recipies</a></span><br />
    			<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">Real Ale Recipies</a></span><br />
    			<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">Stout Recipies</a></span><br />
    			<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">Keg beer Recipies</a></span><br />
    			<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">Beer Brewing FAQ</a></span><br />
    			<span class="subItem" classOut="subItem" classOver="subItemOver"><a href="#">Search Recipies</a></span><br />
    		</div>
    	</div>
    	</div>
    The css used:
    Code:
    .mainDiv
    {
      width:160px;
    }
    .topItem
    {
      width:160px;
      height:22px;
      cursor:pointer;
      background: #467BF2;
      text-decoration: none;
      color: white; 
      font-weight:bold;
      font-family:"GOTHIC";
    }
    .dropMenu
    {
      background:#D9D9D9;
      border-top:1px solid #467BF2;
      border-left:1px solid #92B1F8;
      border-right:1px solid #92B1F8;
      border-bottom:1px solid #92B1F8;
    }
    .subMenu
    {
       display:none;
    }
    .subItem
    {
       padding-left:5px;
       cursor:pointer;
       font-weight:bold;
       text-decoration:none;
       color:black;
    }
    .subItem a
    {
       text-decoration:none;
       color:black;
    }
    .subItemOver
    {
       cursor:pointer;
       color:blue;
       text-decoration:underline;
       font-weight:bold;
       padding-left:5px;
    }
    .subItemOver  a
    {
       color:blue;
    }
    .drop
    {
       border-left:1px solid black;
       border-right:1px solid black;
    }
    Javascript used
    Code:
    /************************************************************************ 
    Author: Eric Simmons
    Contact: info@jswitch.com
    Website: http://www.jswitch.com
    Version: 1.0 4/2005       
    Browser Target: Mozilla 6+/FireFox Netscape 6+, IE 5.0+
    Type : XP style sliding dropdown menus (aka Switch Menu II on Dynamicdrive.com)
    Note: Modification by Dynamicdrive.com to dynamically determine sub menus widths
    
    v 1.0
    XP style sliding Menu Bar
    ***********************************************************************/
    
    var TIMER_SLIDE = null;
    var OBJ_SLIDE;
    var OBJ_VIEW;
    var PIX_SLIDE = 10; //this is the amount of slide/DELAY_SLIDE
    var NEW_PIX_VAL;
    var DELAY_SLIDE = 30; //this is the time between each call to slide
    var DIV_HEIGHT = 22; //value irrelevant
    var SUB_MENU_NUM =0;
    var RE_INIT_OBJ = null;
    var bMenu = document.getElementById("curMenu");
    var MainDiv,SubDiv
    
    //DD added code
    document.write('<div id="tempcontainer" class="mainDiv" style="visibility: hidden; position: absolute"></div>')
    
    function Init(objDiv)
    {
        if (TIMER_SLIDE == null)
        {
            SUB_MENU_NUM = 0;
            MainDiv = objDiv.parentNode;
            SubDiv =  MainDiv.getElementsByTagName("DIV").item(0);
            SubDiv.onclick = SetSlide;
            
            OBJ_SLIDE = MainDiv.getElementsByTagName("DIV").item(1)
            OBJ_VIEW = OBJ_SLIDE.getElementsByTagName("DIV").item(0);
    
    document.getElementById("tempcontainer").innerHTML=MainDiv.getElementsByTagName("DIV").item(2).innerHTML //DD added code
    DIV_HEIGHT=document.getElementById("tempcontainer").offsetHeight //DD added code
            
            for (i=0;i<OBJ_VIEW.childNodes.length;i++)
            {
                if (OBJ_VIEW.childNodes.item(i).tagName == "SPAN")
                {
                    SUB_MENU_NUM ++;
                    OBJ_VIEW.childNodes.item(i).onmouseover= ChangeStyle;
                    OBJ_VIEW.childNodes.item(i).onmouseout= ChangeStyle;
                }
            }   
            
                  NEW_PIX_VAL = parseInt(MainDiv.getAttribute("state")); 
        }
    
    }
    function SetSlide()
    {   
    if (window.TIMER_SLIDE) clearInterval(TIMER_SLIDE) //DD added code
          if (TIMER_SLIDE == null && this.parentNode == MainDiv)
                TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
          else
          {
              RE_INIT_OBJ = this;
              setTimeout('ReInit()', 200);
          }
    }
    
    function ReInit(obj)
    {
        Init(RE_INIT_OBJ);
        TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
        RE_INIT_OBJ = null;
    }
    
    function RunSlide()
    {
    
        if (OBJ_VIEW.getAttribute("state") == 0)
        {
    
            NEW_PIX_VAL += PIX_SLIDE;
            OBJ_SLIDE.style.height = NEW_PIX_VAL;
    
            if (NEW_PIX_VAL >= DIV_HEIGHT) //DD modified code
            {
                clearInterval(TIMER_SLIDE);
                TIMER_SLIDE = null;
                OBJ_VIEW.style.display = 'inline';
                OBJ_VIEW.setAttribute("state","1")
                MainDiv.setAttribute("state",NEW_PIX_VAL);
            }
        } else
        {
            OBJ_VIEW.style.display = 'none';
            NEW_PIX_VAL -= PIX_SLIDE;
            if(NEW_PIX_VAL > 0)OBJ_SLIDE.style.height = NEW_PIX_VAL;
            if (NEW_PIX_VAL <= 0)
            {
                NEW_PIX_VAL = 0;
                OBJ_SLIDE.style.height = NEW_PIX_VAL
                clearInterval(TIMER_SLIDE);
                TIMER_SLIDE = null;
                OBJ_VIEW.setAttribute("state","0")
                MainDiv.setAttribute("state",NEW_PIX_VAL);
            }
        }
    }
    
    function ChangeStyle()
    {
        if (this.className == this.getAttribute("classOut"))
            this.className = this.getAttribute("classOver");
        else
            this.className = this.getAttribute("classOut");
    }

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Firefox requires that a unit be added to the value for the style.height. Try this
    Code:
    	/************************************************************************ 
    Author: Eric Simmons
    Contact: info@jswitch.com
    Website: http://www.jswitch.com
    Version: 1.0 4/2005       
    Browser Target: Mozilla 6+/FireFox Netscape 6+, IE 5.0+
    Type : XP style sliding dropdown menus (aka Switch Menu II on Dynamicdrive.com)
    Note: Modification by Dynamicdrive.com to dynamically determine sub menus widths
    
    v 1.0
    XP style sliding Menu Bar
    ***********************************************************************/
    
    var TIMER_SLIDE = null;
    var OBJ_SLIDE;
    var OBJ_VIEW;
    var PIX_SLIDE = 10; //this is the amount of slide/DELAY_SLIDE
    var NEW_PIX_VAL;
    var DELAY_SLIDE = 30; //this is the time between each call to slide
    var DIV_HEIGHT = 22; //value irrelevant
    var SUB_MENU_NUM =0;
    var RE_INIT_OBJ = null;
    var bMenu = document.getElementById("curMenu");
    var MainDiv,SubDiv
    
    //DD added code
    document.write('<div id="tempcontainer" class="mainDiv" style="visibility: hidden; position: absolute"></div>')
    
    function Init(objDiv)
    {
        if (TIMER_SLIDE == null)
        {
            SUB_MENU_NUM = 0;
            MainDiv = objDiv.parentNode;
            SubDiv =  MainDiv.getElementsByTagName("DIV").item(0);
            SubDiv.onclick = SetSlide;
            
            OBJ_SLIDE = MainDiv.getElementsByTagName("DIV").item(1)
            OBJ_VIEW = OBJ_SLIDE.getElementsByTagName("DIV").item(0);
    
    document.getElementById("tempcontainer").innerHTML=MainDiv.getElementsByTagName("DIV").item(2).innerHTML //DD added code
    DIV_HEIGHT=document.getElementById("tempcontainer").offsetHeight; //DD added code
            
            for (i=0;i<OBJ_VIEW.childNodes.length;i++)
            {
                if (OBJ_VIEW.childNodes.item(i).tagName == "SPAN")
                {
                    SUB_MENU_NUM ++;
                    OBJ_VIEW.childNodes.item(i).onmouseover= ChangeStyle;
                    OBJ_VIEW.childNodes.item(i).onmouseout= ChangeStyle;
                }
            }   
            
                  NEW_PIX_VAL = parseInt(MainDiv.getAttribute("state")); 
        }
    
    }
    function SetSlide()
    {   
    if (window.TIMER_SLIDE) clearInterval(TIMER_SLIDE) //DD added code
          if (TIMER_SLIDE == null && this.parentNode == MainDiv)
                TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
          else
          {
              RE_INIT_OBJ = this;
              setTimeout('ReInit()', 200);
          }
    }
    
    function ReInit(obj)
    {
        Init(RE_INIT_OBJ);
        TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
        RE_INIT_OBJ = null;
    }
    
    function RunSlide()
    {
    
        if (OBJ_VIEW.getAttribute("state") == 0)
        {
    
            NEW_PIX_VAL += PIX_SLIDE;
            OBJ_SLIDE.style.height = NEW_PIX_VAL+'px';
    
            if (NEW_PIX_VAL >= DIV_HEIGHT) //DD modified code
            {
                clearInterval(TIMER_SLIDE);
                TIMER_SLIDE = null;
                OBJ_VIEW.style.display = 'inline';
                OBJ_VIEW.setAttribute("state","1")
                MainDiv.setAttribute("state",NEW_PIX_VAL);
            }
        } else
        {
            OBJ_VIEW.style.display = 'none';
            NEW_PIX_VAL -= PIX_SLIDE;
            if(NEW_PIX_VAL > 0)OBJ_SLIDE.style.height = NEW_PIX_VAL+'px';
            if (NEW_PIX_VAL <= 0)
            {
                NEW_PIX_VAL = 0;
                OBJ_SLIDE.style.height = NEW_PIX_VAL+'px'
                clearInterval(TIMER_SLIDE);
                TIMER_SLIDE = null;
                OBJ_VIEW.setAttribute("state","0")
                MainDiv.setAttribute("state",NEW_PIX_VAL);
            }
        }
    }
    
    function ChangeStyle()
    {
        if (this.className == this.getAttribute("classOut"))
            this.className = this.getAttribute("classOver");
        else
            this.className = this.getAttribute("classOut");
    }
    TBH though, any script that requires you to make up your own attributes probably wasn't written too well.
    Last edited by _Aerospace_Eng_; 07-07-2006 at 05:28 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,628
    Thanks
    0
    Thanked 648 Times in 638 Posts
    The classOut and classOver garbage in the HTML will probably cause a lot of browsers to totally screw up. You can't just invent your own attributes with HTML or XHTML, you are limited to the predefined ones if you want it to work properly. If you want to define your own then use XML. Of course it would be easier to just use a properly written Javascript that works properly with HTML rather than trying to break the rules.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    This one seems better written and follows doesn't 'break' the rules to work. http://www.jswitch.com/index.php?page=js/xpmenu/xpmenu
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts
    Hey thanks for the new script, i'll implement it now. I never realised the author developed a fix for his script.


  •  

    Posting Permissions

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