If cursor enters the area of widget more than 500ms

Hello,

Is there a way to do “if cursor enters the area of widget more than ___ms”? I want the interactions to show only after the cursor has entered an area for more than a period of time. For example, check out the menu navigation in Oracle https://www.oracle.com/index.html Notice the 2nd level menu only shows when the cursor hovers to the 1st level item for more than 1 second.

The interaction “wait __ ms” on mouse enter wouldn’t be the solution as it triggers the interactions immediately, and it’s not based on a condition.

Thanks.

Julia

In order to do something like this you need two separate events. The first event triggers on mouse over and adds a wait. After that wait it triggers a second event on another widget. That event checks if the cursor is still over the widget. This way if you move the mouse over (and trigger the event) but move it off before the wait finishes and the second event fires, you can prevent anything from happening. It might look something like this:

OnMouseEnter
Wait 500ms
Fire event “move” on this widget

OnMove
If cursor is over this widget
Do your stuff

Basically it’s saying, “in 500ms from the time the mouse first hovers this widget, check if the cursor is still over this widget”. Now it’s not 100% perfect: if you move the mouse over, then off, then back over within 500ms it won’t be able to tell the difference. You could get more complicated with variables and the OnMouseLeave event to shore it up, but it’s only 500ms so I probably wouldn’t bother.

1 Like

Sample similar to what Nathan recommended. He beat me to the post :slight_smile:

I tend to avoid long waits - as sometimes the delay can cause other events not to be processed by the axure framework. So mine uses a 50 ms delay and increments up to 1 sec. You can do 500 ms in the same way by using a value of 500.

I showed the counter for illustrative purposes. You could obviously hide it…
showaftertimer.rp (58.4 KB)

1 Like

Thanks nkrisc & UXProtoTyper ! Your answers really helped.

I have an extended question on this. I would like to be able to have a user roll their mouse past list items…if they pause hover over an item, then I want to show hidden items.

if they don’t hover for a period of time, then I want them to not ever appear. Using wait doesn’t stop the interaction, only delays it. Is there a way to say 'if hover lasts more than 500ms, then show hidden items"??

thanks in advance.

Hey Jason,

Here’s a sample of how you might do that:

delayedHoverShow.rp (50.2 KB)

Note: I’m showing the concept with visible widgets for demonstration purposes - but you could easily replace the widgets with hidden labels or global variables. But basically the premise is:

  1. Keep track of how long the user has hovered by starting a loop when the mouse enters and recording the time they have hovered

  2. Add a check that when your threshold is hit it shows your hidden content.

There may be other ways to do this, but hopefully this gets your gears grinding. Ask any questions you may have!

2 Likes

This is exactly the method I was looking for. I will let you know how implementation goes! Thanks for your time on this.

Question @UXProtoTyper

What is the function of the Move This by 0,0 on the HoverIndicator?

Answer @jason.hinze -

There aren’t any interactions on the HoverIndicator - it is just a placeholder that gets a true or false value when the mouse enters or leaves your hover area.

Assuming then, that you are referring to the HoverCounter, the Move This by 0,0 is to keep the loop running. So while the value is less than 500, every 10 ms it will add 10 the count and move itself, thus triggering the onmove condition again. It’s a way to fire an action without any visible change in the UI.

Make sense?

Yes this makes sense and after looking I started to assume that was it’s function. Thanks for replying. I like this method and it’s going to solve a decent sized problem for my team.

My prototype is working as I was hoping. This method has a lot of applications. Thanks.

Excellent. Glad to be of help :slight_smile: