How to create a reading bar in your Joomla website
You may have noticed when you scroll down the pages in the magazine that there's a blue-coloured bar (just below the menu items 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. Without knowing anything more than how to copy and paste, you can do the same thing with your Joomla websites with a custom HTML module in a couple of minutes.
Create a custom HTML module
There are many ways you can incorporate this feature in your Joomla website but this is how I achieved it with a Custom HTML module. The techique involves three 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
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 Joomla 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.
Other resources:
- There is a video tutorial produced by Tim Davis available on YouTube: https://www.youtube.com/watch?v=ZLIENKdFNI
This article is based on previously published original work at the author's website
Translations
Read this in German: Ein Lese-Fortschrittsbalken für deine Joomla-Seite
About the author
By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/
Comments 6
Has anyone tried this yet? I have a feeling part of the instructions are missing
Yes I tried it and of course it doesn't work.
You are correct there is a missing instruction about text-filters
In the css part there are multiple css attributes so they overrwrite each other
In the js part the very first line does not work "Uncaught SyntaxError: Unexpected token '.' "
The magazine really should be a showcase of the best of joomla. So that means using the web asset manager and testing your code before publishing.
Thanks, Brian. I made a small (but fatal) error in copying the source from a working website in preparing this article. The error is line one of the Javascript that should read:
window.onscroll = progressiveScroll;
and not "function window.onscroll ..." as it appeared in the article. I have submitted a correction to the post.
I would love to know how the CSS could be improved so that the "multiple CSS attributes ... [that] overwrite each other" could be eliminated.
We could have a very long debate about "text filters" and prohibited elements when using TinyMCE (and we have had that debate elsewhere) but I believe most readers who have sufficient technical skills to understand the articles in the J! Community Magazine would be aware of the restrictions in play with TinyMCE; there are other editors available that do not strip script and/or style blocks.
I've seen the demo of this bar on Tim Davis' YouTube channel a couple of weeks ago, and I tried this out. I works for me, but I've taken the code not from this article, but from Michael's page (https://kuneze.com/blog/116-a-progressive-reading-bar-in-your-joomla-website-without-extensions).
Hello, thanks Michael for this article and this solution. I have face of an issue with the tempate Cassiopeia and the option "back-to-top-link" of the template. I have open a post in the french joomla forum and team have help me to solve the issue. The proposed and tested solution is to modify the code
Original Code:
window.onscroll = progressiveScroll;
New Code:
window.addEventListener('scroll', progressiveScroll);
Thanks for this suggestion. I've updated the article.