mike.bj

Hi @bradgood I used GPT and got to the solution below. I mentioned in another post on this topic - I had applied your script above to all <a> links on a page to try and fix the double tap issue across all links. But I was having an issue where elements such as scrolling down an image gallery was inadvertently launching the lightbox when it was a scroll and not a click. I basically asked GPT to fix this issue and it spat out the code below. I've tested and seems to address the double-click issue across all links + doesn't inadvertently activate links while scrolling elements on touchscreen. I have limited coding knowledge and relying on GPT - but it seems to work well. I'm a little worried if it could cause some other unforseen issue...e.g. could it mess with SEO etc. I'm not sure but if you have insight into this - e.g. if you can tell it won't mess with things like SEO I'd love your opinion on it! 🙂 Cheers, Mike <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>

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>

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

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>

This seemed to work for all links: <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>

Hi, I customised the code a little to target all links across the site. It seems to have removed my issues with Project Pagination links not working. @bradgood - would you see any potential issues using the script below on a Squarespace site? Originally I tried your code but was still experiencing the issues for various links such as the Project Pagination and footer text links...but applying it generally to any <a> tag seems to have fixed them all. But I'm no coding expert so was hoping to check if you think this could cause unforseen issues. Thank you! Mike. <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>

Must be some weird bug with the Masonary gallery section messing with portfolio / project page nav or anything sitting under it as it impacts the footer text links as well if it's on a page above them. The issue is I've got portrait and landscape images and need to use the Masonary gallery section. Hopefully if I've identified the culprit Squarespace can have their devs fix it. Then I just need a fix so the links will still work with animations turned on....which I'm hoping your code will work for if I can implement it for the portfolio pagination text links.

It seems to be related to the 'masonary' gallery. If you change it to 'Grid:Simple' it goes away.

I removed all CSS and any Code and didn't make a difference. It's almost like it's an issue with the gallery section and it interferes with the navigation somehow. I tried turning off lightbox etc in the gallery but didn't make a difference. I need to use the gallery section to display the images. But ideally if that code can work for the portfolio text nav and allow sitewide animations to run that would be amazing.

Hi @tuanphan, it's quite strange. I've been doing some testing. The buttons are working for me, it's mainly just the portfolio pages, the navigation text links that automatically appear under each portfolio page where I'm having the issue. So I'm not sure in regards to the buttons. I've found that having a gallery section on the project page stops the navigation link working, but if I remove the gallery it works. But if I turn animations on, it stops working again. This is the site I've been testing on: https://ing-test-built-in.squarespace.com/ PW: ing If you check the attached video - I delete the gallery and the link works with one click. Then I re-add the gallery and it goes back to needing two clicks. gallery.mov

Hi @tuanphan, it's quite strange. I've been doing some testing. The buttons are working for me, it's mainly just the portfolio pages, the navigation text links that automatically appear under each portfolio page where I'm having the issue. So I'm not sure in regards to the buttons. I've found that having a gallery section on the project page stops the navigation link working, but if I remove the gallery it works. But if I turn animations on, it stops working again. This is the site I've been testing on: https://ing-test-built-in.squarespace.com/ PW: ing

Hi @tuanphan - is it possible to check if this code can be made to work with the navigation text links that appear at the bottom of project pages? Thank you for any help!

Having the same problem, very frustrating.

Here's an example @mbockmaster @bradgood RPReplay_Final1713238983.mov

Hi @mbockmaster - thank you for the CSS. Is it possible to check how I'd need to configure the CSS for this to work on text links within the projects pages? The project page bottom navigation between projects and any text links on the page all seem to require 2 clicks after page load to start working. Thank you for any help!