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 7 of 7
  1. #1
    Regular Coder RexxCrow's Avatar
    Join Date
    Jul 2006
    Location
    California
    Posts
    275
    Thanks
    6
    Thanked 2 Times in 2 Posts

    2 probs with my JS menu, unable to figure what is wrong.

    I just pretty much copied this code w/ a few mods to is from one of my JS books to convert my CSS menu to JS as I was not successful with making it fully operational in CSS. The probs with this are:

    #1 In IE is acts funny swapping from block to none as you move from one button to the next, Firefox it works like a champ.

    #2 the second is that is does nto collapse the menus upon loading only after you mouse over them. (Would this need a onload or eventlistener to solve this issue?)

    I believe I have everything in order and have failed to see what I am missing, any assistance/advice would be great! thx. I am actually using a total of 9 sections but shortened it down to 4 for ease of viewing.


    Code:
    <HTML><HEAD><BASE target="menu"><script language="JavaScript" type="text/JavaScript"><!--
    (document.getElementById ? DOMCapable = true : DOMCapable = false);
    function conceal(menuPos) {
      if (DOMCapable) {
      var setMenu=document.getElementById(menuPos+"poslect");
      setMenu.style.display='none';
      }
    }
    function display(menuPos) {
      if (DOMCapable) {
      var setMenu=document.getElementById(menuPos+"poslect");
      setMenu.style.display='block';
      }
    }
    //--></script><STYLE TYPE="text/css"><!--
    BODY {background-color: #778899;}
    #setup {position: absolute; top: 10px; left: 10px; border-color: #B0C4DE; border-style: inset; border-width: 5px; font-family: Arial; font-size: 12px; text-align: center;}
    .menu a {white-space: nowrap; display: block; text-decoration: none; color: #F0FFFF; border-color: #B0C4DE; border-style: outset; border-width: 4px; padding: 2px 10px;}
    .menu a:hover {background-color: #B0C4DE; color: #F5F5F5;}
    .main {color: #FFFF00; font-weight: bold; cursor: default; border-color: #B0C4DE; border-style: outset; border-width: 4px; padding: 2px 10px;}
    DIV.main:hover {color: #F5F5F5; border-style: inset; border-width: 4px;}
    //--></STYLE></HEAD><BODY><DIV ID="setup";>
    <DIV ID="menu1"; CLASS="menu"; onMouseOver="display('menu1');" onMouseOut="conceal('menu1');">
    <DIV CLASS="main";>M1</DIV>
    <DIV ID="menu1poslect";>
    <a href="Docs\Doc1.HTML"; target="docView";>S1</a>
    <a href="Docs\Doc2.HTML"; target="docView";>S2</a>
    <a href="Docs\Doc3.HTML"; target="docView";>S3</a>
    <a href="Docs\Doc4.HTML"; target="docView";>S4</a>
    <a href="Docs\Doc5.HTML"; target="docView";>S5</a></DIV></DIV>
    <DIV ID="menu2"; CLASS="menu"; onMouseOver="display('menu2');" onMouseOut="conceal('menu2');">
    <DIV CLASS="main";>M2</DIV>
    <DIV ID="menu2poslect";>
    <a href="Docs\Doc8.HTML" target="docView";>S1</a>
    <a href="Docs\Doc9.HTML" target="docView";>S2</a>
    <a href="Docs\Doc10.HTML" target="docView";>S3</a>
    <a href="Docs\Doc11.HTML" target="docView";>S4</a>
    <a href="Docs\Doc12.HTML" target="docView";>S5</a></DIV></DIV>
    <DIV ID="menu3"; CLASS="menu"; onMouseOver="display('menu3');" onMouseOut="conceal('menu3');">
    <DIV CLASS="main";>M3</DIV>
    <DIV ID="menu3poslect";>
    <a href="Docs\Doc14.HTML" target="docView";>S1</a>
    <a href="Docs\Doc15.HTML" target="docView";>S2</a>
    <a href="Docs\Doc16.HTML" target="docView";>S3</a>
    <a href="Docs\Doc15.HTML" target="docView";>S4</a>
    <a href="Docs\Doc17.HTML" target="docView";>S5</a></DIV></DIV>
    <DIV ID="menu4"; CLASS="menu"; onMouseOver="display('menu4');" onMouseOut="conceal('menu4');">
    <DIV CLASS="main";>M4</DIV>
    <DIV ID="menu4poslect";>
    <a href="Docs\Doc18.HTML" target="docView";>S1</a>
    <a href="Docs\Doc19.HTML" target="docView";>S2</a>
    <a href="Docs\Doc20.HTML" target="docView";>S3</a>
    <a href="Docs\Doc21.HTML" target="docView";>S4</a>
    <a href="Docs\Doc15.HTML" target="docView";>S5</a></DIV></DIV>
    </DIV><script type="text/JavaScript"<!--
    if (DOMCapable) {
      conceal('menu1');
      conceal('menu2');
      conceal('menu3');
      conceal('menu4');
      }
    //--></script></BODY></HTML>

    edited: I just fixed the 2nd prob, I had STYLE closing rather then script, did not even catch that one! heh.

    Also I noticed another kinky prob, when you attempt to expand the last listing on the menu headers, it opens up near middle section instead and makes it very difficult to get to items within the last section, is there away around this?

    It also does work better in IE7b, but still has some probs with it, earlier I was testing on an old old IE version from the early 2000's and it was pretty crummy; I would expect that somewhat though, but in Firefox it should rock out like it is Fight night!
    Last edited by RexxCrow; 07-28-2006 at 08:20 AM.

  • #2
    Regular Coder RexxCrow's Avatar
    Join Date
    Jul 2006
    Location
    California
    Posts
    275
    Thanks
    6
    Thanked 2 Times in 2 Posts
    I am still needing assistance if there is any to offer, or am I just a lost cause?

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Not very good but
    Code:
    <HTML><HEAD><BASE target="menu"><script language="JavaScript" type="text/JavaScript"><!--
    (document.getElementById ? DOMCapable = true : DOMCapable = false);
    var Menu,setMenu,TO;
    
    function conceal(menuPos) {
     if (DOMCapable) {
      Menu=document.getElementById('setup');
      Menu.style.top='0px';
      setMenu=document.getElementById(menuPos+"poslect");
      TO=setTimeout("setMenu.style.display='none';",500);
     }
    }
    function display(menuPos) {
     clearTimeout(TO);
     if (DOMCapable) {
      Menu=document.getElementById('setup');
      Menu.style.top='0px';
      setMenu=document.getElementById(menuPos+"poslect");
      setMenu.style.display='';
      var ht=zxcWWHS()[1]+zxcWWHS()[3]-20;
      while (Menu.offsetTop+Menu.offsetHeight>ht){
       Menu.style.top=(parseInt(Menu.style.top)-2)+'px';
      }
     }
    }
    
    function zxcWWHS(){
     var winww,zxcwh,zxcsl,zxcst,zxcwc;
     if (window.innerHeight){
      zxcCur='pointer';
      zxcwh=window.innerHeight-20;
      zxcww=window.innerWidth-20;
      zxcsl=window.pageXOffset;
      zxcst=window.pageYOffset;
     }
     else if (document.documentElement.clientHeight){
      zxcCur='hand';
      zxcwh=document.documentElement.clientHeight;
      zxcww=document.documentElement.clientWidth;
      zxcsl=document.documentElement.scrollLeft;
      zxcst=document.documentElement.scrollTop;
     }
     else if (document.body.clientHeight){
       zxcwh=document.body.clientHeight;
       zxcww=document.body.clientWidth;
       zxcsl=document.body.scrollLeft;
       zxcst=document.body.scrollTop;
      }
     zxcwc=Math.round(zxcww/2);
     return [zxcww,zxcwh,zxcsl,zxcst];
    }
    
    
    function Init(){
     if (DOMCapable) {
      Init2('menu1');
      Init2('menu2');
      Init2('menu3');
      Init2('menu4');
      }
    }
    
    function Init2(menuPos) {
     if (DOMCapable) {
      setMenu=document.getElementById(menuPos+"poslect");
      setMenu.style.display='none';
     }
    }
    //-->
    </script>
    <STYLE TYPE="text/css"><!--
    BODY {background-color: #778899;}
    #setup {position: absolute; top: 10px; left: 10px; border-color: #B0C4DE; border-style: inset; border-width: 5px; font-family: Arial; font-size: 12px; text-align: center;}
    .menu a {white-space: nowrap; display: block; text-decoration: none; color: #F0FFFF; border-color: #B0C4DE; border-style: outset; border-width: 4px; padding: 2px 10px;}
    .menu a:hover {background-color: #B0C4DE; color: #F5F5F5;}
    .main {color: #FFFF00; font-weight: bold; cursor: default; border-color: #B0C4DE; border-style: outset; border-width: 4px; padding: 2px 10px;}
    DIV.main:hover {color: #F5F5F5; border-style: inset; border-width: 4px;}
    //--></STYLE></HEAD>
    <BODY onload="Init();"><DIV ID="setup";>
    <DIV ID="menu1"; CLASS="menu"; onMouseOver="display('menu1');" onMouseOut="conceal('menu1');">
    <DIV CLASS="main";>M1</DIV>
    <DIV ID="menu1poslect";>
    <a href="Docs\Doc1.HTML"; target="docView";>S1</a>
    <a href="Docs\Doc2.HTML"; target="docView";>S2</a>
    <a href="Docs\Doc3.HTML"; target="docView";>S3</a>
    <a href="Docs\Doc4.HTML"; target="docView";>S4</a>
    <a href="Docs\Doc5.HTML"; target="docView";>S5</a></DIV></DIV>
    <DIV ID="menu2"; CLASS="menu"; onMouseOver="display('menu2');" onMouseOut="conceal('menu2');">
    <DIV CLASS="main";>M2</DIV>
    <DIV ID="menu2poslect";>
    <a href="Docs\Doc8.HTML" target="docView";>S1</a>
    <a href="Docs\Doc9.HTML" target="docView";>S2</a>
    <a href="Docs\Doc10.HTML" target="docView";>S3</a>
    <a href="Docs\Doc11.HTML" target="docView";>S4</a>
    <a href="Docs\Doc12.HTML" target="docView";>S5</a></DIV></DIV>
    <DIV ID="menu3"; CLASS="menu"; onMouseOver="display('menu3');" onMouseOut="conceal('menu3');">
    <DIV CLASS="main";>M3</DIV>
    <DIV ID="menu3poslect";>
    <a href="Docs\Doc14.HTML" target="docView";>S1</a>
    <a href="Docs\Doc15.HTML" target="docView";>S2</a>
    <a href="Docs\Doc16.HTML" target="docView";>S3</a>
    <a href="Docs\Doc15.HTML" target="docView";>S4</a>
    <a href="Docs\Doc17.HTML" target="docView";>S5</a></DIV></DIV>
    <DIV ID="menu4"; CLASS="menu"; onMouseOver="display('menu4');" onMouseOut="conceal('menu4');">
    <DIV CLASS="main";>M4</DIV>
    <DIV ID="menu4poslect";>
    <a href="Docs\Doc18.HTML" target="docView";>S1</a>
    <a href="Docs\Doc19.HTML" target="docView";>S2</a>
    <a href="Docs\Doc20.HTML" target="docView";>S3</a>
    <a href="Docs\Doc21.HTML" target="docView";>S4</a>
    <a href="Docs\Doc15.HTML" target="docView";>S5</a>
    <a href="Docs\Doc18.HTML" target="docView";>S1</a>
    <a href="Docs\Doc19.HTML" target="docView";>S2</a>
    <a href="Docs\Doc20.HTML" target="docView";>S3</a>
    <a href="Docs\Doc21.HTML" target="docView";>S4</a>
    <a href="Docs\Doc15.HTML" target="docView";>S5</a>
    <a href="Docs\Doc18.HTML" target="docView";>S1</a>
    <a href="Docs\Doc19.HTML" target="docView";>S2</a>
    <a href="Docs\Doc20.HTML" target="docView";>S3</a>
    <a href="Docs\Doc21.HTML" target="docView";>S4</a>
    <a href="Docs\Doc15.HTML" target="docView";>S5</a>
    <a href="Docs\Doc18.HTML" target="docView";>S1</a>
    <a href="Docs\Doc19.HTML" target="docView";>S2</a>
    <a href="Docs\Doc20.HTML" target="docView";>S3</a>
    <a href="Docs\Doc21.HTML" target="docView";>S4</a>
    <a href="Docs\Doc15.HTML" target="docView";>S5</a>
    <a href="Docs\Doc18.HTML" target="docView";>S1</a>
    <a href="Docs\Doc19.HTML" target="docView";>S2</a>
    <a href="Docs\Doc20.HTML" target="docView";>S3</a>
    <a href="Docs\Doc21.HTML" target="docView";>S4</a>
    <a href="Docs\Doc15.HTML" target="docView";>S5</a>
    
    </DIV></DIV>
    </DIV>
    
    </BODY></HTML>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Regular Coder RexxCrow's Avatar
    Join Date
    Jul 2006
    Location
    California
    Posts
    275
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Holly molly that is some code, and sadly for me it has just confused that heck out of me, haha... one day I promise to become capable of completely understanding it though, one day, and that one day shall be soon! Thanks for the help Phillips, there is a prob though, It will not let the menus closeout, they are always expanded, i tested it without messing with anything, so I dont think I did something wrong to it.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    closes on mouseout for me.

    a good first effort
    but suggest you study other menu scripts before continuing.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    Regular Coder RexxCrow's Avatar
    Join Date
    Jul 2006
    Location
    California
    Posts
    275
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Ok as an exception I was tyring to get this to work though the timers appear to either need an array for the timeout and/or a while loop?

    This works but it "forgets" about the previous timeouts if the user opens another sub before the time is reached, thus leaving the menu expanded until it is allowed to reach the timeout by a new mouseover. I was hoping there is a fairly easy fix for this. THX.


    Code:
    var setMenu, TO
    function startup(menuPos) {
     setMenu=document.getElementById(menuPos+"poslect");
     setMenu.style.display='none';
    }
    function conceal(menuPos) {
     if (DOMCapable) {
     setMenu=document.getElementById(menuPos+"poslect");
     TO=setTimeout("setMenu.style.display='none';",250);
     }
    }
    function display(menuPos) {
     clearTimeout(TO);
     if (DOMCapable) {
     setMenu=document.getElementById(menuPos+"poslect");
     setMenu.style.display='block';
     }
    }
    
    <!--after the menu DIV's-->
    
    <script language="JavaScript" type="text/JavaScript"><!--
    if (DOMCapable) {
     startup('menu1');
     startup('menu2');
     startup('menu3');
     startup('menu4');
     startup('menu5');
     startup('menu6');
     startup('menu7');
     startup('menu8');
     startup('menu9');
     }
    //--></script>
    * Or what about placing the timeout inline before the conceal function, would that permit the same effect or is that just the same as, or is a var1, var2, var3 needed along with it. If this is is a permittable method is a cleartimer for each needed and if so would that also require a function in itself to clear the correct timer?
    Last edited by RexxCrow; 08-01-2006 at 10:39 AM.

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    var setMenu,TO,Lst;
    function startup(menuPos) {
     setMenu=document.getElementById(menuPos+"poslect");
     setMenu.style.display='none';
    }
    function conceal(menuPos) {
     setMenu=document.getElementById(menuPos+"poslect");
     TO=setTimeout("setMenu.style.display='none';",250);
    }
    
    function display(menuPos) {
     if (Lst){
      Lst.style.display='none';
     }
     clearTimeout(TO);
     setMenu=document.getElementById(menuPos+"poslect");
     setMenu.style.display='';
     Lst=setMenu;
    }
    or you need to object oriented script
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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