Jump to content

Make Cover Page a Clickable Link with Button Function still Enabled

Recommended Posts

Posted

I wanted to make our entire Cover Page a clickable link. I have code for it, but I don't want to include the Social Buttons. Can someone help me write the code so that the Social Buttons still work?

Page in question: https://www.puyallupumc.org. Squarespace version 7.0.

<body onclick="window.location.href='newpage.html';" style="cursor:pointer; width:100%; height:100%;"></body>

Thank you!

Posted (edited)

Hey @PUMCSBH! Here you go!

let elementsArray = document.querySelector(".sqs-slide-layer.layer-front");

if (elementsArray) {
    elementsArray.style.cursor = "pointer";
    elementsArray.addEventListener("click", function (event) {
        let targetElement = event.target;
        while (targetElement) {
            if (targetElement.tagName === 'A') {
                // It's a link, allow the default behavior
                return;
            }
            targetElement = targetElement.parentElement;
        }
        window.location.href = 'home';
    });
}

You don't need the code you mentioned. This adds a listener for a click on the slide but checks to make sure the click event didn't happen inside a link element.

Hope this helps!

Edited by Inspirerd

Daniel Rodrigues | Excito LLC
Squarespace Web Design for Photographers & Creatives
🌐 https://www.excitollc.com/ | ✉ Contact Me: daniel@excitollc.com
💡 Squarespace Enthusiast | 📖 Squarespace Design Blog for Photographers
🤝 Always happy to help and collaborate! Connect with me on LinkedIn.

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.