Best way to make hyperlink open on second tap

Question

I have image tiles on my website, for want of a better description.

On mobile, I would like a single tap on one of these tiles to bring up some more text (describing the content of that section), before a second tap actually navigates to that link and opens the new page.

At the same time, on desktop I would like a hover of the mouse to reveal the hidden text, before a click navigates to that section.

I had thought I could simply use hover - having read before that a single tap on touch based devices imitates hover, before a second tap opens the link. However, this doesn't appear to be the case for me - if I use hover, E.G:

<a class="tileLink" href="/projects/london-serviced-apartments">
    <section class="tile">    
        <img src="/images/lsa-s.jpg" srcset="/images/lsa-m.jpg 600w, /images/lsa-l.jpg 1000w, /images/lsa-xl.jpg 1920w" alt="services" />
        <h1>London Serviced Apartments</h1>
        <p class="hidden">Test hover text</p>
    </section>  
</a>

.tileLink:hover .tile{
    opacity: 0.75;
}

.tileLink:hover p{
    display: inline;
}

when I tap once on one of the tiles, the hidden text displays briefly but then the link is immediately navigated to - so the user is taken directly to that section before having had a chance to read the text and decide if they want to open the link or not.

I did try doing this using Javascript:

$(".tileLink").click(function(e){
        if( $(this).find(".tile").hasClass("tapped") ){

        }else{
            e.preventDefault();
            $(this).find(".tile").addClass("tapped").find("p").removeClass("hidden");
        }
});

which actually works fine for mobile, but then on desktop hover doesn't work - a click is needed to display the hidden text, and a second click is needed to navigate to that section.

Is there a simple way of doing this that will work across multiple devices?

Do you mean that irrespective of the click behavior the hidden
is not shown on desktop on mouseover? Because that would be a different issue, your `.tileLink:hover p` might not have authority over your `.hidden`, could you post that as well? — swornabsent, Sep 04 '15 at 14:41

score 0 · Answer 1 · answered Sep 04 '15 at 14:40

Heres a codepen of what you're looking for - you can do a check to see if the device is mobile like so

var isMobile = false;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  isMobile = true;
}
if(isMobile) {
  $(".tileLink").on('click', function(e) {
     e.preventDefault();
     var para = $(this).find('p.hidden');
     if(para.hasClass('tapped')) {
       window.location = $(this).attr('href');
     } else {
       $('p.hidden').removeClass('hidden').addClass('tapped');
     }
  });
} else {
  $('.tileLink').on('mouseover', function() {
     $(this).find('p.hidden').removeClass('hidden');
  });
}

score 0 · Accepted Answer · answered Sep 04 '15 at 14:49

Maybe you could give a try to pointer-events to allow click only once parent of <a> is focused.

I assume your links might be in a list (or else).

below a snippet to test the idea.

*best is, i guess, to manage this via javascript to make it bulllet proof *

mediaquerie doesn't seem reliable to filter only touch screen, small yes.

.tileLink:hover .tile,
.tileLink:focus .tile {
  opacity: 0.75;
}

.tileLink:hover p,
.tileLink:focus p {
  display: inline;
}

li {
  float: left;
}

li a {
  pointer-events: none;
}

li:focus a,
li:hover a {
  pointer-events: auto;
}

<h1>test double click to trigger link </h1>
<ul>
  <li tabindex="0">
    <a class="tileLink" href="/projects/london-serviced-apartments">
      <section class="tile">
        <img src="http://dummyimage.com/200" srcset="http://dummyimage.com/300 600w,http://dummyimage.com/400 1000w, http://dummyimage.com/400 1920w" alt="services" />
        <h1>London Serviced Apartments</h1>
        <p class="hidden">Test hover text</p>
      </section>
    </a>
  </li>
</ul>

to play with the idea http://codepen.io/anon/pen/yYyKJv http://codepen.io/anon/pen/xwbWRB

This worked best for me, I like that it's pure CSS too. Hadn't come across pointer-events before. I don't have my tiles in a list, so improvised slightly by containing each tile within its own div instead of li's. Thanks for your help. — Luke Twomey, Sep 04 '15 at 15:51

Best way to make hyperlink open on second tap

2 Answers2