Jump to content

Prevent page from refreshing when a visitor clicks on a button block that is currently not linked.

Go to solution Solved by paul2009,

Recommended Posts

Hi everyone,

I'm trying to find a way to prevent a page from refreshing when a visitor clicks on a button block that is currently not linked.
I have tried adding the following css code to the relevant section of the homepage, but I want to disable only buttons that are currently not linked. This code disabled all the buttons in the section. Could anyone help me make this work ?

 .user-items-list-item-container[data-section-id="6589bcfe73da041088f119c1"] .list-item-content__button {
  pointer-events: none;
}
 
Thank you

 

 

Screenshot 2024-04-16 at 9.50.10 PM.png

Edited by emilie_one
Link to comment

Hi @emilie_one if a button is not linked, it shouldn't do anything. Please share your website url, and the page that you are referring to, and we can take a look.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (may contain affiliate links)


 

Link to comment
Posted (edited)

Hi @melody495, thank you for getting back to me.
I'm referring to the block "Les Episodes" on the home page. Buttons are currently hidden because our upcoming episodes are not yet available. Is that a problem for you to take a look ?

Edited by emilie_one
Link to comment
3 minutes ago, emilie_one said:

I'm referring to the block "Les Episodes" on the home page. Buttons are currently hidden because our upcoming episodes are not yet available. Is that a problem for you to take a look ?

Unfortunately without seeing the issue, I don't know where to look! If you don't want to modify your homepage as-is, you can duplicate the page, and add back in the button to demonstrate the issue you are describing.

Then myself, or others from the community can try and help you.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (may contain affiliate links)


 

Link to comment
Posted (edited)

Of course. Just duplicated the page so you could have a look @melody495:

As you will see, if you click on any of the three buttons I'm talking about, even though they're not linked, it will still redirect you to the home page. 

Edited by emilie_one
Link to comment
On 4/17/2024 at 7:23 AM, emilie_one said:

As you will see, if you click on any of the three buttons I'm talking about, even though they're not linked, it will still redirect you to the home page. 

They don't go to the home page, but they do open up a new window with the same page. Weird, as I can't reproduce that on my test site!

This seems to be a platform issue, so I would suggest contacting Squarespace support .

You could potentially address it with custom code, but the buttons don't have a unique ID, so you can't target your code for just one button.

image.png.5c88196e34f1724242af0bdc70579804.png

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (may contain affiliate links)


 

Link to comment

Thanks for checking @melody495!

Thought I might be able to work something out with custom code but my problem was exactly as you mentioned, I couldn't find a way to target the code for just one button. 

I already contacted Squarespace support before reaching out on the forum. 
They told me the following and recommended consulting the Squarespace Forum community.
I understand you are wanting to find a way to prevent the page from refreshing when a visitor clicks on a Button block that is currently Not Linked. I've checked on this and I don't see that we currently offer a way to prevent this at this time. 

So I guess there's not much I can do about this then...

Link to comment

@emilie_one you can try this.

Edit: see Paul's answer below, it's even neater.

Rather than targeting the button directly, you can select a specific list item. This selects the list item element based on the order they are in, then selects the respective button. This selects the 1st list item.

.user-items-list-item-container[data-section-id="6589bcfe73da041088f119c1"] .list-item:nth-child(1) {
  .list-item-content__button {
 	 pointer-events: none;
  }
}

 

To select multiple buttons, you add to it like this. This selects the 1st and 3rd list item.

.user-items-list-item-container[data-section-id="6589bcfe73da041088f119c1"] .list-item:nth-child(1), .list-item:nth-child(3) {
  .list-item-content__button {
 	 pointer-events: none;
  }
}

 

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (may contain affiliate links)


 

Link to comment
  • Solution

You should be able to prevent users clicking an unlinked List Item Button with the following Custom CSS:

/* Prevent users clicking empty buttons in List Items */
a.list-item-content__button[href=""] {
  pointer-events: none;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.