5:57 p.m.
Hi,
Would it be ok to submit a javascript problem?. I simply cannot figure out
why a function exits and is called again from somewhere but I am stumped as
to how it happens. I am not a programmer but I have done quite a bit of
scripting.
I have tried in all major browser and the problem occurs in all of them.
I'll post the whole script, html - css and javascript with a description of
the problem if one of you clever guys wouldn't mind have a quick look.
Very many thanks, Walter
5:59 p.m.
Give it a go, the worst that could happen is that no one else knows :-)
On Thu, Feb 18, 2010 at 5:57 PM, walt <walt(a)helvatron.co.uk> wrote:
Hi,
Would it be ok to submit a javascript problem?. I simply cannot figure out
why a function exits and is called again from somewhere but I am stumped as
to how it happens. I am not a programmer but I have done quite a bit of
scripting.
I have tried in all major browser and the problem occurs in all of them.
I'll post the whole script, html - css and javascript with a description of
the problem if one of you clever guys wouldn't mind have a quick look.
Very many thanks, Walter
_______________________________________________
Staffslug mailing list
Staffslug(a)staffslug.org.uk
http://lists.staffslug.org.uk/mailman/listinfo/staffslug
6:07 p.m.
Or that his script breaks the Internet and brings down our mailing list!!!!
On 18 February 2010 17:59, Tig <staffslug(a)caveconnect.com> wrote:
Give it a go, the worst that could happen is that no one else knows
:-)
On Thu, Feb 18, 2010 at 5:57 PM, walt <walt(a)helvatron.co.uk> wrote:
> Hi,
>
> Would it be ok to submit a javascript problem?. I simply cannot figure out
> why a function exits and is called again from somewhere but I am stumped as
> to how it happens. I am not a programmer but I have done quite a bit of
> scripting.
>
> I have tried in all major browser and the problem occurs in all of them.
> I'll post the whole script, html - css and javascript with a description of
> the problem if one of you clever guys wouldn't mind have a quick look.
>
> Very many thanks, Walter
>
>
> _______________________________________________
> Staffslug mailing list
> Staffslug(a)staffslug.org.uk
> http://lists.staffslug.org.uk/mailman/listinfo/staffslug
>
_______________________________________________
Staffslug mailing list
Staffslug(a)staffslug.org.uk
http://lists.staffslug.org.uk/mailman/listinfo/staffslug
6:22 p.m.
OK, here we go. The script is below the problem description and simply
represents a simplified version to illustrate the problem which I have not
been able to solve. I have spent ours on Google without tracking down the
issue.
It's menu script where I am using html/css dom to access the attributes. I
want to change the display attribute on child elements from 'none' to
'block' and the other way round when the parent node is clicked. That is
the basics but I want to refine that after this problem gets solved, if it
solvable.
The interesting and very annoying thing is that it works fine when applying
the 'block' attribute to the child nodes of the first parent 'a-1' which
shows and hides the child nodes fine. When I click the 'b-1' node that
works too BUT then the function exits and is called again from somewhere.
The alert('Exiting Function'); is there to show what's happening. The
function does terminate and then is called again as you will see.
I thought it might be the 'onclick' calls in the sibling elements but when I
take them out it still happens.
So, any hints as to what's going on are appreciated. This is definitely out
of my league.
Thanks, Walter
Start of 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){
//alert(count++);
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;
}
}
}
alert('Exiting Function');
}
</script>
</head>
<body>
This is a menu test!!
<br /><br />
<div id="Menu">Menu
<span id="a1" onclick="findChildren(this);">a-1 -->
<span id="b1" onclick="findChildren(this);">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);">a-2 -->
<span id="b2" onclick="findChildren(this);">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);">a-3 -->
<span id="b3" onclick="findChildren(this);">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>
---------------------------------------------------------->
End of SCRIPT:
-----Original Message-----
From: staffslug-bounces(a)staffslug.org.uk
[mailto:staffslug-bounces@staffslug.org.uk] On Behalf Of Tig
Sent: 18 February 2010 17:59
To: staffslug(a)staffslug.org.uk
Subject: Re: [Staffslug] Javascript Problem
Give it a go, the worst that could happen is that no one else knows :-)
On Thu, Feb 18, 2010 at 5:57 PM, walt <walt(a)helvatron.co.uk> wrote:
Hi,
Would it be ok to submit a javascript problem?. I simply cannot figure out
why a function exits and is called again from somewhere but I am stumped
as
to how it happens. I am not a programmer but I have done quite a bit
of
scripting.
I have tried in all major browser and the problem occurs in all of them.
I'll post the whole script, html - css and javascript with a description
of
the problem if one of you clever guys wouldn't mind have a quick
look.
Very many thanks, Walter
_______________________________________________
Staffslug mailing list
Staffslug(a)staffslug.org.uk
http://lists.staffslug.org.uk/mailman/listinfo/staffslug
_______________________________________________
Staffslug mailing list
Staffslug(a)staffslug.org.uk
http://lists.staffslug.org.uk/mailman/listinfo/staffslug
6:51 p.m.
walt wrote:
[snipped]
I thought it might be the 'onclick' calls in the sibling elements but when I
take them out it still happens.
[snipped]
What's happening here is event propagation: the event "bubbles up"
through the elements, so findChildren is called for b1, then called for
a1, causing the effect you are seeing. You can prove this by having
findChildren produce an alert with the id of the element it is being
called for.
I don't have time to do it right now, but I'll see if I can sort out a
fix later (I'm no Javascript expert though). In the meantime, you might
want to try looking into "Javascript event propagation".
Hope this helps,
Dave.
7:19 p.m.
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.
Anyway, I'll check out event propagation later on. Meantime thanks for your
offer to look into a fix. No rush! I just wanted to understand dom and then
thought I could use all these javascript tricks to generate a nifty menu
system. :-)
Regards, Walter
-----Original Message-----
From: staffslug-bounces(a)staffslug.org.uk
[mailto:staffslug-bounces@staffslug.org.uk] On Behalf Of David Boucher
Sent: 18 February 2010 18:51
To: staffslug(a)staffslug.org.uk
Subject: Re: [Staffslug] Javascript Problem
walt wrote:
[snipped]
I thought it might be the 'onclick' calls in the sibling elements but when
I
take them out it still happens.
[snipped]
What's happening here is event propagation: the event "bubbles up"
through the elements, so findChildren is called for b1, then called for
a1, causing the effect you are seeing. You can prove this by having
findChildren produce an alert with the id of the element it is being
called for.
I don't have time to do it right now, but I'll see if I can sort out a
fix later (I'm no Javascript expert though). In the meantime, you might
want to try looking into "Javascript event propagation".
Hope this helps,
Dave.
_______________________________________________
Staffslug mailing list
Staffslug(a)staffslug.org.uk
http://lists.staffslug.org.uk/mailman/listinfo/staffslug
7:22 p.m.
Just to check...
Are you the gentleman from Canada who came to the October (I think) meeting?
Adam
On 18 February 2010 19:19, walt <walt(a)helvatron.co.uk> 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.
Anyway, I'll check out event propagation later on. Meantime thanks for your
offer to look into a fix. No rush! I just wanted to understand dom and then
thought I could use all these javascript tricks to generate a nifty menu
system. :-)
Regards, Walter
-----Original Message-----
From: staffslug-bounces(a)staffslug.org.uk
[mailto:staffslug-bounces@staffslug.org.uk] On Behalf Of David Boucher
Sent: 18 February 2010 18:51
To: staffslug(a)staffslug.org.uk
Subject: Re: [Staffslug] Javascript Problem
walt wrote:
> [snipped]
> I thought it might be the 'onclick' calls in the sibling elements but when
I
> take them out it still happens.
> [snipped]
What's happening here is event propagation: the event "bubbles up"
through the elements, so findChildren is called for b1, then called for
a1, causing the effect you are seeing. You can prove this by having
findChildren produce an alert with the id of the element it is being
called for.
I don't have time to do it right now, but I'll see if I can sort out a
fix later (I'm no Javascript expert though). In the meantime, you might
want to try looking into "Javascript event propagation".
Hope this helps,
Dave.
_______________________________________________
Staffslug mailing list
Staffslug(a)staffslug.org.uk
http://lists.staffslug.org.uk/mailman/listinfo/staffslug
_______________________________________________
Staffslug mailing list
Staffslug(a)staffslug.org.uk
http://lists.staffslug.org.uk/mailman/listinfo/staffslug
7:32 p.m.
No, I am no gentleman.:-) I am just a retired bloke from Watford, Herts who
moved to nr. Cheadle, Staffs in July last year to be closer to my daughter
and her family and especially the grandkids. So I am spending a bit of time
getting to know linux properly and developing some web apps with asp mostly
at the moment but I am gradually getting the hang of cgi perl.
Walter
-----Original Message-----
From: staffslug-bounces(a)staffslug.org.uk
[mailto:staffslug-bounces@staffslug.org.uk] On Behalf Of Adam Egan
Sent: 18 February 2010 19:22
To: staffslug(a)staffslug.org.uk
Subject: Re: [Staffslug] Javascript Problem
Just to check...
Are you the gentleman from Canada who came to the October (I think) meeting?
Adam
On 18 February 2010 19:19, walt <walt(a)helvatron.co.uk> 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.
Anyway, I'll check out event propagation later on. Meantime thanks for
your
offer to look into a fix. No rush! I just wanted to understand dom
and
then
thought I could use all these javascript tricks to generate a nifty
menu
system. :-)
Regards, Walter
-----Original Message-----
From: staffslug-bounces(a)staffslug.org.uk
[mailto:staffslug-bounces@staffslug.org.uk] On Behalf Of David Boucher
Sent: 18 February 2010 18:51
To: staffslug(a)staffslug.org.uk
Subject: Re: [Staffslug] Javascript Problem
walt wrote:
> [snipped]
> I thought it might be the 'onclick' calls in the sibling elements but
when
I
> take them out it still happens.
> [snipped]
What's happening here is event propagation: the event "bubbles up"
through the elements, so findChildren is called for b1, then called for
a1, causing the effect you are seeing. You can prove this by having
findChildren produce an alert with the id of the element it is being
called for.
I don't have time to do it right now, but I'll see if I can sort out a
fix later (I'm no Javascript expert though). In the meantime, you might
want to try looking into "Javascript event propagation".
Hope this helps,
Dave.
_______________________________________________
Staffslug mailing list
Staffslug(a)staffslug.org.uk
http://lists.staffslug.org.uk/mailman/listinfo/staffslug
_______________________________________________
Staffslug mailing list
Staffslug(a)staffslug.org.uk
http://lists.staffslug.org.uk/mailman/listinfo/staffslug
_______________________________________________
Staffslug mailing list
Staffslug(a)staffslug.org.uk
http://lists.staffslug.org.uk/mailman/listinfo/staffslug
7:52 p.m.
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>
7:45 p.m.
Looks like that's fixed it. I found and applied this:
function doSomething (e) {
var event = e || window.event;
[body of event handler function goes here]
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
Well very many thanks. I would never have found the solution as I was
looking in the completely wrong direction. I'll dig a bit deeper now so
maybe I will even understand why this happens.
Regards, Walter
-----Original Message-----
From: staffslug-bounces(a)staffslug.org.uk
[mailto:staffslug-bounces@staffslug.org.uk] On Behalf Of David Boucher
Sent: 18 February 2010 18:51
To: staffslug(a)staffslug.org.uk
Subject: Re: [Staffslug] Javascript Problem
walt wrote:
[snipped]
I thought it might be the 'onclick' calls in the sibling elements but when
I
take them out it still happens.
[snipped]
What's happening here is event propagation: the event "bubbles up"
through the elements, so findChildren is called for b1, then called for
a1, causing the effect you are seeing. You can prove this by having
findChildren produce an alert with the id of the element it is being
called for.
I don't have time to do it right now, but I'll see if I can sort out a
fix later (I'm no Javascript expert though). In the meantime, you might
want to try looking into "Javascript event propagation".
Hope this helps,
Dave.
_______________________________________________
Staffslug mailing list
Staffslug(a)staffslug.org.uk
http://lists.staffslug.org.uk/mailman/listinfo/staffslug
7:59 p.m.
walt wrote:
Well very many thanks. I would never have found the solution as I
was
looking in the completely wrong direction. I'll dig a bit deeper now so
maybe I will even understand why this happens.
Just beat me to it :)
This (event propagation) is a fairly common concept in GUI programming,
the details vary a lot though. The idea is to allow objects to handle
events they use and pass on the ones they don't.
Anyway, glad to help.
8:23 p.m.
Well fantastic. I am very grateful and shall be using your version.
But, what does this mean:
var event e || window.event;
which is what I have used as apposed to:
if (!e) var e = window.event;
your version.
I assume (!e) tests for no error(s)? and then assigns e a class like
window.event or is it just checking for any events such as onClick? I have
seen the || (or) symbol before in this sort of context. Is it another way
to get the class or status of window.event? I tried to change || to an =
sign but it did not like it.
Regards, Walter
-----Original Message-----
From: staffslug-bounces(a)staffslug.org.uk
[mailto:staffslug-bounces@staffslug.org.uk] On Behalf Of David Boucher
Sent: 18 February 2010 19:59
To: staffslug(a)staffslug.org.uk
Subject: Re: [Staffslug] Javascript Problem
walt wrote:
Well very many thanks. I would never have found the solution as I
was
looking in the completely wrong direction. I'll dig a bit deeper now so
maybe I will even understand why this happens.
Just beat me to it :)
This (event propagation) is a fairly common concept in GUI programming,
the details vary a lot though. The idea is to allow objects to handle
events they use and pass on the ones they don't.
Anyway, glad to help.
_______________________________________________
Staffslug mailing list
Staffslug(a)staffslug.org.uk
http://lists.staffslug.org.uk/mailman/listinfo/staffslug
10:33 p.m.
walt wrote:
Well fantastic. I am very grateful and shall be using your version.
But, what does this mean:
var event e || window.event;
which is what I have used as apposed to:
if (!e) var e = window.event;
your version.
The top version is a short cut really, the end result is the same for both.
The first version is saying "create a variable called 'event' and assign
it the value of the variable 'e', if that variable has a value, or the
value of 'window.event', if that has a value. If both variables have a
value then 'e' will be used as that comes first. The '||' means or but
you probably know that.
The second version is saying "If the variable 'e' does not have a value
(the '(!e)' bit) then create a variable e and assign it the value of
'window.event'.
When I say "has a value" I mean that the variable is initialised and has
a value other than null, false or 0. In Javascript such a value is
considered logically 'true', with null, false or 0 being considered
'false'. Many other programming languages use a similar idea, C being
the most well known.
Either version will work, although personally, I would use the second
one as it's a bit clearer.
8:31 a.m.
OK, that's clear. You are right, I should have remembered from C which
haven't used in a very long time. I know || is usually 'or' but I thought it
might have been like perl where :: gets a class.
Anyway, thanks again. Apart from the usual cross-browser hassles (which are
driving me absolutely crazy) it should be plain sailing now. Famous last
words more like.
Walter
-----Original Message-----
From: staffslug-bounces(a)staffslug.org.uk
[mailto:staffslug-bounces@staffslug.org.uk] On Behalf Of David Boucher
Sent: 18 February 2010 22:34
To: staffslug(a)staffslug.org.uk
Subject: Re: [Staffslug] Javascript Problem
walt wrote:
Well fantastic. I am very grateful and shall be using your version.
But, what does this mean:
var event e || window.event;
which is what I have used as apposed to:
if (!e) var e = window.event;
your version.
The top version is a short cut really, the end result is the same for both.
The first version is saying "create a variable called 'event' and assign
it the value of the variable 'e', if that variable has a value, or the
value of 'window.event', if that has a value. If both variables have a
value then 'e' will be used as that comes first. The '||' means or but
you probably know that.
The second version is saying "If the variable 'e' does not have a value
(the '(!e)' bit) then create a variable e and assign it the value of
'window.event'.
When I say "has a value" I mean that the variable is initialised and has
a value other than null, false or 0. In Javascript such a value is
considered logically 'true', with null, false or 0 being considered
'false'. Many other programming languages use a similar idea, C being
the most well known.
Either version will work, although personally, I would use the second
one as it's a bit clearer.
_______________________________________________
Staffslug mailing list
Staffslug(a)staffslug.org.uk
http://lists.staffslug.org.uk/mailman/listinfo/staffslug
5382
days inactive
5383
days old
13 comments
4 participants
participants (4)
-
Adam Egan -
David Boucher -
Tig -
walt