[Resolved] scroll bar at the top which shows how much the content is scrolled.

Home Forums Support [Resolved] scroll bar at the top which shows how much the content is scrolled.

Home Forums Support scroll bar at the top which shows how much the content is scrolled.

  • This topic has 15 replies, 6 voices, and was last updated 7 months ago by David.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1672458
    Mouse

    Hi there, I need a bar that moves as we scroll up and down showing the progress of the article. Besides that, is there a way if i can add how much time would it take on average to read teh blog post

    #1672888
    Leo
    Staff
    Customer Support

    Hi there,

    There isn’t an option built-in GP for this.

    You will need to look for a plugin that offers this solution.

    #1673260
    Mouse

    Hi thanks for helping me out.

    Sorry for bugging you lately but its just about the time where I need to fix up a few things before I finally make up my mind to renew the theme for the next year…

    SO can this be done without the plugin? (with css probably)

    #1673291
    Elvin
    Staff
    Customer Support

    Hi there,

    CSS won’t be enough as you’ll definitely need a script that calculates the position of the scroll on the viewport and reflect it on some sort of a progress bar.

    The easy way is to find a plugin that does this for you.

    A wise man once said:
    "Have you cleared your cache?"

    #1673384
    Mouse

    Can you please recommend a nice plugin for that? That is good (with fewer vulnerabilities) and working with this theme?

    #1673616
    David
    Staff
    Customer Support

    Hi there,

    try this:

    1. Create a new Hook Element:

    https://docs.generatepress.com/article/hooks-element-overview/

    Add this to the hook content:

    <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
    </div>
    <style>
       body {
          margin-top: 8px; /* match height of bar */
       }
    </style>
    

    Select the before_header hook
    Set the Priority to 1
    Set the Display Rules to where you want the bar to appear. eg. Posts > All Posts
    Publish the Hook

    2. Create a new hook.
    Add this to your Hook content:

    <script>
    window.onscroll = function() {progressScrollBar()};
    
    function progressScrollBar() {
      var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
      var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      var scrolled = (winScroll / height) * 100;
      document.getElementById("progressBar").style.width = scrolled + "%";
    }
    </script>

    Select the wp_footer hook
    Set the Display Rules to match the first hook.
    Publish.

    3. Add this CSS to your site:

    .progress-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 8px; /* height of bar */
      background: #ccc; /* Background color */
      z-index: 10000; /* increase z-index to bring in front of slider */
    }
    
    .progress-bar {
      height: 8px;
      background: #4caf50; /* Progress bar color */
      width: 0%;
    }
    
    /* adjust position of progress when admin bar is present */
    .admin-bar .progress-container {
      top: 33px;
    }

    Reference site for where the code comes from:
    https://www.w3schools.com/howto/howto_js_scroll_indicator.asp

    #1674609
    Mouse

    Alright this is working fine. (added to one of the link shown below) But it has some issues:

    1- Shows a white bar on all the other pages not being implemented on.
    2- I am using sticky slider with css which blocks it (it runs behind the sticky slider)

    #1675047
    David
    Staff
    Customer Support

    I updated the 1. HTML and 3. CSS above to fix that.

    #1675158
    Mouse

    Thanks. That fixed all.

    #1675465
    David
    Staff
    Customer Support
    #1683011
    Ramon

    I have a tip for when someone tries to use this code, but it doesn’t work because another plugin uses window.onscroll. You can also use an event listener:

    <script>
    
    	window.addEventListener('scroll', () =>  progressScrollBar())
    
    function progressScrollBar() {
      var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
      var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      var scrolled = (winScroll / height) * 100;
      document.getElementById("progressBar").style.width = scrolled + "%";
    }
    </script>
    #1683054
    David
    Staff
    Customer Support

    Thanks for sharing the solution! Much appreciated

    #2134882
    Adrian

    Hi,

    Sorry to hijack this post, but the question is 100% related to the method described here.

    I have applied this solution successfully, although I would like to know if it is possible to introduce one modification.

    I would like the progress bar to reflect the height of the post not the page. I mean that the progress bar shows 100% when it reaches the end of the post and not when it reaches the end of the footer. Is that possible?

    Thank you in advance

    #2135275
    David
    Staff
    Customer Support

    Hi there,

    to do that ( properly ) would require a plugin or custom development.
    The most i can offer is the ‘hackish’ method i provided here:

    https://generatepress.com/forums/topic/progress-bar-in-blog-posts/#post-2069098

    #2135362
    Adrian

    Hi David,
    I can live with the “hackish” method. I had to set the figure to a much higher number due to the design of the page, but it worked perfectly. Although the calculation may not be as exact as in some of the plugins I have tried, the truth is that this code is much lighter.
    Many thanks.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.