Recently, I came across a piece of code that enables a link to become active on the second tap when using touch screen devices.
I found this code snippet from:
hnldesign.nl
(function($) {
var landingLink = '.nav-landing > li';
if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)) {
// MAKING LANDING PAGE MEGA NAVIGATION ACTIVE ON TOUCH
$(landingLink).live('touchstart', function (e) {
var link = $(this);
var megaDiv = $(this).find('div');
// REMOVING 'touch-device' CLASS IF LINK HASN'T BEEN TAPPED
if (!megaDiv.hasClass('touch-device')) {
$('.touch-device').removeClass('touch-device');
}
if (link.hasClass('hover')) {
// SECOND TAP
return true;
} else {
// FIRST TAP
link.addClass('hover');
megaDiv.addClass('touch-device');
$(landingLink).not(this).removeClass('hover');
e.preventDefault();
return false;
}
});
}
})(jQuery);
I am currently working on setting it up so that a div element with the class .touch-device appears next to the link when tapped for the first time. However, I am facing challenges in removing the .touch-device class if another link is subsequently tapped. I'm struggling to target the div for removing the 'touch-device' class.
You can view an example of my code at:
Your assistance in resolving this issue would be greatly appreciated.