Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

D4D0M3N's Achievements

  1. With the help of bangank36 we found the solution which works very well: https://codingartistweb.com/2021/08/page-scroll-percentage-with-javascript/ 1. Step, put this code into code block: <div id="progress"> <span id="progress-value"></span> </div> <style> #progress{ height: 100px; width: 100px; border-radius: 50%; position: fixed; bottom: 25px; right: 25px; box-shadow: 0 0 10px rgba(0,0,0,0.2); display: grid; place-items: center; } #progress-value{ display: block; height: calc(100% - 20px); width: calc(100% - 20px); background-color: #ffffff; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 20px; } </style> 2. Step, put following JS script into footer injection. <script> let scrollPercentage = () => { let scrollProgress = document.getElementById("progress"); let progressValue = document.getElementById("progress-value"); let pos = document.documentElement.scrollTop; let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; let scrollValue = Math.round( pos * 100 / calcHeight); scrollProgress.style.background = `conic-gradient(#008fff ${scrollValue}%, #c0c0ff ${scrollValue}%)`; progressValue.textContent = `${scrollValue}%`; } window.onscroll = scrollPercentage; window.onload = scrollPercentage; </script>
  2. Yes, of course. domengabriel.com/testorecode 312 However, I curently don't have this code installed, as I don't know how to set the html and css for it.
  3. Hi, I would like to creat a scrolling percentage indication on my one page website. I found this code, but somehow can't make work: <script> // Replace the this class with the class of the text element where you would like to display the percentage. let scrollText = document.querySelector('.your-class'); // This function is calculating the percentage of the current position. function getScrollPercent() { var h = document.documentElement, b = document.body, st = 'scrollTop', sh = 'scrollHeight'; return (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100; } // This updates the text with the percentage of the function above. window.addEventListener("scroll", () => { let currentScroll = parseInt(getScrollPercent()); scrollText.textContent = currentScroll; }); </script>
  4. Me also. On any other devices, fonts are not showing properly. www.domengabriel.com 312 @font-face { font-family: 'Moonlite Outline'; src:url(https://static1.squarespace.com/static/618d08c5b46ba22b1b512cb4/t/6311a8040b014444853ef041/1662101508201/Moonlite+Outline.otf); font-family: 'Moonlite Solid'; src:url(https://static1.squarespace.com/static/618d08c5b46ba22b1b512cb4/t/6311a8136a3ef47a46804869/1662101523086/Moonlite+Solid.otf); font-family: 'Roboto Mono'; src:url(https://static1.squarespace.com/static/618d08c5b46ba22b1b512cb4/t/6329d128a34b69526f7c2649/1663684905094/RobotoMono-Regular.ttf); } h1 {-webkit-text-stroke: 1px white;font-family: 'Moonlite Solid',sans-serif !important; line-height: 86% !important; color: rgba(0,0,0,0)!important; transition: color 6s; } h1 em { font-family: 'Moonlite Outline',sans-serif !important; font-style: normal; text-transform: uppercase; text-shadow: 0 0 10px #fff; } h4 em { font-style: normal !important; font-family: 'Moonlite Outline',sans-serif !important; text-transform: uppercase; color: white; } h4 { font-style: normal !important; font-family: 'Moonlite Outline',sans-serif !important; text-transform: uppercase; text-indent: 1%; margin-left: 3px; }
  5. On the previous page of this threat, NickCave did exactly what I am triing to achieve. I see he succed: florianbrooks.squarespace.com so I'm wondering if someone could help me customize a code to get similar result
  6. Thank you, I solved this one. For some reason, for me was the spacing before the (.
  • 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.