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 12 of 12
  1. #1
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    please need help

    hello people!
    i have a problem with my menu tree
    when i click on one of menus , i want that another menus to be closed

    <script type="text/javascript">
    if (!document.getElementById)
    document.getElementById = function() { return null; }

    function initializeMenu(menuId, actuatorId) {
    var menu = document.getElementById(menuId);
    var actuator = document.getElementById(actuatorId);

    if (menu == null || actuator == null) return;
    actuator.parentNode.style.backgroundImage = "url(/test/close.gif)";
    actuator.onclick = function() {
    var display = menu.style.display;
    this.parentNode.style.backgroundImage =
    (display == "block") ? "url(/test/close.gif)" : "url(/test/open.gif)";
    menu.style.display = (display == "block") ? "none" : "block";

    return false;
    }
    }
    </script>
    <script type="text/javascript">
    window.onload = function() {
    initializeMenu("testMenu", "testActuator");
    initializeMenu("test1Menu", "test1Actuator");
    initializeMenu("test2Menu", "test2Actuator");

    }
    </script>


    please help
    Last edited by romang; 12-25-2005 at 10:39 AM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,496
    Thanks
    3
    Thanked 500 Times in 487 Posts
    welcome

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body>
    <script type="text/javascript">
    var MenuAry=new Array;
    
    if (!document.getElementById)
    document.getElementById = function() { return null; }
    
    function initializeMenu(menuId, actuatorId) {
     var menu = document.getElementById(menuId);
     var actuator = document.getElementById(actuatorId);
     if (!menu.set){
      menu.style.display = "none";
      menu.set=true;
      MenuAry.push(menu);
      actuator.menu=menu;
     }
     if (menu == null || actuator == null) return;
     actuator.parentNode.style.backgroundImage = "url(http://www.vicsjavascripts.org.uk/StdImages/Zero.gif)";
     actuator.onclick = function() {
      for (var zxc0=0;zxc0<MenuAry.length;zxc0++){
       if (MenuAry[zxc0]!=this.menu){
        MenuAry[zxc0].style.display = "none";
       }
      }
      var display = this.menu.style.display;
      this.parentNode.style.backgroundImage = (display == "block") ? "url(http://www.vicsjavascripts.org.uk/StdImages/One.gif)" : "url(http://www.vicsjavascripts.org.uk/StdImages/Two.gif)";
      this.menu.style.display = (display == "block") ? "none" : "block";
      return false;
     }
    }
    </script>
    <script type="text/javascript">
    window.onload = function() {
    initializeMenu("testMenu", "testActuator");
    initializeMenu("test1Menu", "test1Actuator");
    initializeMenu("test2Menu", "test2Actuator");
    
    }
    </script>
    <div style="position:relative;height:200px;width:100px;background-color:red;" >
    <div id="testActuator" style="position:relative;height:20px;width:100px;background-color:red;" ></div>
    <div id="testMenu" style="position:relative;height:20px;width:100px;background-color:green;" ></div>
    <br>
    <div id="test1Actuator" style="position:relative;height:20px;width:100px;background-color:red;" ></div>
    <div id="test1Menu" style="position:relative;height:20px;width:100px;background-color:green;" ></div>
    <br>
    <div id="test2Actuator" style="position:relative;height:20px;width:100px;background-color:red;" ></div>
    <div id="test2Menu" style="position:relative;height:20px;width:100px;background-color:green;" ></div>
    </div>
    </body>
    
    </html>

  • #3
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you very very match
    but something not work properly. i have only 2 picture(+ and -) and many sub levels .i see that you script support only two levels or no?
    when i click on menus1(+) sub menu need to open and picture change to (-) and than i click on another menu ,picture of menu1 need to return(+)
    thank you for help

  • #4
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this is example of my menu
    <body bgcolor="#CFD5E7" dir="rtl">
    <div id="mainMenu">
    <ul id="menuList">
    <li class="menubar"><a href="#" id="testActuator" class="actuator">menu1</a>
    <ul id="testMenu" class="menu">
    <li><a href="#" name="#">sub1</a></li>
    <li><a href="#" name="#">sub2</a></li>
    <li><a href="#" id="test1Actuator" class="actuator">submenu1</a>
    <ul id="test1Menu" class="submenu">
    <li><a href="#" name="#">sub1</a></li>
    <li><a href="#" name="#">sub2</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li class="menubar"><a href="#" id="test2Actuator" class="actuator">menu2</a>
    <ul id="test2Menu" class="menu">
    <li><a href="#" name="#">sub1</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </body>[/LEFT][/LEFT]

  • #5
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    to be more accurate i have 3 leveles. father->child ->grandchild

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,496
    Thanks
    3
    Thanked 500 Times in 487 Posts
    It is useful if you define the requirement on your first post

  • #7
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I apologize next time such will not repeat.

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,496
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Had problems with event bubbleing and cant figure the images but

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // by Vic Phillips (26-12-2005) http://www.vicsjavascripts.org.uk
    
    var zxcTO,zxcObj;
    
    function zxcMenuInit(zxcid){
     var zxcmobj=document.getElementById(zxcid);
     zxcmobj.level1=[];
     zxcmobj.level2=[];
     var zxcli=zxcmobj.getElementsByTagName('LI');
     for (var zxc0=0;zxc0<zxcli.length;zxc0++){
      if (zxcli[zxc0].className.match('level1')){
       zxcli[zxc0].ary=zxcli[zxc0].getElementsByTagName('UL');
       zxcli[zxc0].pobj=zxcmobj;
       zxcmobj.level1[zxcmobj.level1.length]=zxcli[zxc0];
       zxcli[zxc0].onclick=function(){ zxcDisplay(this,1); }
       zxcli2=zxcli[zxc0].getElementsByTagName('LI');
       for (var zxc1=0;zxc1<zxcli2.length;zxc1++){
        if (zxcli2[zxc1].className.match('level2')){
         zxcli2[zxc1].onclick=function(){ zxcDisplay(this,2); }
         zxcli2[zxc1].ary=zxcli2[zxc1].getElementsByTagName('UL');
         zxcmobj.level2[zxcmobj.level2.length]=zxcli2[zxc1];
         zxcli2[zxc1].pobj=zxcmobj;
        }
       }
      }
     }
     zxcHideLevel2(zxcmobj,zxcmobj);
     zxcHideLevel1(zxcmobj,zxcmobj);
    }
    
    function zxcHideLevel2(zxcobj,zxctobj){
     for (var zxc2=0;zxc2<zxcobj.level2.length;zxc2++){
      if (zxcobj.level2[zxc2]!=zxctobj){
       zxcobj.level2[zxc2].display='none';
      }
      for (var zxc2A=0;zxc2A<zxcobj.level2[zxc2].ary.length;zxc2A++){
       zxcobj.level2[zxc2].ary[zxc2A].style.display='none';
      }
     }
    }
    function zxcHideLevel1(zxcobj,zxctobj){
     for (var zxc3=0;zxc3<zxcobj.level1.length;zxc3++){
      if (zxcobj.level1[zxc3]!=zxctobj){
       zxcobj.level1[zxc3].display='none';
      }
      for (var zxc3A=0;zxc3A<zxcobj.level1[zxc3].ary.length;zxc3A++){
       zxcobj.level1[zxc3].ary[zxc3A].style.display='none';
      }
     }
    }
    
    function zxcDisplay(zxcobj,zxcl){
     if (zxcl==2){ setTimeout('clearTimeout(zxcTO)',100); zxcDisplay2(zxcobj); return; }
     zxcObj=zxcobj
     zxcTO=setTimeout('zxcDisplay1(zxcObj)',200);
    }
    
    function zxcDisplay1(zxcobj){
     zxcHideLevel1(zxcobj.pobj,zxcobj);
     if (zxcobj.display=='none'){
      zxcobj.display='';
     }
     else {
      zxcobj.display='none';
     }
     for (var zxc1=0;zxc1<zxcobj.ary.length;zxc1++){
      zxcobj.ary[zxc1].style.display=zxcobj.display;
     }
     zxcHideLevel2(zxcobj.pobj,zxcobj.pobj);
    }
    
    function zxcDisplay2(zxcobj){
     zxcHideLevel2(zxcobj.pobj,zxcobj);
     if (zxcobj.display=='none'){
      zxcobj.display='';
     }
     else {
      zxcobj.display='none';
     }
     for (var zxc1=0;zxc1<zxcobj.ary.length;zxc1++){
      zxcobj.ary[zxc1].style.display=zxcobj.display;
     }
    }
    
    //-->
    </script>
    </head>
    
    <body bgcolor="#CFD5E7" onload="zxcMenuInit('mainMenu');">
    <div id="mainMenu">
    
     <ul id="menuList">
      <li class="level1" ><a href="javascript:void('')" >menu1</a>
       <ul id="">
        <li><a href="#" name="#">sub1</a></li>
        <li><a href="#" name="#">sub2</a></li>
        <li class="level2" ><a href="javascript:void('')" >submenu1</a>
         <ul>
          <li><a href="#" name="#">sub1</a></li>
          <li><a href="#" name="#">sub2</a></li>
         </ul>
        </li>
       </ul>
      </li>
      <li class="level1"><a href="javascript:void('')">menu2</a>
       <ul id="testMenu" >
        <li><a href="#" name="#">sub1</a></li>
       </ul>
      </li>
    
     </ul>
    
    </div>
    </body>
    
    </html>

  • #9
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you very match

  • #10
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    And last question as I can turn the menu that looked on the right on left
    Thanks

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,496
    Thanks
    3
    Thanked 500 Times in 487 Posts
    using display no.

    try posing on a CSS forum, may be some clever tricks

  • #12
    New Coder
    Join Date
    Dec 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks


  •  

    Posting Permissions

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