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
    New Coder
    Join Date
    Oct 2004
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    javascript assistance required

    Hello

    I am writing a tree menu script. I am very new at javascript and programming website in general.
    My script is very simple but I wish to expand its capabilities. I would want to close the previous expanded element when I expand a new element. As of right now it only closes when I manually close it myself.


    Code:
    <script>
    function menu(id1,id2){
    a=document.getElementById(id1);
    b=document.getElementById(id2);
    if(a.style.display=='none'){a.style.display='block'}else{a.style.display='none'};
    if(b.src.indexOf('plus.gif')!=-1){b.src='minus.gif'}else{b.src='plus.gif'};}
    </script>
    <div id="c1"><img style="cursor:pointer; cursor:hand" onclick="menu('a1','b1')" id="b1" src="plus.gif">Link1</div>
    <div id="a1" style="display:none">
    <div>Link1</div>
    <div>Link1</div>
    <div>Link1</div>
    <div>Link1</div>
    </div>
    <div id="c2"><img style="cursor:pointer; cursor:hand" onclick="menu('a2','b2')" id="b2" src="plus.gif">Link2</div>
    <div id=a2 style="display:none">
    <div>Link2</div>
    <div>Link2</div>
    <div>Link2</div>
    <div>Link2</div>
    </div>
    <div id="c3"><img style="cursor:pointer; cursor:hand" onclick="menu('a3','b3')" id="b3" src="plus.gif">Link3</div>
    <div id=a3 style="display:none">
    <div>Link3</div>
    <div>Link3</div>
    <div>Link3</div>
    <div>Link3</div>
    </div>
    Thank you in advance for all your assistance.

    Franklin Douglas

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    To know that you need to close a previous element you need to have a variable set to null (initially) or to the current open element. Then before you open a new element you check the variable and if it isn't null you use that variable to close the current open element. As you open the new element make sure you set the variable to point to the new open element.

    Alternatively you can simply cycle through all the elements and close them all whether they're open or not but as the number of elements increases that process can get rather long.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #3
    New Coder
    Join Date
    Oct 2004
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you Roy.

    To know that you need to close a previous element you need to have a variable set to null (initially) or to the current open element. Then before you open a new element you check the variable and if it isn't null you use that variable to close the current open element. As you open the new element make sure you set the variable to point to the new open element.
    I don't know enough about javascript to make something like that. If you could give me a code example that would be very helpful.

    For the alternative suggestion I was able to write something. But it is very unstable. The images does not match and I am unable to have submenus. But I'll post it anyway.

    Code:
    <script>
    function menu(id1,id2){
    a=document.getElementById(id1);
    b=document.getElementById(id2);
    c=document.getElementById('master').getElementsByTagName("div"); 
    if(a.style.display=='none'){
    for(i=0;i<c.length;i++){
    if(c[i].style.display=="block")
    c[i].style.display="none"}}
    if(a.style.display=='none'){a.style.display='block'}else{a.style.display='none'};
    if(b.src.indexOf('plus.gif')!=-1){b.src='minus.gif'}else{b.src='plus.gif'};}
    </script>

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <script>
    var opened=null;
    var openedpic=null;
    function menu(openThis){
      openPic=document.getElementById('b'+openThis);	
      openThis=document.getElementById('a'+openThis);
    
      if(openThis.style.display=='none')
      {
        openThis.style.display='block';
    		if(opened!=null)
    		{
          opened.style.display='none';
          openedpic.src='plus.gif';
    		}	
    		opened=openThis;
        openPic.src='minus.gif';
    		openedpic=openPic;		
      }
    	else
    	{
    	  openThis.style.display='none';
        openPic.src='plus.gif';
    		opened=null;
    		openedpic=null;
    	};
    }
    </script>
    <div id="c1"><img style="cursor:pointer; cursor:hand" onclick="menu('1')" id="b1" src="plus.gif">Link1</div>
    <div id="a1" style="display:none">
    <div>Link1</div>
    <div>Link1</div>
    <div>Link1</div>
    <div>Link1</div>
    </div>
    <div id="c2"><img style="cursor:pointer; cursor:hand" onclick="menu('2')" id="b2" src="plus.gif">Link2</div>
    <div id=a2 style="display:none">
    <div>Link2</div>
    <div>Link2</div>
    <div>Link2</div>
    <div>Link2</div>
    </div>
    <div id="c3"><img style="cursor:pointer; cursor:hand" onclick="menu('3')" id="b3" src="plus.gif">Link3</div>
    <div id=a3 style="display:none">
    <div>Link3</div>
    <div>Link3</div>
    <div>Link3</div>
    <div>Link3</div>
    </div>

  • #5
    New Coder
    Join Date
    Oct 2004
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you all for your replies.

    Your script, Garadon, does not support submenues. I've been trying to alter it without any success. It does however fix my imagery problem. I wonder if it is because the script can't distinguish what it is collapsing so that if you try to expand a submenu it collapses before you can expand it. What do you think? Do you have any suggestion how I can solve this?

    Franklin Douglas.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Multi-level expanding/collapsing menus can be quite tricky, you have to keep the status of each level and decide whether to revert to "all submenus closed" or "as you last left it" for the submenu when the user re-opens a submenu. Most revert to "all submenus closed" (much like the Windows menus) but it actually takes more work since you've got to iterate through the levels to ensure they are all closed.

    I suggest you take a look at some of the other menus out there, many of them are based on <ul><li><ul><li><a/></li></ul><li><a/></li></ul> tags instead of using div tags since a menu is symantically a list of links. That also provides some fallback for javascript disabled browsers, one of the emerging concepts of web design is that navigation should never rely on javascript, it can be enhanced by javascript but the links should always be available and function for the javascript disabled users.

    Now I saw your rant about purchased vs open menus but you really should look at this menu http://www.brothercake.com/dropdown/ and you can see the open code for an earlier version of that menu here on this forum under the "Post a Javascript" forum. I think you'll find a thorough investigation of that menu well worth your time.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #7
    New Coder
    Join Date
    Oct 2004
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Roy. You're right I'll change my menu to a listform, it makes sense. I'm sure that it is a good menu. But I need to learn javascript, I hope haven't offended anyone.

    As for my menu. I suppose I have approached it this way: I intend to loop; 1. find the old id, 2. find all style.display=block within the list and change them to none. 3. change the new id to block.

    Though I can't seem to get my loop to work.

    Code:
    <script>
    oldid1='';
    oldid2='';
    function menu(id1,id2){
    a=document.getElementById('a'+id1);
    b=document.getElementById('b'+id1);
    if(oldid1=='' && oldid2==''){a.style.display='block';b.src='minus.gif'};
    if(oldid1!='' && oldid2!='' && id1==oldid1){if(a.style.display=='none'){a.style.display='block';b.src='minus.gif';}else{a.style.display='none';b.src='plus.gif';}};
    if(oldid1!='' && oldid2!='' && id1!=oldid1 && id2=='0'){
    c=document.getElementById('a'+oldid1).getElementsByTagName('div');
    for(i=0;i<c.length;i++){
    if(c[i].style.display=='block'){c[i].style.display='none';}}
    a.style.display='block';b.src='minus.gif'};
    oldid1=id1;
    oldid2=id2;}
    </script>
    <div id="master">
    <div id="c1"><img style="cursor:pointer; cursor:hand" onclick="menu('1','0')" id="b1" src="plus.gif">Link1</div>
    <div id="a1" style="display:none">
    <div>Link1</div>
    <div>Link1</div>
    <div>Link1</div>
    <div>Link1</div>
    <div id="c4"><img style="cursor:pointer; cursor:hand" onclick="menu('4','1')" id="b4" src="plus.gif">Link4</div>
    <div id="a4" style="display:none">
    <div>Link4</div>
    <div>Link4</div>
    <div>Link4</div>
    <div>Link4</div>
    </div>
    <div id="c5"><img style="cursor:pointer; cursor:hand" onclick="menu('5','1')" id="b5" src="plus.gif">Link5</div>
    <div id="a5" style="display:none">
    <div>Link5</div>
    <div>Link5</div>
    <div>Link5</div>
    <div>Link5</div>
    </div>
    </div>
    <div id="c2"><img style="cursor:pointer; cursor:hand" onclick="menu('2','0')" id="b2" src="plus.gif">Link2</div>
    <div id=a2 style="display:none">
    <div>Link2</div>
    <div>Link2</div>
    <div>Link2</div>
    <div>Link2</div>
    </div>
    <div id="c3"><img style="cursor:pointer; cursor:hand" onclick="menu('3','0')" id="b3" src="plus.gif">Link3</div>
    <div id=a3 style="display:none">
    <div>Link3</div>
    <div>Link3</div>
    <div>Link3</div>
    <div>Link3</div>
    </div>
    </div>


  •  

    Posting Permissions

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