SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Delay On mouseOut

    I have a fairly simple piece of javascript:

    Code:
    		this.menu.getElements('li').each(function(item){
    			item.addEvent('mouseover', function(){ this.moveBg(item); }.bind(this));
    			item.addEvent('mouseout', function(){ this.moveBg(this.current); }.bind(this));
    			item.addEvent('click', function(event){ this.clickItem(event, item); }.bind(this));
    		}.bind(this));
    At present 'mouseout' function kicks-in immediately whereas I'd like to delay this by a second or two. How might I do this?

    Thanks!

  2. #2
    SitePoint Enthusiast Mr Moo's Avatar
    Join Date
    Oct 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That looks like you're using the Prototype library. If you're using the latest version, 1.6, then you can use the delay function which is a wrapper around setTimeout:

    Code JavaScript:
    item.addEvent('mouseout', function(){ this.moveBg.delay(1, this.current); }.bind(this));

    The first argument to delay is the time in seconds. Any additional arguments will be passed to the function when it is called.


    Scrap that. It's not Prototype. Prototype uses observe, not addEvent. It's clearly a very similar library though and may have a delay. Otherwise:

    Code JavaScript:
    item.addEvent('mouseout', function(){ setTimeout( function() { this.moveBg(this.current); }.bind(this), 1000); }.bind(this));

    where the 1000 is the delay in milliseconds.
    Not one shred of evidence supports the notion that life is serious.
    eternal.co.za - code, thoughts, rants and raves
    f1rivals.net - formula 1 forums, and, hopefully, soon, prediction game

  3. #3
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Mr. Moo, the second example worked a treat in that the mousout function was delayed by the set time. The problem is however, is that if I move to another button the mouseout kicks in regardless.

    Is there a way this can be prevented if I've moved the cursor to another active element?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Yes, you can assign the setTimeout to a global variable and have other active elements clear that global variable.

  5. #5
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    I have to admit, my grasp of Javascript is basic at best. pmw, any idea how I might do that?

    Thanks.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Previously you were given the following code

    Code JavaScript:
    item.addEvent('mouseout', function () {
        setTimeout( function () {
            this.moveBg(this.current);
        }.bind(this), 1000);
    }.bind(this));

    Set a global variable and assign to it the timeout event.

    Code JavaScript:
    timer = '';
    item.addEvent('mouseout', function () {
        timer = setTimeout( function () {
            this.moveBg(this.current);
        }.bind(this), 1000);
    }.bind(this));

    Then you can clear that timed event from other parts of your code with

    Code JavaScript:
    clearTimeout(timer);


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •