...

View Full Version : javascript assistance required



Franklin
10-27-2004, 07:38 PM
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.




<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

Roy Sinclair
10-27-2004, 09:05 PM
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.

Franklin
10-27-2004, 11:35 PM
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.



<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>

Garadon
10-28-2004, 07:30 AM
<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>

Franklin
10-28-2004, 06:16 PM
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.

Roy Sinclair
10-28-2004, 07:01 PM
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.

Franklin
10-30-2004, 11:59 AM
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.



<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.dis play='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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum