0

I have a thumbnail caption that shows the project title when hovering. To make hovering work on touch devices i added a script that makes that possible. Only it is too responsive, which sounds weird to say, but i don't want it to work directly on the first touch but on the second touch show the thumb-caption and on the thirth touch open the link. I tried to find a example and dia.tv uses this behavior which is build differently, but it works like the way i describe and would like to achieve.

HTML

<div class="grid-thumb">
<a href="/work/test">
    <img
    src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 3508 2480'%2F%3E"
    data-src="/images/test_thumb.jpg"
    class="lazyload"
    alt="">
<div class="thumb-caption">Project title</div>
</a>
</div>

JS

$(document).ready(function() {
$('body').bind('touchstart', function() {});
});

CSS

.thumb-caption {
  background-color: transparent;
  opacity: 0;
  position: absolute;
  text-align: center;
  padding: 20px;
  width: 90%;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index: 4;
 }

.grid-container a:hover img {
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
 }

.grid-container a:hover .thumb-caption {
  opacity: 1;
 -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
 }
KP83
  • 616
  • 1
  • 10
  • 34
  • Not sure, but having to touch some button twice to have it open some page might be difficult for users to grasp... If I encouter an object which displays text on touch, I expect the text to disapear on a second touch, but I wouldn't expect a page to open. – Brainfeeder Jan 24 '18 at 14:13
  • 3
    You might be better of with a seperate button or link in the `.thumb-caption`.. First touch (or focus/hover) will show caption, touching the link/button in caption opens a page. – Brainfeeder Jan 24 '18 at 14:14
  • Can you see the similar behavior on http://dia.tv/pages/projects/ they build it differently and i don't need to make it complexer than needed this hover caption works perfectly only was wondering if i could achieve that behaviour – KP83 Jan 24 '18 at 14:17
  • Yeah.. they have hover/focus to display the caption, and click for opening a page. Don't know if this is possible with touch. – Brainfeeder Jan 24 '18 at 14:22
  • Well.. yes i have the same behavior when not in mobile or tablet mode, but even than they still have the behavior on touch. – KP83 Jan 24 '18 at 14:25

1 Answers1

1

Try to use a touch counter with your event handler, and return false for the first and second touches. When you return false, the browser doesn't follow the link. Something like this:

var thumb = document.querySelector('.grid-thumb');
var count;

thumb.ontouchstart = handler;
thumb.onclick = handler;

function handler() {
  if (!count) {
    console.log('First touch');
    count = 1;
    return false;
  } else if (count === 1) {
    console.log('Second touch');
    thumb.querySelector('.thumb-caption').classList.add('active');
    count = 2;
    return false;
  }
  console.log('Third touch');
  window.location = thumb.querySelector('a').href;
}
.grid-thumb {
  display: inline-block;
  position: relative;
}

.grid-thumb img {
  width: 200px;
}

.thumb-caption {
  background: black;
  color: white;
  left: 0;
  opacity: 0;
  padding: 2px 0 5px;
  position: absolute;
  text-align: center;
  top: 0;
  transition: 300ms;
  width: 100%;
}

.thumb-caption.active {
  opacity: 1;
}
<div class="grid-thumb">
  <a href="https://en.wikipedia.org/wiki/Louis-Marie_Autissier">
    <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Louis-Marie_Autissier%2C_Self-portrait_edit.jpg">
    <div class="thumb-caption">Louis-Marie Autissier</div>
  </a>
</div>
Ruslan
  • 1,293
  • 17
  • 28
  • You are right! I have changed the function a bit, now it handles `ontouchstart` correctly. – Ruslan Jan 25 '18 at 13:37
  • I'm reading this could this work it fits more into my coding workflow: https://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers – KP83 Jan 25 '18 at 13:38