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

Discussion in 'Javascript' started by AndrewC, Apr 28, 2008.

  1. AndrewC

    AndrewC Guest

    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!
    AndrewC, Apr 28, 2008
    #1
    1. Advertising

  2. AndrewC

    RobG Guest

    Re: Using scriptaculous, how to trigger mouseover effect ONLY ifmoused over for a period of time

    On Apr 28, 10:14 am, AndrewC <> wrote:
    > 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.


    --
    Rob
    RobG, Apr 28, 2008
    #2
    1. Advertising

  3. AndrewC

    jdalton Guest

    Re: Using scriptaculous, how to trigger mouseover effect ONLY ifmoused over for a period of time

    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
    jdalton, Apr 30, 2008
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?QUNhdW50ZXI=?=

    mouseOver effect

    =?Utf-8?B?QUNhdW50ZXI=?=, Feb 1, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    472
    Gopal \(FMS, Inc.\)
    Feb 1, 2005
  2. Bendik Engebretsen

    Mouseover effect on imagebutton

    Bendik Engebretsen, Aug 3, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    22,456
    shadowzz
    Sep 2, 2010
  3. Dariusz Tomon
    Replies:
    2
    Views:
    873
  4. Larry

    Mouseover effect

    Larry, Oct 31, 2004, in forum: HTML
    Replies:
    5
    Views:
    521
  5. libsfan01
    Replies:
    3
    Views:
    146
    -Lost
    May 25, 2007
Loading...

Share This Page