Forum: Rails Spinoffs (closed, excessive spam) problems using effects.morph && effect.appear

Hi,

i wrote a sliding navigation using effect.morph and effect.appear. I
don't know why but there are a couple of problems:

1. effect.appear seems not to work in IE6
2. The effects aren't really "smooth".
3. When using effect appear. The new element triggers onmouseover the
onmouseout function....

It's a small script:

www.rhizom.nl/volkan/scriptalicous

First version was in mootools later i found out that magento uses
scriptalicous....

www.rhizom.nl/volkan/moo

gr Volkan

Greetings MuschPusch,

        This is an infamous misconception in the event propagation
behavior, and one I have pondered over for quite some time in the
past.  Your issue is the sub elements, wondering why you can never
actually get to the navigation inside the menu object? Its because
when you mouseover a child element, it propagates that event up to the
parent, and is caught, which then initiates another animation at an
inappropriate time, causing the jumpy behavior you're noticing.

Possible solution, you could change the toggle to a click event, and
then the animation will be much more reliable.

You could use a conditional to ensure that the object the user has
moused over is the top level element you're expecting.

Use a small timeout, 100-300 to allow for the quick hiccups as a user
mouses over a subelement.


--
Matt Foster
Ajax Engineer
Nth Penguin, LLC
http://www.nthpenguin.com

If the problem is that the event is propagating, then the solution is 
stop
stop the event after handling it, with Event.stop().

-Fred

On Fri, Jun 20, 2008 at 2:47 PM, Matt Foster <mattfoster01@gmail.com> 
wrote:

>
> Possible solution, you could change the toggle to a click event, and
> then the animation will be much more reliable.


--
Science answers questions; philosophy questions answers.

Stopping the event where he is catching it won't provide a better
behavior model, his handler for the mouseover is triggered when he
mouses over the menu object or any sub element.  You could use
event.stop, but he'd have to listen to each immediate child and block
the event from getting to the parent, which is where his animation
event listener is residing.  On the downside of that is, if the
subelement is close to the edge of the parent element, it could block
the mouseout event from ever firing on the parent element, leaving the
menu open.  Using a sort of proxy child you could use a single node
underneath that caught all bubbling mouseover/mouseout events for the
menu objects and give it a margin to ensure the events would fire on
the parent when necessary, that'd be a good solution.



--
Matt Foster
Ajax Engineer
Nth Penguin, LLC
http://www.nthpenguin.com