Using scriptaculous, how to trigger mouseover effect ONLY if mousedover for a period of time

[AndrewC]

I am using the Scriptaculous/Prototype libraries to build a project
and I really want to have an effect like the mootools download page
(http://www.mootools.net/download) where when you mouse over the lines
at the bottom very fast, the lines do not highlight. They only
highlight if your mouse is over them for slightly longer.

Sadly, I can't use the mootools library, so I am hoping someone can
point me in the right direction.

I am calling a function called Effect.Morph to change the background
of a div area upon mouseover and it looks like this:

elem[j].onmouseover = function(){
new Effect.Morph(this,{style:'background:#989898;
color:#FFF',duration:0.2,delay:0.2});
}
elem[j].onmouseout = function(){
new Effect.Morph(this,{style:'background:#FFF;
color:#989898',duration:0.2,delay:0.2});
}

So, as you can see if a user mouses over, the element's background is
immediately changed to morph to the new background color and text
color and then upon mouse out, revert back. The problem is that this
happens even if you mouse VERY quickly over the areas, so you end up
with a twitchy mess on your hands when they are all on rows, one on
top of the other. But mootools seems to have figured out that if the
mouse doesn't hover for at least a tiny bit, it doesn't run.

If anyone has ideas, that would be fantastic!

Thanks!

 

[RobG]

I am using the Scriptaculous/Prototype libraries to build a project
and I really want to have an effect like the mootools download page
(http://www.mootools.net/download) where when you mouse over the lines
at the bottom very fast, the lines do not highlight. They only
highlight if your mouse is over them for slightly longer.

A generic solution is to have your mouseover handler call the function
using setTimeout with a delay of say 50ms (or whatever appears to be
right). If a mouseout is received from the same element before the
timer fires, cancel it.

You'll probably end up building a small event manager to keep track of
the timeouts and (perhaps) to deal with bubbling events.

 

[jdalton]

Hello Andrew,

Scriptaculous should be able to do this pretty easily,using the
Effect.Morph:
http://wiki.script.aculo.us/scriptaculous/show/Effect.Morph

Prototype doesn't have crossbrowser support for the "mouseenter"
"mouseleave" events by default,
so you will have to add that (its only a couple lines)

I have a pastie of the code you need and a mockup of the effect that
the MooTools download page is using.
http://pastie.caboo.se/189315

Also here is the support list for Prototype/Scriptaculous:
http://groups.google.com/group/rubyonrails-spinoffs