Email conversation
| From | Vincent Hallberg |
|---|
| To | Me |
|---|
| Subject | Javascript - fading transparent divs - mouseover DOM problem |
|---|
| Date | 14 March 2006 22:14 |
|---|
Hi Mark,
I've created a cross browser div that starts off %50 transparent which
changes to %0 transparent when you mouse over it and slowly dissolves back
to %50 transparent when you mouse out.
[URL]
Problem is I want to place other objects like h1, img and table tags inside
this div but if my mouse hits these objects it starts to dissolve back to
%50 transparency. I need to know how to stop my script from reacting to
anything found inside the div and only dissolve when the mouse leaves the
div.
I've read all the information on this page of your site but I just can't get
this to work properly, I think my brain has turned to mush over the last 5
days that I've been trying to fix this.
http://www.howtocreate.co.uk/tutorials/javascript/domevents
Sincerely,
Vincent Hallberg
| From | Me |
|---|
| To | Vincent Hallberg |
|---|
| Subject | Re: Javascript - fading transparent divs - mouseover DOM problem |
|---|
| Date | 15 March 2006 23:49 |
|---|
Vincent,
> I've created a cross browser div that starts off %50 transparent
> which changes to %0 transparent when you mouse over it and slowly
> dissolves back to %50 transparent when you mouse out.
Please do not use a browser sniffer. It is wrong, and just produced a stream
of errors when I tried to load it.
Opera 9 supports transparency, but your code seems to think it doesn't.
In addition, you are using the proprietary MozOpacity, instead of the
standard opacity, meaning that your code fails in Opera 9, Safari, and
OmniWeb. Mozilla supports regular opacity, and has done for a long time, so
there is no need to use the proprietary version (although you can still use
it for the older versions if you want to).
Firstly, remove your inaccurate sniffer. Then do it like this:
var thebox = document.getElementById("box");
if( thebox.filters ) { thebox.filters.alpha.opacity = o2; }
thebox.style.opacity = o2/100;
thebox.style.MozOpacity = o2/100;
No sniffing, and it works in everything that supports it.
> Problem is I want to place other objects like h1, img and table tags
> inside this div but if my mouse hits these objects it starts to
> dissolve back to %50 transparency. I need to know how to stop my
> script from reacting to anything found inside the div and only
> dissolve when the mouse leaves the div.
Ok, so onmouseout/onmouseover is firing very quickly when the mouse enters a
child element. Seen it before and never found a proper workaround.
There are two things I can think of.
1. put another div inside the main one, position it absolutely, and give it
top and left of 0, and width and height of 100%. Of course, this would then
obscure mouse events, and links would not work, etc. This is an ugly hack
and I do not recommend it.
2. Change your fade. The mouseover fade (towards 100% opaque) always starts
at 50%. Instead of that, make it start from the current opacity (whatever
that happens to be at that moment). That way, the inadvertent mouseout might
drop it to 99%, but the mouseover will start from 99% so it should be
undetectable to a human eye. The way it works right now is that the mouseout
drops it to 99% (or whatever), then the mouseover resets it to 50% before
fading it back to 100%. It is the mouseover event that causes the problem,
not the mousout.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/