Jump to content

Javascript not working in a HTML Code block for a SVG Image scrolldown effect

Recommended Posts

Hi everyone, right now I'm working on a scroll down effect that is supposed to trigger an SVG image. I run my code in a HTML file and it works perfectly but when I do it in my SquareSpace site it doesn't work at all. All i get is my image in the middle of my screen, doing nothing at all.

Here is my JS code in HTML:

<body>
    <div>
        <svg width="285" height="277" viewBox="0 0 285 277" fill="none">
            <path d="M283.5 138.5C283.5 214.123 220.413 275.5 142.5 275.5C64.5873 275.5 1.5 214.123 1.5 138.5C1.5 62.877 64.5873 1.5 142.5 1.5C220.413 1.5 283.5 62.877 283.5 138.5Z" stroke="#FF0000" stroke-width="3"/>
        </svg>
    </div>
    <script>
   
        let path = document.querySelector('path')
        let pathLength = path.getTotalLength()
       
        path.style.strokeDasharray = pathLength + ' ' + pathLength;
       
        path.style.strokeDashoffset = pathLength;
       
        window.addEventListener('scroll', () => {
        var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
        var drawLength = pathLength * scrollPercentage;
        path.style.strokeDashoffset = pathLength - drawLength;
        }
        )
    </script>
</body>

This code works, so what am I doing wrong in squarespace ?

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

12 minutes ago, VentoAureo said:

I run my code in a HTML file and it works perfectly but when I do it in my SquareSpace site it doesn't work at all.

There can only be one <body> element in an HTML document, so if you're adding it to a Squarespace page (which will already have a body element) you'll want to remove the body tags from it.

 

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment
2 minutes ago, paul2009 said:

There can only be one <body> element in an HTML document, so if you're adding it to a Squarespace page (which will already have a body element) you'll want to remove the body tags from it.

 

Hi Paul, 

 

Yes I know, I just copy/pasted this code from my HTML File, but even if I remove this tags, only my SVG File shows up and my script is completly ignored :/

 

Link to comment

When you're posting a question that involves code it's always helpful if you can include a working link to the page where it is installed so that we can see what it is happening. However, I don't see any obvious issues so it's probably something simple, for example:

  • Have you added CSS to position the SVG and set the z-index so that it is not "under" the page content.
  • Have you added the script using code injection?

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment
1 minute ago, paul2009 said:

When you're posting a question that involves code it's always helpful if you can include a working link to the page where it is installed so that we can see what it is happening. However, I don't see any obvious issues so it's probably something simple, for example:

  • Have you added CSS to position the SVG and set the z-index so that it is not "under" the page content.
  • Have you added the script using code injection?

Here is a link to the page : https://www.myresoplus.com/try-out-html-css-myr

I didn't add any CSS so far juste some simple <style> above the <svg> line, to make it centered.

About the code injection for the script, I've tried to code it in the footer (I saw that it was the place where it was supposed to be) but it didn't work either, so I just gathered everything in the code block in my page.

Capture d’écran 2022-05-04 163914.png

Link to comment
On 5/4/2022 at 9:40 PM, VentoAureo said:

Here is a link to the page : https://www.myresoplus.com/try-out-html-css-myr

I didn't add any CSS so far juste some simple <style> above the <svg> line, to make it centered.

About the code injection for the script, I've tried to code it in the footer (I saw that it was the place where it was supposed to be) but it didn't work either, so I just gathered everything in the code block in my page.

Capture d’écran 2022-05-04 163914.png

Have you solved it yet?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.