Mouseout events not being registered sometimes?


(Roger Harris) #1

Hi,
I have a navigation menu that has a dot thats a button that plays a simple timeline to pop up a menu title when you hover over it. Its part of a persistent symbol. So what happens is you mouse over a dot and a popup appears then you float over the next and it vanishes (plays the timeline backwards) and the next pops up… Simple stuff.
However, some of my clients are reporting that the buttons are getting ‘stuck’. i.e. the timeline is not being played backwards on a mouse out event, so the menu items are staying on screen. This is not happening for me in anything I test it in but they are seeing it in Chrome and Safari on their systems… Is there a known issue that only appears on some setups? Works for me on Chrome and Safari?? What could be different about their setups thats making my buttons stick?
I can’t post a file as its NDA at the moment but I just wondered if there were known problems/work-arounds.

Thanks


#2

Fast mouse movements (and I have seen this more frequently in Firefox) sometimes bypass the mouseout event. Unfortunately the only workaround for something like this is to make the element larger so that detection of exiting that element is more likely.


(Mark Hunte) #3

This is a short coming of browsers as @Daniel says,
You could try and make the reverse happen on mouse over instead of mouse out.

My reasoning is people will likely stop over a dot long enough


(Roger Harris) #4

OK Thanks guys. I guess it wouldn’t make any difference if I changed from using a timeline to show/hide the popup to using straightforward javascript (not that I know how to do that but I could read up on it).?

Mark, I’m not 100% sure what you mean… As I move over a dot, mouseover plays the timeline and pops up the description, then as I move off the dot, mouse out hides it. How could I use mouseover instead?

Many thanks
Roger


(Mark Hunte) #5

This is just a thought…
I was thinking the mouse over plays show the new popover but also reverses the other timelines.
Still use mouse out. This way you have a double action to make sure the reverses happen.

DoubleDownOn MouseOut.hype.zip (14.4 KB)


(Roger Harris) #6

Ah, ok gotcha! Good idea. I have a lot of dots (30) so it means a lot time of adding 30 actions to each dot but I guess it covers me. Shame we can’t copy/paste actions… I guess I could make one dot with them all, copy it, and then go through and just change one action each time… I think!

Many thanks
R


(David Guillermo Escalante Trinidad) #7

I had exaclty that problem with this page:
http://heuristic.center/#contacto

Specially with the border color on the buttons (sometimes the button stayed on even when the mouse out was triggered), using a JS code for trigger the color change worked perfectly

hypeDocument.getElementById("boton_llamame").style.borderColor = "rgba(115, 253, 255, 0.2)";

Using relative timelines for the fade animation also fixed some problems. I would try for your specific problem to use JS to trigger a Custom Behaviour

hypeDocument.getElementById("mybutton").onmouseover = function() {
    hypeDocument.triggerCustomBehaviorNamed('customBehaviorName')
};

(David Guillermo Escalante Trinidad) #8

Example:
test.hype.zip (11.6 KB)


(Roger Harris) #9

Wow thanks David! Very good of you to do an example. I haven’t used custom behaviours yet but I’ll read up and give it a try.
I just tried to open your example and it says it was created with a newer version of Hype? However according to ‘check for updates’ I have the latest version?? 3.5.5 Pro

Thanks,
Roger


(David Guillermo Escalante Trinidad) #10

The update should appear in the Apple Store, it may be delayed for some reason, but here you can test the result:
https://dl.dropboxusercontent.com/u/67104790/web/hype_exports/js_custom_behaviours/test.html


(Roger Harris) #11

Thanks David… I’m just updating now :grinning: