- This topic is empty.
July 2, 2014 at 1:19 pm #174402AnonymousInactive
I’m working on a plugin and there is one thing currently stopping me. I’m trying to figure out the best approach for hiding and displaying an element when the link is hovered.
Basically when you hover over a link in the plugin demo bellow, the menu shows up and the user will be able to click one of the buttons inside the menu. Obviously the menu disappears once the link isn’t hovered anymore, so clicking a button in the menu is impossible. I took this approach here. http://j-v.me/urltargetmenu.js/ which basically delays the menu hiding, giving the user enough time to enter the menu and the hide event is canceled if the cursor hovers over the menu. The problem is that this method doesn’t work well on mobile, and its unreliable.
Heres the 2nd version of the plugin. So i’m trying to find the best way to show and hide the menu with reliability, and mobile friendliness. Any ideas?July 3, 2014 at 1:20 pm #174527AnonymousInactive
It’s not the same situation. I tried implementing something like that but it doesn’t work because the wrapper div must be the same dimensions as the link. So its not like it will stretch to contain the menuJuly 3, 2014 at 1:43 pm #174528
The problem is that this method doesn’t work well on mobile, and its unreliable.
This is a little vague…what issues are you having?July 3, 2014 at 1:53 pm #174529AnonymousInactive
it doesn’t work well on touch-screens, and if you move over the link, out and back in quick enough, you can have the menu disappear when the cursor is hovered over the link.(On the first demo). I guess i could stick with the method im using now if i could find a way to fix those two issoesJuly 3, 2014 at 2:03 pm #174530
Can you not use tap/touch events for mobile?
http://api.jquerymobile.com/tap/ and othersJuly 3, 2014 at 2:07 pm #174531AnonymousInactive
I guess that would work but is it ok to require 2 jquery libraries for such a simple plugin?July 3, 2014 at 2:09 pm #174532
Edited above re
touchend.July 3, 2014 at 2:12 pm #174533
I guess that would work but is it ok to require 2 jquery libraries for such a simple plugin?
Well yes,of course it’s Ok…but I’m not sure what you are referring to by plug-in.
If you mean the functionality, it’s not really a ‘plug-in’ as I would normally expect to see the term used but that could be me misunderstanding.July 3, 2014 at 7:20 pm #174537AnonymousInactive
I’m not sure what you mean, but i intend for others other than me to use this. So will they be willing to add an extra library for such a simple plugin? i dont think it will be worth the effort unless they are already using jquerymobileJuly 21, 2014 at 8:46 am #176027PoddersParticipant
You really don’t need to include jQuery Mobile,
I’d be tempted to do a feature detection first to see if the device using the plugin supports touch, if it does then trigger the menu on touch/click, if not, then trigger the menu on hover,
Check out the method that Modernizr uses to detect for touch enabled browsers hereJuly 21, 2014 at 8:54 am #176031
Feature detection really isn’t the issue AFAIK.
The issue is how to implement touch events when the device does support them at least that’s the way I read it.
JQM is just one of, no doubt, several methods.July 21, 2014 at 9:16 am #176038TheDutchCoderParticipant
First off: this is actually a neat little plugin you’re working on ;-)
Now, on topic:
Maybe an easy way is to put the little menu inside the anchor, this will at least fix the issue for “regular” browsers, as you’ll still be hovering over the anchor while you’re hovering over the menu.
Now, when it comes to other devices that use touch, it might be better to use jQuery and listen for ‘click’ events (I don’t think you have to listen to native touch events, afaik most (all?) mobile browsers send a click event as well).
So a little mockup:
It’s really rough and you’d probably want it to behave a little different, but what it does is: when you click the link (you can also hover it on desktop) it will show the menu, then when you click the link again, it will go to that link regardless.
Again: you’d need to change the code here and there and do some decent testing, but it should get you on the right track (hopefully) ;-)