Jump to content

How to show progress bars from multiple pages on Home Page

Recommended Posts

Hi! 

I'm trying to add custom reading progress bars to 3 separate pages and I'd like them to also show on the Home page under the link to each of these pages. Is this at all possible? I have access to code injection if that makes a difference. (attached is a snippet of my wireframe for the Home page) 

Thank you!! 

Home_page.JPG

Edited by vikavikavika
details
Link to comment

They will be a fixed progress bar or dynamic bar? I mean the number in the bar will be fixed and you need to adjust it manually, or it will change dynamically based on some metric (for example changes based on the amount of donations that users have sent)

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
47 minutes ago, tuanphan said:

They will be a fixed progress bar or dynamic bar? I mean the number in the bar will be fixed and you need to adjust it manually, or it will change dynamically based on some metric (for example changes based on the amount of donations that users have sent)

It will be a dynamic bar based on their reading progress on each of these 3 pages (for example, if they scrolled down all the way to the bottom it'd be marked as 100% on the Home page ideally). 

Link to comment
4 hours ago, vikavikavika said:

I'm trying to add custom reading progress bars to 3 separate pages and I'd like them to also show on the Home page under the link to each of these pages.

This will require some custom JavaScript to do something like this:

  1. when a page loads, check if the page is one of the three pages to be tracked.
  2. if a tracked page has loaded, the script will need to monitor the user's progress as they scroll down the page.
  3. when the user stops scrolling, the user's progress (scroll position) can be saved to local storage so it can be recalled later.
  4. when the homepage loads, the script should look for the module grid (shown in your screenshot) and add the progress bars to the page content in the appropriate positions. 
  5. the scroll progress should then be loaded from local storage and the progress bars adjusted accordingly.

This is a very niche request so, whilst all the steps are straightforward for a developer, it's unlikely you'll find any similar posts with pre-written code that you could copy and paste. 

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

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.