Re: [Staffslug] Javascript Problem
walt wrote:
Thanks. And you are right. I had already used alert to check the
IDs 2 or
3 days ago and it does work its way back from say c1 back up to a1 without
any help from me. None of the languages I have used do this or at least I
have never seen it happen.
I've got this to work now, at least on Firefox anyway. The new version
is below. I changed two things:
1. Calls to findChildren now pass an extra parameter, event, which is
the current event object.
2. At the start of findChildren is some extra code:
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
The first line get the current event, if one wasn't passed in (needed
for IE I believe), the other two turn off event propagation using two
methods to allow for browser differences.
The other thing that I spotted that you might want to change is that as
it stands, clicking on a "leaf" item (one with no children) collapses
the parent level. Adding a onclick handler that disables event
propagation, but does nothing else, would probably fix this.
=== SCRIPT ===
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
<head>
<title>Menu Test</title>
<style type="text/css">
[id^='a'], [id^='b'],[id^='c'],[id^='d']{
width:150px;
border:0px;
text-align:left;
}
[id^='b'],[id^='c'],[id^='d']{
display:none;
}
[id^='a']{
background-color:yellow;
display:block;
}
[id^='b']{
background-color:lightblue;
text-indent:20px;
}
[id^='c']{
background-color:lightgreen;
text-indent:40px;
}
[id^='d']{
background-color:orange;
text-indent:60px;
display:block;
}
</style>
<script language="JavaScript">
var count = 0;
function findChildren(tmp, e){
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
var temp = "";
var status ="";
var mm = document.getElementById(tmp.id).childNodes;
var l = mm.length;
var tempId=mm[1].id;
for (i=0; i<l; i++){
if ((mm[i].nodeType == 1) && (mm[i].id == tempId)){
temp = mm[i].style.display;
switch (temp){
case '': mm[i].style.display = 'block';
break;
case 'none': mm[i].style.display = 'block';
break;
case 'block': mm[i].style.display = 'none';
break;
}
}
}
}
</script>
</head>
<body>
This is a menu test!!
<br /><br />
<div id="Menu">Menu
<span id="a1" onclick="findChildren(this, event);">a-1 -->
<span id="b1" onclick="findChildren(this, event);">b-1 -->
<span id="c1">c-1</span>
<span id="c1">c-2</span>
<span id="c1">c-3</span>
</span>
<span id="b1">b-2</span>
<span id="b1">b-3</span>
</span>
<span id="a2" onclick="findChildren(this, event);">a-2 -->
<span id="b2" onclick="findChildren(this, event);">b-11
-->
<span id="c2">c-1x</span>
<span id="c2">c-2x</span>
<span id="c2">c-3x</span>
</span>
<span id="b2">b-22</span>
<span id="b2">b-33</span>
</span>
<span id="a3" onclick="findChildren(this, event);">a-3 -->
<span id="b3" onclick="findChildren(this, event);">b-111
-->
<span id="c3">c-1z</span>
<span id="c3">c-2z</span>
<span id="c3">c-3z</span>
</span>
<span id="b3">b-222</span>
<span id="b3">b-333</span>
</span>
</div>
<hr />
<span id='paste'></span>
</body>
</html>