Accéder au contenu principal

Joomla / YOOtheme Pro: reading progress bar

Catégorie

Joomla
Crée
30 Mai 2023
Modifié
22 Août 2023
Clics
1724
Note
Vote

In Helix Ultimate it is possible to activate a "Reading Time Progress Bar". In YOOtheme Pro you need to do this by hand.

In oder to get a progress bar you can do the following:
- create a module that contains not much but a "Module Class Suffix" like "progress-bar" at least. 
- In your YOOtheme Pro theme, add the Javascript and CSS.
- Go to "Setting" -> "Custom Code" -> Script:

window.addEventListener('scroll', updateProgressBar);

function updateProgressBar() {
const windowHeight = window.innerHeight || document.documentElement.clientHeight;
const fullHeight = document.documentElement.scrollHeight - windowHeight;
const scrolledHeight = window.pageYOffset || document.documentElement.scrollTop;

const progress = (scrolledHeight / fullHeight) * 100;

const progressBarElements = document.getElementsByClassName('progress-bar-alexis');
for (let i = 0; i < progressBarElements.length; i++) {
progressBarElements[i].style.width = progress + '%';
}
}

updateProgressBar();

 - Go to "Setting" -> "Custom Code" -> CSS/Less
.progress-bar{
width: 0;
height: 5px;
background-color: #4da4b0;  /* Set text color to red */
position: fixed;
top: 0;
left: 0;
z-index: 9999;
transition: width 0.3s;
}


Articles de la même catégorie