Hide DIV with an event

[BlindPete]

Hello I have this div element that is a popup menu. My problem is in dismissing the menu if the user clicks nothing.

<div id="popupmenu" style="position:absolute;display:none;>
     <ul>
        <li><a id="treeadd">ADD CHILD</a></li>
        <li><a id="treecompleted">COMPLETE</a></li>
        <li><a id="treeincomplete">INCOMPLETE</a></li>
    </ul>
 </div>

I already have timer that will dismiss the div after 3 seconds. I would prefer something cleaner with a mouse related event. Because on a longer list the user needs time to read it, and on an accidental click, I do not want the user to have to wait 3 seconds for it disappear.

I have tried onblur, onmouseover, onmouseout on the Div, but they also fire when the mouse pointer moves into the list elements.

I am totally stumped!

-Pete

 

[jemminger]

how about onmousedown on the document or body object?

function hideme() {
... hide the menu ...
}

document.onmousedown = hideme;
document.body.onmousedown = hideme;


-jeff

http://www.jeffemminger.com

lost: one sig, last seen here.

 

[BlindPete]

hmmm I agree that would work, but I have many elements (potentially) beneath this popup and adding a call to each of them is not very attractive.

But you do have me thinking...

Perhaps I could shorten the timer to say 0.5 seconds and add a reset of the timer to each of the list elements onmousemove event

http://www.w3schools.com/jsref/jsref_events.asp

I'm much too tired to try it this evenning though. I'll have a go at it in the AM.

-Pete

 

[theniteowl]

The way I have done it is to set a timer when the mouse leaves the element so it will disappear after a brief delay but then use an onmouseover for other elements that will first cancel any existing timer and close the existing menu before popping up the new menu.
This way if they accidentally drift off the menu it will not instantly disappear but if they move to another menu it goes away instantly and displays the new menu.
I would then set the delay timer to something smaller like 1/2 to 1 second.


Google, you're my hero!

 

[BlindPete]

Thanks Night Owl, that is basically what I did. I set two events on each list item. The onmouseover event resets the timer to 3 seconds, the onmouseout event resets the timer 0.5 seconds.

This way as a user moves the pointer around the list the timer keeps reseting to three seconds. If they linger on an item w/o clicking the popup menu goes away after three seconds. If the user leaves the list completely the popup goes away in 0.5 seconds. I may have to tweak the durations a touch but it was a sound approach thank you!

<div id="popupmenu" style="position:absolute;display:none;>
  <ul>
    <li><a onmouseover="resetTimer(3000);" onmouseout="resetTimer(500);" id="treeadd">ADD CHILD</a></li>
    <li><a onmouseover="resetTimer(3000);" onmouseout="resetTimer(500);" id="treecompleted">COMPLETE</a></li>
    <li><a onmouseover="resetTimer(3000);" onmouseout="resetTimer(500);" id="treeincomplete">INCOMPLETE</a></li>
  </ul>
</div>

Javascript

function resetMenuTimer($miliseconds) {
    clearTimeout(pagePopupTimer);
    pagePopupTimer = setTimeout("dissmissMenu('popupmenu')",$miliseconds);
}

-Pete