How to create hide delay on a menu

I’m trying to create a menu that has a hide delay in case the user moves their mouse too fast outside of the menu area on accident. In the case of this false positive hide the user can move their mouse back over the menu to stop it from finishing its ‘hide’ function.

Here’s one way to do what you’re looking for:

I have the trigger for the menu and the menu in a group. When the mouseleaves that group, it moves a counter text label. The label is set to wait 50 ms and increments by 50 each time. If it goes above a threshold - I have it set to 750, but you can set that to whatever you want - it will hide the menu. However, when the cursor goes back into the menu, it resets the counter value so the menu will not hide if the mouse returns to the menu.

delay hiding.rp (57.4 KB)

That worked! Brilliant solution!

Quick question, if I want to change the timeout I just adjust the first case on the counter text’s Condition to whatever number i want in milliseconds right? If so, why does it get an extra 50ms added to it in your Case 2 ‘set text’?

You are correct about the delay time living in the first condition. If you wanted that to be 1.5 seconds, change the 750 to 1500, etc.

I may be misunderstanding your 2nd question - but the 2nd case is the loop. So the text starts at 0, and when it’s moved (when the cursor leaves the group) it adds 50 each time. So the series of events looks something like this:

Mouse leaves group - counter set 0 and moved by 0,0.
first case is ignored since 0 < 750
second case fires - sets text on counter to 50, waits 50ms, and then moves the counter again to trigger the loop…

50ms later… counter is now at 50 and moved by 0,0 from end of last run
first case is ignored since 50 < 750
second case fires - sets text on counter to 100, waits 50ms, and then moves the counter again…

(rinse and repeat as long as mouse hasn’t entered the menu until …)

750ms later - counter now says 750 and moved by 0,0 from prior loop
first case fires as 750 = 750.
Reset counter and hide menu. No move action - so the loop ends.

If at any point the user puts their mouse back in, we set the counter to -10 so our loop conditions are not met. Because there’s no matching case on move nothing happens after that 50 ms lapse.

The loop is important here because we need axure to be able to process mouse movements that may cause us to abort hiding the menu if the user mouses back in.

Axure processes all of the events in a serial fashion. If we were to add just a single wait of say 750 ms, what would happen is that even if you moused back in, axure would still hide the menu after 750 ms, as it wouldn’t process any further mouse events until after that 750 ms had passed. The loop with a small time increment gives us the capability to recognize that the mouse has reentered the menu and to reset the timer.

Hopefully that makes sense…