Hover on Touch – Js Plugin

TL;DR A Javascript Plugin for an alternative hover function on mobile devices.

While working on my Portfolio I was wondering how to translate the hover function onto mobile devices. (Yes I did design it desktop first 😉 )

On my main page, I have a grid with all my projects. On hover, a second layer with additional information is shown. On click, obviously, the user is taken to the project’s subpage.
portfoliohover2

The solution I came up with is a combination of the »tap« and »taphold» gestures:

  • A tap is counted as a click and redirects.
  • Taphold shows the second layer.

For touch handling I used the hammer.js library. Problem is that on »touch start«, it isn’t clear yet if the user wants to click or just see more information. So in the beginning the secondary information is always shown. If the user releases under 250ms, the event is counted as a click and the user is redirected. If he holds longer than that, the click isn’t triggered and the user can read the second layer until he releases his thumb.

mobile hover preview
I’ve been playing with different time spans, but the 250ms seem to work really intuitive. Thats also Hammer.js’ standard timeframe to recognize »clicks«.

I haven’t seen this solution anywhere online, so I wrote a small js plugin for everyone to use. Here’s a more entertaining demo, a shop demo and a Github Repository with some documentation.

These are some points I think are necessary to make this approach work ux wise:

  • all elements of the grid should have a second layer that can be shown (to be consistent)
  • the elements should take reasonable space on the screen, so the user touches them automatically while scrolling (Otherwise this feature would have to be explained)
  • the secondary information should leave space for the thumb

The actual gesture code is a nested function of the two hammer.js events »tap» & »taphold«:

for (var i = 0; i < all_objects.length; ++i) {
    var item = all_objects[i];  
    var mc = new Hammer.Manager(item);
    mc.add( new Hammer.Tap({
        time: 250,
    }) );
    mc.add(new Hammer.Press({
        event: 'press',
        pointer: 1,
        threshold: 1000,
        time: 1,
}));

I think this approach can be very useful for most grid layouts that have a hover function, for example portfolio websites or product pages.

Actually, this kind of second layer preview could generally change our browsing behavior on touch devices by reducing unnecessary back and forward navigation.

You could get really crazy and add some nice animations on hover, preview a video or just run a gif with more pictures or angles of a product.

One small thing I haven't fixed yet is a short lag on android devices. The developers from Hammer.js face the same problem. They’ve developed an extra plugin to bypass the apparent 300ms lag (Hammer Time), which didn’t work in my case or any tests I did. As far as I experienced though, Android users don't seem to mind the lag.

If anyone wants to contribute, just fork the project on Github or hit me up! 🙂