SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbie question - mousover/mouseout delay

    How do I modify this piece of code to make the #child_menu linger for a few seconds before it disappears?

    Code:
    $(document).ready(function() {
    	$('#parent_menu').mouseover(function() {
    		$('#child_menu').show();
    	});
    	
    	$('#child_menu').mouseout(function() {
    		$('#child_menu').hide();
    	});
    });
    Thanks in advance.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Potentially with the delay() method, assuming that you also modify hide/slow to be 'fast' or 'slow' or some other time indicator.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    There is also a good plugin called "hoverIntent" that might just do exactly what you need. (http://cherne.net/brian/resources/jq...verIntent.html)

    The basic premise of hoverIntent is that it does not trigger the over method unless you are still hovering over the item after a specified time and that it does not immediately call the out method until a specific time, which would allow accidental mouse-offs to be ignored.

    To build something like that yourself would be pretty trivial, you would need to keep track of the current hover state, and only trigger the over / out callbacks if after the specified timeout the hover state is still over or out.

    In pseudo code:

    Code:
    var hovering = false
    
    element.mouseover = function() {
    
      hovering = true
    
      after 300 ms timeout {
        check that hovering is true {
          then execute necessary code
        }
      }
    
    }
    
    element.mouseout = function() {
    
      hovering = false
    
      after 300 ms timeout {
        check that hovering is false {
          then execute necessary code
        }
      }
    
    }
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tips.

    I found my way to this page and ended up using it: http://docs.jquery.com/Cookbook/wait

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One more question (hope you guys won't mind)...

    Is there a way to have a piece of code like this where XXX represents a numeric value.
    Code:
    $('#button-XXX').click(function() {
    	$('#popup-XXX').show();
    });
    Since I have several #button and #popup on one page, I think I have to define each one in the jquery code like this:
    Code:
    $('#button-1').click(function() {
    	$('#popup-1').show();
    });
    $('#button-2').click(function() {
    	$('#popup-2').show();
    });
    // --- and so on ---
    I was hoping there was a way to have a shorter way of doing this.

    Thanks again for any help you kind folks might send my way.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by icthus View Post
    One more question (hope you guys won't mind)...

    Is there a way to have a piece of code like this where XXX represents a numeric value.
    Go to the jQuery docs page on selectors and you wills see that there are some there that can help you.

    Specifically, the attribute starts with selector.

    For example:

    Code javascript:
    $('[id^="button-"]').click(function() {
    	var index = /\d/.exec(this.id)[0];
            $('#popup-' + index).show();
    });

    or

    Code javascript:
    $('[id^="button-"]').click(function() {
    	$('#' + this.id.replace('button', 'popup')).show();
    });
    Last edited by paul_wilkins; Apr 11, 2012 at 03:19.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the links and sample codes, Paul. I'll give those a try.

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Your second code snippet worked like a charm.

    I have a follow-up question. As described above, I have several "buttons" that trigger open a respective DIV to appear when clicked. So button-1 triggers popup-1, button-2 triggers popup-2, and so on.

    I have added a "hide" button to replace the original button when it triggers its popup DIV. That way, I can use the "hide" button to close the DIV again.

    Now I'm trying to figure out a way for there to be only one popup DIV open at a given time. So when I click button-1 and it opens popup-1, clicking button-2 should close popup-1 as it opens popup-2.

    The buttons are each housed in their own DIVs. I tried $("#"+divname).show("slow").siblings().hide("slow"); but it only hid the elements that were inside the same DIV as the button that called it.

    Any ideas how I might be able to accomplish this?

    Thanks again.

    Btw, this is the code I'm using now:

    Code:
    	$('[id^="button-"]').click(function() {
    		$('#' + this.id.replace('button-', 'popup-')).show("slow");
    		$('#' + this.id.replace('button-', 'button-')).hide();
    		$('#' + this.id.replace('button-', 'hide-button-')).show();
    	});
    
    	$('[id^="hide-button-"]').click(function() {
    		$('#' + this.id.replace('hide-button-', 'popup-')).hide("slow");
    		$('#' + this.id.replace('hide-button-', 'hide-button-')).hide();
    		$('#' + this.id.replace('hide-button-', 'button-')).show();
    	});

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by icthus View Post
    Now I'm trying to figure out a way for there to be only one popup DIV open at a given time. So when I click button-1 and it opens popup-1, clicking button-2 should close popup-1 as it opens popup-2.
    The standard way of doing that is to first hide all of them, and then to show only the one that should be open.

    For example:

    Code JavaScript:
    $('[id^="popup-"]').hide();
    // now that they're all hidden, open a popup here
    Last edited by paul_wilkins; Apr 11, 2012 at 18:47.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The standard way of doing that is to first hide all of them, and then to show only the one that should be open.
    That's actually what I've done. However, clicking a new button to open a new DIV doesn't close the one that's already open. I have to click the button associated with the first DIV to close it. I was hoping that ALL buttons would do 2 things: (1) open the DIV they are assigned to; and (2) close all other DIVs that may be open.

    Thanks again.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by icthus View Post
    I was hoping that ALL buttons would do 2 things: (1) open the DIV they are assigned to; and (2) close all other DIVs that may be open.
    Do things the other way around and they are easier to achieve.
    First close all of the popup divs, and then open only the div that its assigned to.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Do things the other way around and they are easier to achieve.
    First close all of the popup divs, and then open only the div that its assigned to.
    Not sure I follow.

    All the popup DIV have display: none so they are not seen initially.

    How do I close all popup DIVs from any button?

    Sorry for these barrage of questions, but as you cantell, I'm new at this

    Thanks again, Paul. Appreciate your help.

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by icthus View Post
    Not sure I follow.

    All the popup DIV have display: none so they are not seen initially.
    Yes, and that is not the problem being solved. The problem being solved is how to close open popups before showing the one that was clicked on.

    Quote Originally Posted by icthus View Post
    How do I close all popup DIVs from any button?
    Example code for closing all popup divs is shown in post #9
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see... that makes a lot of sense

    Thanks, Paul.

  15. #15
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul - just to let you know, your suggestion worked.

    Thanks so much.


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
  •