IE Overlapping Layer Bug?

[Peter]

For some reason, I am unable to use the JavaScript "onMouseOut" event
handler with overlapping <div> layers in Internet Explorer 5.5+. This is
what I want to do:

First, I set one <div> layer over the other. The layer beneath (z-index:0)
has an image in it. The layer on top (z-index:1) has two paragraphs of text,
and an onMouseOut event handler. Whenever one exits the layer's "square"
area, the layer should disappear.

The problem is that, whenever I move the mouse to the space between the two
paragraphs, the onMouseOut handler kicks in even though I am still INSIDE
the <div> layer's "square".

This also happens when I move the mouse over bold text. I have set up an
(IE) example where the problem is clear:

<div style="z-index:0;width:300px;position:absolute;left:0px;top:0px">
<img src="any_image.gif" width=500 height=300>
</div>

<div onMouseOut="document.all.box1b.style.visibility = 'hidden';" id="box1b"
style="z-index:1;width:300px;position:absolute;left:125px;top:100px;">
<p>Between this paragraph and the next, there is a space. When jumping with
the mouse pointer from this paragraph<br><br>to this one, the
<b>onMouseOut</b> should not kick in, yet it does. Why? The same happens
when you move the pointer over <b>bold text</b>.</p>
</div>



Is this a bug in Internet Explorer, or is there a reason and a solution for
this behavior?

In advance, I appreciate your help. Regards,

Peter

 

[brucie]

in post: <

Internet Explorer 5.5+.

IE5.5 is 4 years old this month. its unreasonable for people to expect
authors to support such old browsers and/or expect them to work/perform
the same or similar as newer browsers.

urge people to either upgrade or have them beaten to death.

i recommend one of the gecko family of browsers or opera

 

[Karl Groves]

in post: <

IE5.5 is 4 years old this month. its unreasonable for people to expect
authors to support such old browsers and/or expect them to work/perform
the same or similar as newer browsers.

urge people to either upgrade or have them beaten to death.

i recommend one of the gecko family of browsers or opera

I'm contemplating blocking IE users from my personal site.
Perhaps with a redirect that says "You make my dayjob a living hell."

-Karl

 

[Webcastmaker]

This also happens when I move the mouse over bold text. I have set up an
(IE) example where the problem is clear:

Where?

 

[brucie]

in post: <

Ditto for All the other old browsers like nn4?

of course, especially for NS4.x as it was particularly icky poo

 

[Webcastmaker]

IE5.5 is 4 years old this month. its unreasonable for people to expect
authors to support such old browsers and/or expect them to work/perform
the same or similar as newer browsers.
urge people to either upgrade or have them beaten to death.

Ditto for All the other old browsers like nn4?

 

[Webcastmaker]

I'm contemplating blocking IE users from my personal site.
Perhaps with a redirect that says "You make my dayjob a living hell."

Yea, that'll show them....

 

[Peter]

Where?

The "example" is the code you see below that phrase, in my original message.
It is not in any web page.

Peter

 

[Peter]

Thank you, but still that doesn't solve my problem, as I am indeed using
Internet Explorer 6.0. My problem has little to do with which browser
(Netscape, IE, etc.) is better.

If you have any ideas regarding the problem, I will appreciate your
suggestions.

Peter

 

[Neal]

The "example" is the code you see below that phrase, in my original
message.
It is not in any web page.

So put it on one so we don't have to individually. You do want help, right?

 

[brucie]

in post: <

I am indeed using Internet Explorer 6.0.

a few months shy of 3 years old. upgrade or beat yourself to death.

please don't toppost, it upsets the little voices.

How am I supposed to post my replies in a newsgroup?:
http://allmyfaqs.com/faq.pl?How_to_post

 

[Peter]

So put it on one so we don't have to individually. You do want help,

right?

I hope that is not a question.

Here is a place where you can look at it (with ads in the background):
http://ircxchange.tripod.com/problem.html

 

[rf]

The problem is that, whenever I move the mouse to the space between the two
paragraphs, the onMouseOut handler kicks in even though I am still INSIDE
the <div> layer's "square".

Go over to a reliable javascript reference (the jscript one at microsoft.com
will do) and read up on what the onmouseout event really is. Pay particular
attention to the fact that it bubbles.

When you move the mouse into that blank space you are moving it out if the p
element containing the text. This fires an onmouseout at the p element. The
p element doesn't do anything with it so it bubbles up to the p's parent,
the div. That is the event you are seeing.

This also happens when I move the mouse over bold text. I have set up an
(IE) example where the problem is clear:

Same deal. When you mouse over the bold text the mouse is moving out of the
paragraph (well not strictly so, but it is moving out of the canvas area
under control of the p element). An onmouseout event fires on the p and
bubbles up to the div.

Now, when you move out of the bold element, an onmouseout event fires on the
b element and bubbles up to the p element and subsequently to the div
element. BTW it continues bubbling until it runs out of water, at the
document element.

onmouseout event handlers are quite tricky to program, for these reasons,
especially for what you are trying to do. BTW what exactly *are* you trying
to do?

Work around: The event is not cancelable so returning false from a p
elements event handler is not an option.

You could cancel the bubbling on the event at the p level by setting
window.event.cancelBubble to true but AFAIK this is an IE proprietory.

An alternative is to cause your onmouseout event handler to examine the
event (by looking inside the window.event object) to determine that it is
*this* element that fired the event and not some child/decendant object. You
might check window.event.srcElement.id. Try putting
alert("out " + window.document.event.srcElement.id)
into your event handler and have a play. Give the other elements an id as
well. Stick a similar onMousOver event handler in there as well. You will
soon see what is going on.

Notice that as you move *in* to the text, from *outside* the div, you *may*
also get an onmouseout fired on the div. This is because as you move inside
the div you may hit its border briefly and then move inside the p. You are
now inside the p so you should expect an onmouseout to fire at the div.
Sometimes this will not occur. If you move fast enough the mouse may jump
from outside the div to iside the p in one leap. It was never "inside" the
div so you don't get an onmouseout. You will need to cater for this random
event as well.

See, it gets tricky. One usually ends up coding pages and pages of stuff
before getting bored and finding a better way of doing what one wants

 

[Webcastmaker]

The "example" is the code you see below that phrase, in my original message.
It is not in any web page.

Sorry, I don't have time to deal with snippits of code.

 

[Peter]

Thanks for your elaborate explanation of how Javascript event handlers work
(if I can call it that way). I never thought that event handlers could also
be forked or "bubbled" in Javascript.

Same deal. When you mouse over the bold text the mouse is moving out of the
paragraph (well not strictly so, but it is moving out of the canvas area
under control of the p element). An onmouseout event fires on the p and
bubbles up to the div.

This isn't very clear, I will take your word for it. It's still not critical
for what I want to do.

what exactly *are* you trying to do?

I didn't detail this as I thought it would be too complicated to explain.
Basically, it's just about custom graphical drop-down menus and combo-boxes.
The problem is that these pull-down menus and combo-boxes are over other
layers. I noticed that this "onMouseOut"-problem appears only when there is
a layer beneath the layer with the event handler and/or the background of
the layer on top is transparent.

In other words, if I set "background:[certain color]" as a CSS property of
the layer that is on top --the div with the drop-down/combo boxes--, OR I
don't have a layer beneath the d-d/c-box layer, the problem doesn't appear.
(I hope this explanation of the problem is understandable, otherwise please
let me know.)


Note: I think it's possible to think this in some other way, but that other
way generates the same problem. That is, there are individual <a> tags for
every image that integrates the graphical d-d/c-box layers, for example:

<div ....>....<a ...>[Submenu image 1]</a><a ....>[Submenu image 2]</a>[..]
</div>

That is, I am only interested in handling the 'on-mouse-out' events of those
<a> tags, not for the <div> that contains those tags itself. That is, if the
mouse leaves one of those <a> tags, then the event "hide the drop down menu
layer" should kick in, provided that the mouse doesn't pass over another <a>
tag of the group within 'n' milliseconds.

In any case, I hope you still get to read this post.

Regards,

Peter

 

[rf]

I didn't detail this as I thought it would be too complicated to explain.

<snip rest of explanation>

Yep, it's a bit confusing, especially when you use terms like "layer". I
assume you don't mean the obsolete Netscape 4 <layer> element but rather the
dreamweaverspeak for "positioned div element".

However, you seem to be describing a different problem than that in your OP.
Why not build an example showing exactly what you are doing. Better yet,
publish it somewhere and supply the URL. If it is proprietry stuff then file
off the serial numbers but give us enough so we can see what is happening,
or rather what is not happenning.

 

[Peter]

explain.

<snip rest of explanation>

Yep, it's a bit confusing, especially when you use terms like "layer". I
assume you don't mean the obsolete Netscape 4 <layer> element but rather the
dreamweaverspeak for "positioned div element".

However, you seem to be describing a different problem than that in your

OP.


This is correct. I just discovered that the problem originated in a
scripting error, which I already corrected. The problem is that the script
has become so extensive that sometimes I forget what scripting "idea" I was
following originally. So instead of remaining focused on finding the
problem, I started to worry about things that don't really matter [given the
problem I want to solve], such as the "bubbling" behavior of event handlers.
Anyway, it's good to know more about it, and it will keep me from making
certain mistakes in the future.

Thanks again for your help.

Peter

 

[rf]

Peter wrote:>

OP.


This is correct. I just discovered that the problem originated in a
scripting error, which I already corrected.

Ah, OK. Good that it is fixed.

The problem is that the script
has become so extensive that sometimes I forget what scripting "idea" I was
following originally.

Perhaps it's time for a firmly applied KISS priniple or two

So instead of remaining focused on finding the
problem, I started to worry about things that don't really matter [given the
problem I want to solve], such as the "bubbling" behavior of event

handlers.

When presented with a large and complex problem first run around in circles
and then charge up and fix the first thing you can see wrong. That is
usually the thing causing the perceived errors all the way over there --->

Anyway, it's good to know more about it, and it will keep me from making
certain mistakes in the future.

Good. Knowledge is of itself part of the fun.

Thanks again for your help.

All part of the service