Methods for showing and hiding element

[Anonymous]

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?

http://j-v.me/plugin/

[Anonymous]

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 menu

[Paulie_D]

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?

[Anonymous]

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 issoes

[Paulie_D]

Can you not use tap/touch events for mobile?

Or touchstart/touchend?

http://api.jquerymobile.com/tap/ and others

[Anonymous]

I guess that would work but is it ok to require 2 jquery libraries for such a simple plugin?

[Paulie_D]

Edited above re touchstart & touchend.

[Paulie_D]

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.

[Anonymous]

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 jquerymobile

[Podders]

@elkrocke

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 here

[Paulie_D]

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.

[TheDutchCoder]

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:
http://codepen.io/TheDutchCoder/pen/uflDa

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) ;-)

[Author]

Posts