image hotspots - touch support

[Darren Rose]

Hi

I have a few image hot spots in my webhelp, but had never really tested them on a tablet/phone etc

Seems they don't work as expected, if you click several times it might work, but usually doesn't and thinks you are trying to tap and hold or right click or similar rather than just going to the link

Any others had issues like this - or have ideas for a fix

Thanks

[Simon Dismore]

[This is just a quick suggestion in case you need something to try over the weekend.]

Is it not working or just being slow to respond? Some mobile browsers wait to see whether there's going to be a second touch. If so, you might find the FT's fastclick polyfill helps. Try googling ft 300ms touch for more info.

[Darren Rose]

Hi Simon, thanks for reply

Yes I suppose it could just be slow to respond, as I have to hold it for a while which is why right click menu then pops up as it thinks I am trying to do that - is so intermittent hard to know - but certainly will give it a look - thanks

[Tim Green]

Hi Darren,

What devices are you testing on? I just tested this on an Android phone running Chrome (my Galaxy Note III) and it seems to be working fine there -- a quick tap opens another topic or takes me to a website. My guess is that the problem will probably be interference from the new code that does the highlighting for hotspots. That should probably be disabled on mobile devices, we'll look into it.

If so, you might find the FT's fastclick polyfill helps.

Adding anything like this to WebHelp is generally not a good idea. Any additional scripting you add to a web page should be avoided if at all possible. Instead of wrapping an existing problem in a fix with added complication, which creates double overheads (original problem battling the fix all the time), it is always better to solve the problem at source (neither problem or fix is there to create overheads).

The 300ms issue is more complex than you might think. Basically, most mobile browsers introduce a 300ms delay before responding to taps on event handlers that are bound to click events, but they respond instantly to event handlers bound to touch events. You might think that it would always be a good idea to bind to touch events only, but that is a fallacy. For example, if you bind the TOC links to touch events it would make it physically impossible to browse in the TOC, because you would get an instant reaction every time you touched the screen. If you bind to click events it's possible to scroll without triggering the click-bound elements, because the move event of dragging your finger cancels the original click event (and has 300ms to do it). The click event binding only fires if you tap without moving your finger.

[Darren Rose]

Hi Darren,

What devices are you testing on?

iPhone 5s and Lenovo Yoga 2 running Windows 10

[Tim Green]

Update: It's the CSS for the visible hotspots that's causing this. It's working with visibility: hidden. Some browsers aren't responding at all as a result, or only when a longer tap also triggers a transient hover event, which briefly makes the hotspot visible.

You can fix it by adding this CSS to the HTML page template of the skin, AFTER the <%STYLESHEET%> reference (the CSS for the hotspots is in the standard CSS file, so you need to redefine it after it has been read.

Code: Select all

.hmImageMap a.hmHotspotRect { display:block; position:absolute; border: 2px solid transparent; background: transparent; visibility: visible; }
.hmImageMap a.hmHotspotEllipse { display:block; position:absolute; border: 2px solid transparent; border-radius:50%; background: transparent; visibility: visible;}
a.hmHotspotRect:hover { border: 2px solid transparent; background:transparent; }
a.hmHotspotEllipse:hover { border: 2px solid transparent; background:transparent;}

This will also restore the original hotspot behavior generally, with the hotspots always invisible.

[Darren Rose]

Thanks Tim, much appreciated

Nearly all sorted now - just need "toggle printing" code sorted for Alexander's latest skins and I can finally upload my website