Problem with crossfading complex divs
Chris Sansom
OK, an explanation of what I'm trying to do. I have a <div> which consists of a row of three nested <div>s inside each of which are various elements, including links. The client wants this whole row of three to crossfade with a different set of three at regular intervals (I'm using 3 seconds with a two second fade time for testing purposes). They also want the crossfading to pause when the mouse is rolled over anywhere in the whole set of three, and resume on mouseout.
I have two empty enclosing <div>s in the html page, pinned to the same spot with css. I use a Periodical Executer to do an Effect.fade() and Effect.appear() to crossfade them. This all works fine, but with the mouseover/-out part all hell can break loose!
I first tried it with a simple pair of boxes, one green saying 'Hello' and one blue saying 'Goodbye', and this worked perfectly, but with the more complex version I'm running into what I think must be bubbling problems - and this is where I get a bit out of my depth, I'm afraid. I /think/ what's happening is that when you roll the mouse over various elements inside the <div> JS thinks it's mousing out and over repeatedly, so the animation goes nuts and at times disappears altogether. If you simply roll over one of the images, then straight out of the whole enclosing <div> again, on the other hand, the pause and resume works fine.
It could well be that I'm approaching this completely the wrong way...
--
Cheers... Chris
Highway 57 Web Development -- <http://www.highway57.co.uk/>
Chris Sansom
> I /think/ what's happening is that when you roll the mouse over various elements inside the <div> JS thinks it's mousing out and over repeatedly
Just been out for a walk and had a think about this. I think what I need to do is somehow prevent the mouseout from restarting the fading if it's followed by a mouseover within, say, a quarter? a tenth? of a second. I'll see if I can find a way to do this, but any hints would be most welcome at this stage.
Walter Lee Davis
Take a look at mouseenter/mouseleave (added in 1.6.something) as that
will definitely do what you need it to do. There's a long-hand way of
checking a mouseout to see if it actually "left the building" or not
(rather than just mousing over a child within the same element you're
observing).
Walter
Pablo Aravena
I think your problem is because you are using mouseover/mouseout
instead of mouseenter/mouseleave
Please review this link for a further explanation
http://stackoverflow.com/questions/1651469/mouseover-and-mouseout-events-firing-on-children
Regards
Pablo
> --
> You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
> To post to this group, send email to prototype-s...@googlegroups.com.
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
>
>
Chris Sansom
> I think your problem is because you are using mouseover/mouseout
> instead of mouseenter/mouseleave
Hi Pablo
I told you I was rusty! That's exactly right - it now works beautifully. Well almost - it's still possible to mess it up by whipping the mouse repeatedly in and out or across a corner a few times. I'm not sure whether to take the attitude that it serves the user right if they're going to behave like that!
Thanks for your help.
Chris Sansom
>
>> I think your problem is because you are using mouseover/mouseout
>> instead of mouseenter/mouseleave
And on 13 Sep 2011, at 16:52, I wrote:
> I told you I was rusty! That's exactly right - it now works beautifully. Well almost - it's still possible to mess it up by whipping the mouse repeatedly in and out or across a corner a few times. I'm not sure whether to take the attitude that it serves the user right if they're going to behave like that!
Since then, I've solved this problem too, so it all works like a charm now. It turned out that some code I'd put in to compensate for an earlier problem was causing this one (and another one!). Once I took that code out it was all fixed at a stroke.
However, one issue remains. It's minor and by no means a deal-breaker, but it would be nice to get it right if I can:
To remind you, what I'm doing here is cross-fading two divs that have a variety of images, text and links inside them. While the one that's faded out is invisible its contents are replaced via Ajax before the next crossfade. A mouseenter on the enclosing div pauses the fading, which resumes after a mouseleave. This works well. However, the mouseenter/-leave behaviour in the whole enclosing div is masking another behaviour I'd like to implement on certain smaller divs inside it. Is there any way of catching mouseenter/-leave or indeed mouseover/-out on the inner divs while continuing to catch them on the enclosing div? Probably to do with bubbling or something where, as I said before, I get a bit out of my depth.