What is a “reading progress bar”?
Create a custom HTML module
Assign the module to the pages where you want the “reading progress bar” to appear
You may have noticed when you scroll down the pages on this website that there's a green-coloured bar at the top of the page that moves. This bar is sometimes called a “reading progress bar” and there are a number of extensions you can obtain that will do this.
I was inspired to write a simple module—don’t worry, there’s nothing you need to download or install—after reading this question posted at The Joomla! Forum™.
I've noticed something new … a blue progress bar … [corresponding to] the vertical scroll … and distance to bottom of page.forum user, Joomla forum,18-Aug-2022
Create a custom HTML module
There are many ways you can incorporate this feature in your J! website but this is how I achieved it with a Custom HTML module. The techique involves four lines of HTML, sixteen lines of CSS and seven lines of Javascript and they’re located in the one place. The source code for the module appears below:
<div class="progress-container">
<div id="myBar" class="progress-bar"> </div>
</div>
<style>
.progress-container {
position: fixed;
top: 0px;
z-index: 2000;
width: 100%;
background-color: #f5f5f5 !important;
width: 100%;
height: 4px;
background: #ccc;
}
.progress-bar {
height: 4px;
background: #57b4fc;
width: 0%;
margin-bottom: 4px;
}
</style>
<script type="text/javascript">
// When the user scrolls the page, execute progressiveScroll function
window.addEventListener('scroll', progressiveScroll);
function progressiveScroll() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
You need to give this module a title (e.g. “Progressive scroll bar”) and assign it to a template position, preferably at the very top of the page. The only remaining step is to assign this module to the pages—the menu items—in your J! website. You can experiment with different template positions and pages as you feel are appropriate to your own wants and needs. That’s all there is to it. Enjoy.
Brilliant idea, I ♥ it :)
With your permission, I would love to translate it if French on my website (with a link to yours, of course).
Merci Michael for the tutorial!
You have my complete approval (and thanks) for doing this. Cheers 😀
Is there a way to have this start from the center and go out toward the outside edges so that when it gets to the end the top bar is complete.
I wouldn't have a clue and it's not something that interests me. I don't think I've seen a progressive reading indicator that works that way and if you've seen one then you could ask the author how they went about achieving it. I've gone for simple; something quite simple and easy to achieve without having to know too much. Good luck.
Thanks for doing and sharing Michael - interesting stuff!
Only yesterday I was thinking about how to encourage visitors to scroll to the bottom of pages. This is unobtrusive yet enough to make some people curious - good for mobiles I would think.
And, it's a great showcase for being able to do more with Joomla Core. I use Custom Modules a lot but have never thought about them like this.
Hello Michael,
Thanks for this nice element :-)
I use it in my own website.
Had to put a few lines extra CSS in it for my template but it works great!
https://mol4media.nl/blog
Michael, thank you so much!
The solution is simple, but yet elegant, and this is very important. I've added it to our site in blog section https://norrnext.com/blog (when seeing a blog post) and it looks awesome!
Perhaps the next step is to create a solution "read XXX times" in the same way and without jQuery. It could be kind of script to include to custom.js file of the front-end template.
Thanks again and good luck!
Thank you for your comment, Eugene.
I agree about using "native" Javascript and yes, you could add the JS to a some "custom" JS file in J! 4.x. if you want to. I tried to keep the instructions simple for this article.
I have a few Javascript code snippets that I use in some of my articles. For example, see the article “I read it somewhere on the internet …” and find the icon that appears as . Clicking that icon runs a small piece of JS and the source code is located in a file separate from the article that uses it. It would take another article to show people how to load a Javascript file but the essence of it is to add a line like to the raw HTML code in your article
I'm sure you wouldn't have any problem doing that.
Hi Michael,
There' a conflict with Cassiopeia template when using backtotop. template.js already contains a onscroll override.
To solve this, replace window.onscroll = progressiveScroll; by window.addEventListener('scroll', progressiveScroll);
Pascal
Thank you, Pascal.
I saw your observation on the article I wrote for the Joomla Community Magazine. There isn't this problem on this website because I am not using the Cassiopeia template here and I haven't used a "back to top" button on a J! 4.x demonstration site that I created, so I’ll have a look at this later and see how this works.
I tried your suggestion here (on this website) and it seems to work well, so I’ve incorporated your change in my article.
Cheers,
Michael
UPDATED: I added the "back to top" button on my J! 4.x demonstration site and I see the problem; I made the change you recommended and it works. Thank you very much.
Hi Michael,
There are some additional thoughts I'd like to share with you and hope to get your opinion.
There is the latest news element in the end of content and footer at our site. Summary, the progress bar finishes its progress in the end of footer and it looks not nice.
Please have a look at the screenshot:
https://postimg.cc/f3J8rKJH
My proposal is to add breakpoint ID and update the script to count this breakpoint. So, we just could add "end-bar" or "latest-news" ID somewhere below the content and it will give a script the information where to stop the progress bar.
What do you think?
Thanks for attention.
Regards,
Eugene
Thanks for your comment, Eugene.
I understand what you mean about the scroll bar reaching 100% width when the user reaches the footer. I haven't tested the effect of my idea on a website that may have further content after the footer so I really can't say anything about that. Unfortunately, however, the screenshot you attempted to show me in the URL you posted, displays as a blank screen. My idea is just an idea that people can play with. It's not necessarily a finished product but if you think it can be improved then I'm sure other people who visit this site may be able to get other ideas. Cheers.
Hi Michael,
It's strange that URL gives a blank page. It is an online service for uploading screenshots.
Ok, no problem. Please see the effect I am talking about alive: go to https://norrnext.com and proceed to Blogs and open any blog post. When the content ended, there is a "LATEST NEWS" module and a footer. these sections takes space and progress bar counts it, but I'd be glad to set the breakpoint before LATEST NEWS module. As the result, when a user scrolls to the end of the content - the progress bar should be finished at 100% and it has no sense what's comes below and how many elements are there. Just an idea.
P.S. I receive no notifications about your comments when they're published as an answer to my comment. I'll be back here after a few days :-) But just notified you there is a problem with mail function.