jQuery Hover/Click event on same DIV (Mobile Devices) - javascript

I've written a simple script that displays circles over an image.
When you hover over a circle it expands to a tooltip.
$('div.tooltip').live({mouseenter:function(e){
... animate tooltip open;
},mouseleave:function(e){
... animate tooltip closed;
}});
When you click on the open tooltip it displays a lightbox with more information.
$('div.tooltip').live('click',function(e){
... open related lightbox
});
Everything works as it should, except on mobile devices. When I tap the circle to open the tooltip it fires the click event and completely bypasses the mouseenter/mouseexit events.
Any ideas would be greatly appreciated :) Thanks

Because of the nature of touch screen devices they dont support hover events at all. The best you could do in this regard is use a jquery plugin that supports gestures and use the single-tap and double-tap events, otherwise you would need to place the tooltip somewhere else and make it visible always or have a separate button that solely activates the tip... or you could make it so the first click activates the press and then the next click activates the second function.

Related

How to allow a click in a mouseenter/mouseleave hover div without closing it?

I have a "more details" pane that opens up when a user either hovers a mouse over a tooltip, or clicks the tooltip with a touchscreen. This is simply achieved via
tooltip.addEventListener('mouseenter', showPane);
I was surprised how easy this was, with mouseenter seeming to work perfectly for mouse hover or touchscreen tap.
At the moment it's closed with
tooltip.addEventListener('mouseleave', hidePane);
tooltip.addEventListener('click', hidePane);
I.e. any screen tap or mouse click, or mousing away (if user has a mouse) from the tooltip icon will close the pane.
This may be an XY problem. What I want is to have a prompt for the user to access MORE more details. So in the "more details" popup pane, I have a line "press [1] to see more" (1 styled like a keyboard key). Unless they have a touchscreen, and a small enough screen, in which case I assume they have no physical keyboard/mouse and ask them to "Click here to see more" instead.
(I know this isn't perfect, but I can't think of a better way to achieve it. I could make mouse users have to click the tooltip instead, so the experience was the same for mobile/PC/whatever, styling it with a pointer cursor, but I prefer it to work on hover.)
It all works perfectly, except for the "click here to see more" link, which just closes the tooltip instead. I don't know how to exclude those clicks from both of the hidePane event handlers. Any help appreciated, thank you!

Strange: CSS transformated element JS "click through"

I have a main content in front, a menu absolutely positioned in back and a toggle button which slides the menu in/out (using CSS transformation on main content).
The problem happens on older (2.x) Android browsers (and sometimes somewhere else). When I click the toggle button to close the menu, the click event is "captured" for a while and than it is repeated on the same position as if no transformation were applied on the content. This leads to activating the link in the content, which is undesired.
Demo is here. Use older Android default browser to see the problem. When you open the menu (the icon in the upper left corner) and then close it by clicking the same icon, the page reloads (as if you clicked the link in upper right corner).
I figured, that my events were bind badly. In case of anyone would have the same problem in future, be careful when binding both: touch events and click events. Touch event was fired first in my case, then the transformation happened followed by the click, which led to "duplicating" the event.

How can I disable mouse-drag scrolling on an element with overflow:scroll

I have a container that holds a chart and I wanted to allow the user to click and drag to pan the chart. It works fine until the user drags the mouse outside the container and then the chart is scrolled rapidly in the wrong direction. This seems to be caused by the default scrolling behavior for example if you click and drag in any other element with a scrollbar and drag the mouse out of it, it will begin to scroll.
Is there a way to disable this behavior or some workaround that could make this work?
I only need this to work in chrome (for now at least)
Check out this site. They are using a jQuery plugin dragscrollable, which you can look up or get it from the view source on that page.

jQuery - smart hovering plugin

Hover events are playing an important role in the navigation of my web page, and I don't want the user to get distracted by triggering them accidentally.
I'm aware of hoverIntent, which doesn't fire a hover event until the mouse has slowed down sufficiently. However, it always fires a hover event when the user scrolls down and lands atop the element.
Google Images manages to solve this quite beautifully: it doesn't fire hovers when scrolling down, and additionally even jerking the mouse a tiny bit after scrolling into an element doesn't trigger a hover.
Is there any plugin out there that implements hovering behavior similar to Google Images?
Maybe with this will help: http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
So you will know when the user is scrolling, so you will also know not to fire the hover-event.

Mouseover over touching interfaces

I mean android, ios, etc.
While there's no solution / replacement for mouse over on those interfaces, how can we gather all those relevant infos, for instance from stack exchange, while navigating through them? In SE case, it becomes even more relevant when you want to grab the tags info. But I mean in general, for any website.
Should we consider making a complete different style to accomodate this specific lack of info on ipads?
Is there already any good solution for this?
I'm using jQuery to create a click event that is an alternative to the normal mouseover event, In the example a tooltip is inserted after .tooltip on a normal mouseover event.
/**
* when tooltipss are clicked trigger their mouseover event then fade the tooltip
* (this is friendly to touch interfaces)
*/
$('.tooltip').click(function(){
$(this).mouseover();
// after a slight 2 second fade, fade out the tooltip for 1 second
$(this).next().animate({opacity: 0.9},{duration: 2000, complete: function(){
$(this).fadeOut(1000);
}});
});
The idea here is to show the tooltip for a few seconds and then have it fade naturally. But in general all you need to do is have the click event call the mouseover event and then do something to remove the tooltip when you are done with it.
I do not know about other approaches, but what i have done to facilitate non visual browsers is to have a button that when the mouse is over it shows a tooltip and when clicked or pressed shows a messagebox with the same information as the tooltip. Keep in mind "messagebox" does not have to mean the ugly alert box it can be custom. the thought being the alert allows screen readers etc to know about the additional information being provided.

Categories