Jump to content

Can I you use addEventListener in Squarespace? Custom code

Go to solution Solved by adifederico,

Recommended Posts

Site URL: https://www.keystorage.com/resource-center

Issue 1: I have a page I am developing where I have block areas I made with the text tool. the text area has a background image which makes it seem more like a button block. The problem I have run into is only the text is linked and not the entire background area which I did setup with a pointer. I have tried to add an eventlistener using JavaScript to make that whole area clickable and then load another page on click. Nothing I seem to do works. I was using this code here I got from w3schools: 

<script>
document.getElementById("block-yui_3_17_2_1_1665162425531_150044").addEventListener("click", loadExternalPage);

function loadExternalPage() {
  window.location.href = "https://info.keystorage.com/s/PKJLgJMExM3M9yW";
}
</script>

Issue 2: I use background images from the static and hover image states. While hovering the image changes to its hover background image but there is a flicker of blue that comes before the hover state. Im pretty sure this blue comes from the section intrinsic color theme I have chosen. Is there away to get rid of that blue flicker? 

 

resource-center-example.jpg

Link to comment
  • Replies 1
  • Views 566
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

I have finally found a solution. I used this code here:

<script> 

   $(document).ready(function() { 

     $('#block-yui_3_17_2_1_1665162425531_150044').attr("href", "https://info.keystorage.com/s/PKJLgJMExM3M9yW");

     window.addEventListener('load', function(){

       document.querySelector('[href="https://info.keystorage.com/s/PKJLgJMExM3M9yW"]').addEventListener('click', function() {

         window.location = "https://info.keystorage.com/s/PKJLgJMExM3M9yW";

       })

     })

   }); 

</script>

 

I found it here (https://www.therapistsitetoolbox.com/blog/redirect-a-folder-click-squarespace) and tweaked it a bit. I placed code in advanced code injection and it worked.

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.