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 me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to 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 is optional. 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 me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to 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 is optional. 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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