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