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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help noob, menu script

    Hi,

    I am a novice, trying to make a menu script. It is a simple 2-level hierarchy, using a query string to keep open the branch which was clicked. It also adds a style the selected page link (red).

    If you save this html as page1 and page2, you can see, that the menu will close all open branches when you click a new one. This is what I wanted. But, sometimes it does not... sometimes 2 branches can be open at the same time. I need it to have only 1 branch open at a time.

    Please understand that I can barely write one line of code without breaking it all... I didn't write the menuOPen function. I can understand the problem is that I have assigned 2 items the "menuopen" state, but any time I touch the script at this point, I break everything. OH and there's an error in the script too but I don't know what it is.

    Thanks for any help.
    Trinzia


    Code:
    <html>
    <head>
    <title>persist menu</title>
      <style type="text/css">
      div.menuclosed div.sublinks { display: none; }
      div.menuopen {display:visible;}
      .toplink { display:block; padding:3px 2px 3px 5px; 
    	text-decoration:none; color:#006099; 
    	border-top: 1px solid #cccccc;}
      .sublinks a { display:block; padding:2px 2px 5px 26px; text-decoration:none;}
      .sublinks a:link { color:#006099;}
      .sublinks a:visited { color:#006099;}
      .sublinks a:hover { color:#996000; background:#eeeeee;}
      .selected {color:#ff2222 !important;}
      </style>
    
    <script language="javascript" type="text/javascript">
    var theDiv;
    var selectParent;
    function checkMenu(){
     var result = location.search.split("=");
     var selected = document.getElementById(result[1]);
     selected.className="selected";
     selectParent = selected.parentNode.parentNode;
     selectParent.className = "menuopen";
    }
    
    function openMenu(toplink) {
      if(theDiv){
        theDiv.className = "menuclosed";
        if(theDiv==toplink.parentNode){
          theDiv = null;
          return false;
        }
      }
      theDiv = toplink.parentNode;
      theDiv.className = "menuopen";
    }
    
    
    </script>
    </head>
    <body onLoad="checkMenu()">
    
    <div class="menuclosed" id="a">
    <a class="toplink" href="#" onclick="openMenu(this); return false;">Branch A</a>
      <div class="sublinks">
      <a href="page1.html?menuItem=a1" id="a1">Link Page a1</a>
      <a href="page2.html?menuItem=a2" id="a2">Link Page a2</a>
      </div>
    </div>
    <div class="menuclosed" id="b">
    <a class="toplink" href="#" onclick="openMenu(this); return false;">Branch B</a>
      <div class="sublinks">
      <a href="page1.html?menuItem=b1" id="b1">Link Page b1</a>
      <a href="page2.html?menuItem=b2" id="b2">Link Page b2</a>
      </div>
    </div>
    
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <html>
    <head>
    <title>persist menu</title>
      <style type="text/css">
      div.menuclosed div.sublinks { display: none; }
      div.menuopen {display:visible;}
      .toplink { display:block; padding:3px 2px 3px 5px;
    	text-decoration:none; color:#006099;
    	border-top: 1px solid #cccccc;}
      .sublinks a { display:block; padding:2px 2px 5px 26px; text-decoration:none;}
      .sublinks a:link { color:#006099;}
      .sublinks a:visited { color:#006099;}
      .sublinks a:hover { color:#996000; background:#eeeeee;}
      .selected {color:#ff2222 !important;}
      </style>
    
    <script language="javascript" type="text/javascript">
    var theDiv;
    var selectParent;
    function checkMenu(){
     document.getElementById('a').className='menuclosed';
     document.getElementById('b').className='menuclosed';
     var result = location.search.split("=");
     var selected = document.getElementById(result[1]);
     if (!selected){ return; }
     selected.className="selected";
     selectParent = selected.parentNode.parentNode;
     selectParent.className = "menuopen";
    }
    
    function openMenu(toplink,id) {
      document.getElementById(id).className='menuclosed';
      if(theDiv){
        theDiv.className = "menuclosed";
        if(theDiv==toplink.parentNode){
          theDiv = null;
          return false;
        }
      }
      theDiv = toplink.parentNode;
      theDiv.className = "menuopen";
    }
    
    
    </script>
    </head>
    <body onLoad="checkMenu()">
    Page2
    <div class="menuclosed" id="a">
    <a class="toplink" href="#" onclick="openMenu(this,'b'); return false;">Branch A</a>
      <div class="sublinks">
      <a href="page1.html?menuItem=a1" id="a1">Link Page a1</a>
      <a href="page2.html?menuItem=a2" id="a2">Link Page a2</a>
      </div>
    </div>
    <div class="menuclosed" id="b">
    <a class="toplink" href="#" onclick="openMenu(this,'a'); return false;">Branch B</a>
      <div class="sublinks">
      <a href="page1.html?menuItem=b1" id="b1">Link Page b1</a>
      <a href="page2.html?menuItem=b2" id="b2">Link Page b2</a>
      </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/

  • #3
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That did the trick, thanks so much, vwphillips! What a relief, after a week trying to solve this! Thx!


  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    be easier using a cookie

    say if interested
    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/

  • #5
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The script is for cookie-disabled site.

    However, can anyone do it so I don't have to have list the parent IDs? That would quickly become complicated on a menu with 500 links. Perhaps using getElementbyClass, close them all, and then apply the menuOpen style to the correct one?

    Thanks

  • #6
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    or better, get the item that has menuOpen class on it, close it, then place menuOpen onto the new one. that would be better right?

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <html>
    <head>
    <title>persist menu</title>
      <style type="text/css">
      div.menuclosed div.sublinks { display: none; }
      div.menuopen {display:visible;}
      .toplink { display:block; padding:3px 2px 3px 5px;
    	text-decoration:none; color:#006099;
    	border-top: 1px solid #cccccc;}
      .sublinks a { display:block; padding:2px 2px 5px 26px; text-decoration:none;}
      .sublinks a:link { color:#006099;}
      .sublinks a:visited { color:#006099;}
      .sublinks a:hover { color:#996000; background:#eeeeee;}
      .selected {color:#ff2222 !important;}
      </style>
    
    <script language="javascript" type="text/javascript">
    var theDiv;
    var selectParent;
    var Ary=[];
    
    function checkMenu(){
     var divs=document.getElementsByTagName('BODY')[0].getElementsByTagName('DIV');
     var cnt=0;
     for (var zxc0=0;zxc0<divs.length;zxc0++){
      if (divs[zxc0].className=='menuclosed'){
       Ary.push(divs[zxc0]);
       var as=divs[zxc0].getElementsByTagName('A')
       for (var zxc1=0;zxc1<as.length;zxc1++){
        as[zxc1].href+='?'+cnt;
       }
       cnt++
      }
     }
     var div=location.search.split('?')[1];
     if (div){ Ary[parseInt(div)].className='menuopen'; }
    }
    
    function openMenu(toplink,id) {
      document.getElementById(id).className='menuclosed';
      if(theDiv){
        theDiv.className = "menuclosed";
        if(theDiv==toplink.parentNode){
          theDiv = null;
          return false;
        }
      }
      theDiv = toplink.parentNode;
      theDiv.className = "menuopen";
    }
    
    </script>
    </head>
    <body onLoad="checkMenu()">
    Page1
    <div class="menuclosed" id="a">
    <a class="toplink" href="#" onclick="openMenu(this,'b'); return false;">Branch A</a>
      <div class="sublinks">
      <a href="page1.html" id="a1">Link Page a1</a>
      <a href="page2.html" id="a2">Link Page a2</a>
      </div>
    </div>
    <div class="menuclosed" id="b">
    <a class="toplink" href="#" onclick="openMenu(this,'a'); return false;">Branch B</a>
      <div class="sublinks">
      <a href="page1.html" id="b1">Link Page b1</a>
      <a href="page2.html" id="b2">Link Page b2</a>
      </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/

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    better
    Code:
    <html>
    <head>
    <title>persist menu</title>
      <style type="text/css">
      div.menuclosed div.sublinks { display: none; }
      div.menuopen {display:visible;}
      .toplink { display:block; padding:3px 2px 3px 5px;
    	text-decoration:none; color:#006099;
    	border-top: 1px solid #cccccc;}
      .sublinks a { display:block; padding:2px 2px 5px 26px; text-decoration:none;}
      .sublinks a:link { color:#006099;}
      .sublinks a:visited { color:#006099;}
      .sublinks a:hover { color:#996000; background:#eeeeee;}
      .selected {color:#ff2222 !important;}
      </style>
    
    <script language="javascript" type="text/javascript">
    
    var Ary=[];
    var Cls='menuclosed';
    
    function checkMenu(){
     var divs=document.getElementsByTagName('BODY')[0].getElementsByTagName('DIV');
     var cnt=0;
     for (var zxc0=0;zxc0<divs.length;zxc0++){
      if (divs[zxc0].className=='menuclosed'){
       Ary.push(divs[zxc0]);
      }
     }
     ALinks();
     var div=location.search.split('?')[1];
     if (div){ Ary[parseInt(div.split(':')[0])].className=div.split(':')[1]; }
    }
    
    function ALinks(){
     for (var zxc1=0;zxc1<Ary.length;zxc1++){
      var as=Ary[zxc1].getElementsByTagName('A')
      for (var zxc2=0;zxc2<as.length;zxc2++){
       as[zxc2].href=as[zxc2].href.substring(0,as[zxc2].href.indexOf('?'));
       as[zxc2].href+='?'+zxc1+':'+Cls;
      }
     }
    }
    
    function openMenu(toplink) {
     var div=toplink.parentNode;
     for (var zxc0=0;zxc0<Ary.length;zxc0++){
      if (Ary[zxc0]==div){
       Ary[zxc0].className=(Ary[zxc0].className=='menuclosed')?'menuopen':'menuclosed';
       Cls=Ary[zxc0].className;
      }
      else {
       Ary[zxc0].className='menuclosed';
      }
     }
     ALinks();
    }
    
    </script>
    </head>
    <body onLoad="checkMenu()">
    Page1
    <div class="menuclosed" id="a">
    <a class="toplink" href="#" onclick="openMenu(this); return false;">Branch A</a>
      <div class="sublinks">
      <a href="page1.html?" id="a1">Link Page a1</a>
      <a href="page2.html?" id="a2">Link Page a2</a>
      </div>
    </div>
    <div class="menuclosed" id="b">
    <a class="toplink" href="#" onclick="openMenu(this); return false;">Branch B</a>
      <div class="sublinks">
      <a href="page1.html?" id="b1">Link Page b1</a>
      <a href="page2.html?" id="b2">Link Page b2</a>
      </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/


  •  

    Posting Permissions

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