Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Hide DIV with an event

Status
Not open for further replies.

BlindPete

Programmer
Jul 5, 2000
711
US
Hello I have this div element that is a popup menu. My problem is in dismissing the menu if the user clicks nothing.
Code:
<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
 
how about onmousedown on the document or body object?

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

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


-jeff
lost: one sig, last seen here.
 
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

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

-Pete
 
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!
 
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!

Code:
<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
Code:
function resetMenuTimer($miliseconds) {
    clearTimeout(pagePopupTimer);
    pagePopupTimer = setTimeout("dissmissMenu('popupmenu')",$miliseconds);
}

-Pete
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top