Newbie question - mousover/mouseout delay

JavaScript
1

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

$(document).ready(function() {
	$('#parent_menu').mouseover(function() {
		$('#child_menu').show();
	});
	
	$('#child_menu').mouseout(function() {
		$('#child_menu').hide();
	});
});

Thanks in advance.

2

Potentially with the delay() method, assuming that you also modify hide/slow to be ‘fast’ or ‘slow’ or some other time indicator.

3

There is also a good plugin called “hoverIntent” that might just do exactly what you need. (http://cherne.net/brian/resources/jquery.hoverIntent.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:


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
    }
  }

}
4

Thanks for the tips.

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

5

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.

$('#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:

$('#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

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:


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

or


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

Thanks for the links and sample codes, Paul. I’ll give those a try.

8

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:

	$('[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

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:


$('[id^="popup-"]').hide();
// now that they're all hidden, open a popup here
10

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

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.

12

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 :slight_smile:

Thanks again, Paul. Appreciate your help.

13

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.

Example code for closing all popup divs is shown in post #9

14

I see… that makes a lot of sense :slight_smile:

Thanks, Paul.

15

Paul - just to let you know, your suggestion worked.

Thanks so much.