mike.bj

On 4/16/2024 at 9:55 AM, bradgood said:

This is a JavaScript/jQuery solution, and site-wide animations can remain enabled. Timeout is optional but will allow the animation to be visible before the page redirects.

<script>
    $('.sqs-block-button a').on('touchstart', function () {
      var href = $(this).attr('href');
      setTimeout(function(){
        window.location.href = href;
      }, 100);
    });
</script>

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>

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>

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

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>

On 4/16/2024 at 1:58 PM, mike.bj said:

Hi @bradgood, is there a way for this code to work for the project navigation links?

I tried installing but they still take two clicks.

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>

On 4/16/2024 at 9:56 AM, bradgood said:

This is a JavaScript/jQuery solution, and site-wide animations can remain enabled. Timeout is optional but will allow the animation to be visible before the page redirects.

<script>
    $('.sqs-html-block a').on('touchstart', function () {
      var href = $(this).attr('href');
      setTimeout(function(){
        window.location.href = href;
      }, 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>

1 minute ago, mike.bj said:

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

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.

3 minutes ago, mike.bj said:

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.

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

Just now, mike.bj said:

 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

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.

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

On 4/7/2024 at 11:59 AM, tuanphan said:

You try this

https://forum.squarespace.com/topic/259523-mobile-buttons-and-links-require-2-taps-to-work/?do=findComment&comment=737991

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

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!

Thank you @bradgood - I tried this but the project navigation still seems to need two clicks. Is there a way to include these text links in the above code? I tried installing in the Code Injections area - tried footer and header but no luck.

Hi @bradgood, is there a way for this code to work for the project navigation links?

I tried installing but they still take two clicks.

Hi, I have the same issue. It isn't acceptable for client sites.

How can turning off something that gives the website some movement be an adequate solution. I can't understand how this isn't an immediate priority. It's like a lot of people complain about it but they won't acknowledge how bad an issue it is or if it even exists.

I know they've said they've sent to dev but it's still happening. I'd say a lot of sites would lose traffic because users would just get annoyed. 

Some links like top nav never seem to do it, but then other places around the site don't work on first click on mobile. I'm using iphone 12 promax with latest OS and chrome browser.

Did you manage to work out any code to fix it? That would be a life saver because I've got angry clients....like platform deal breaker issue.

@tuanphan Thank you for this code. Had the same problem and came across it. Works perfectly, you have some serious talent!

Hi @WillMyers - looks great, thank you.

Finding if you try and use the slide controls (arrows, or using the mouse to drag to the next image etc) - then it seems confused and jumps between 2 slides. Like it's trying to load against the user navigating manually.

Is that expected / any fix for that?

Thank you, Mike.

Hi Paul, thank you for the tip, that's great.

Noticed on mobile view, when you have the Sidebar option selected - it seems to display the categories as a list at the top.

Hoping to learn if there's a way to change it so if there are lots of categories it displays as a dropdown?

Thank you for any insight! Mike.

Site URL: https://nlc-built-in.squarespace.com/

Hi,

Trying to work out how to stack the button and social icons under the navigation in 7.1

With the screens attached - the black background is version 7, the grey background is 7.1

Was also trying to stop the navigation items stacking so fast when the screen is collapsed.

I'm trying to achieve the same layout in 7.1 as 7. 

Thank you for any help with this!

https://nlc-built-in.squarespace.com/

PW: nlc