Dans ce tutoriel, vous apprendrez comment afficher une barre de progression de lecture dans Joomla
Vous avez peut-être remarqué lorsque vous faites défiler verticalement les pages de certains sites Web, il y a parfois une barre de couleur en haut de la page qui se déplace horizontalement. Cette barre est parfois appelée "barre de progression de lecture" et il existe un certain nombre d'extensions qui vous permettent d'obtenir ce résultat. Dans ce tutoriel, nous allons afficher une barre de progression de lecture dans Joomla sans ajouter la moindre extension.
Afficher une barre de progression de lecture
Michael Russell, l'auteur initial de ce tutoriel, a été inspiré par une question qui a été posée sur le forum Joomla.org:
Je vous partage donc sa solution que je trouve très intelligente. Rassurez-vous, il n'y a rien à acheter, rien à installer et rien de compliqué.
Créer un module Contenu Personnalisé
Il existe de nombreuses façons d'intégrer ce type de fonctionnalité dans votre site Web Joomla, mais c'est ainsi que Michael y est parvenu à partir d'un simple module HTML personnalisé. Sa technique implique quatre lignes de HTML, seize lignes de CSS et sept lignes de Javascript et elles sont toutes situées au même endroit. Le code source du module apparaît ci-dessous :
<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; <!-- largeur de la barre -->
background: #57b4fc; <!-- couleur de la barre -->
width: 0%;
margin-bottom: 4px;
}
</style>
<script type="text/javascript">
// Lorsque l'utilisateur scrolle la page, on éxecute la fonction progressiveScroll
window.onscroll = 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>Il ne vous reste plus qu'à donner un titre à votre module (par exemple "Barre de progression de lecture") et à l'affecter à une position de template, de préférence tout en haut de la page.
La dernière étape consiste à affecter ce module aux pages (les éléments de menu) de votre site Web Joomla. Vous pouvez expérimenter différentes positions de template et pages selon vos propres souhaits et besoins.
Et voilà, vous avez réussi à ajouter cette fonctionnalité dans votre site Joomla et sans installer la moindre extension. Avouez que ce n'était pas très compliqué !