Double tap required on mobile text link

On 4/19/2024 at 8:07 PM, tuanphan said:

It works for button or not? If works, I will adjust code for nav text link

Hi @tuanphan - this seems to work now, do you see any issues using this code below? It was basically using Brad's code and applying more generally to any <a> link. It seemed to fix the Masonary Gallery issue too.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<script>
$('a').on('touchstart', function () {  // This selector targets all <a> tags
var href = $(this).attr('href');  // Gets the href attribute from the clicked link
setTimeout(function() {
window.location.href = href;  // Redirects to the link after a 100ms delay
}, 100);
});
</script>

15 hours ago, mike.bj said:

Hi @tuanphan - this seems to work now, do you see any issues using this code below? It was basically using Brad's code and applying more generally to any <a> link. It seemed to fix the Masonary Gallery issue too.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<script>
$('a').on('touchstart', function () {  // This selector targets all <a> tags
var href = $(this).attr('href');  // Gets the href attribute from the clicked link
setTimeout(function() {
window.location.href = href;  // Redirects to the link after a 100ms delay
}, 100);
});
</script>

I spoke to soon....it's causing the issue of inadvertently triggering links while trying to scroll on a touchscreen device, e.g. if you're scrolling down a gallery that can open as a lightbox - it will open instantly instead of scrolling...will have to do some more testing

6 minutes ago, mike.bj said:

I spoke to soon....it's causing the issue of inadvertently triggering links while trying to scroll on a touchscreen device, e.g. if you're scrolling down a gallery that can open as a lightbox - it will open instantly instead of scrolling...will have to do some more testing

I ran it through GPT and asked it to fix the issue described above. It generated the code below with seems to have resolved. Be awesome to see if you think this could cause any unexpected issues but can't see any so far:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<script>
    $('a').on('touchstart', function (e) {
        var startTime = new Date().getTime();  // Record the time when touch starts
        var linkUrl = $(this).attr('href');    // Get the href attribute from the clicked link

        $(this).on('touchend', function () {
            var endTime = new Date().getTime();  // Record the time when touch ends
            // Check if the touch duration was less than 150ms, which implies it was a tap, not a scroll
            if (endTime - startTime < 150) {  
                window.location.href = linkUrl;  // Redirect to the link
            }
        });
    }).on('touchmove', function (e) {
        $(this).off('touchend');  // If the user moves the finger, it's a scroll, so don't follow the link
    });
</script>