Guest Posted May 4, 2022 Share Posted May 4, 2022 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
paul2009 Posted May 4, 2022 Share Posted May 4, 2022 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: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
Guest Posted May 4, 2022 Share Posted May 4, 2022 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
paul2009 Posted May 4, 2022 Share Posted May 4, 2022 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: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
Guest Posted May 4, 2022 Share Posted May 4, 2022 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. Link to comment
tuanphan Posted May 8, 2022 Share Posted May 8, 2022 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. 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment