[RÉGLÉ] Ajouter une barre d'avancement de lecture

[Jeff71]

Bonjour, j'ai trouvé cet article sur le magazine joomla pour ajouter une barre d'avancement de lecture.
J'ai crée un module custom où j'ai collé le code (utilisation de codemirror)
J'ai affecté ce module à la position topbar (Cassiopeia)

Je vois bien la barre s'afficher en haut de ma page mais pas d'avancement lorsque que je scroll vers le bas de la page.
Des idées ? merci

Bonne Journée

[woluweb]

un lien vers ton site ?
sinon c'est un peu boule de cristal

[Jeff71]

Et voila https://dublepourdemain.freesite.host/au-fil-de-leau , c'est un site de test
Merci de votre aide

[woluweb]

déjà, bonne nouvelle : il n'y a pas d'erreur dans la Console du navigateur.
autre bonne nouvelle, dans le html on voit bien le script :

<script type="text/javascript">
	// When the user scrolls the page, execute progressiveScroll function
	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>

Si je vais dans le html et que je mets moi-même la largeur à 50% en ajoutant style="width: 50%" alors la barre adapte bien ses couleurs :
<div id="myBar" class="progress-bar" style="width: 50%">&nbsp;</div>

Du coup, c'est un peu comme si le script le déclenchait pas pour ajouter/modifier de style="width: X%".
J'ignore pourquoi, là je dois filer je peux pas investiguer plus.
Mais c'est déjà un bon début

[pmleconte]

Bonjour,

Après un rapide test, le code est correct.

Le problème semble venir du paramètre "lien haut de page" du template. En le désactivant, cela fonctionne comme prévu.

Pascal

[Jeff71]

Bonjour,

Après un rapide test, le code est correct.

Le problème semble venir du paramètre "lien haut de page" du template. En le désactivant, cela fonctionne comme prévu.

Pascal

Bingo, j'ai désactivé dans le Template Cassiopeia "Lien 'Haut de page'", maintenant ca marche
Merci du support

As tu une idée pour rendre les deux co-habitables ?

Bonne journée à tous

JF

[pmleconte]

Encore un qui veut le beurre et l'argent du beurre, sans parler de la fermière....

Plus sérieusement, dans le template.js de Cassiopeia, il y a déjà un override de window.onscroll.

Pour faire fonctionner le deuxième override (celui de la barre d'avancement), il faut remplacer la ligne :

window.onscroll = progressiveScroll;

par

window.addEventListener('scroll', progressiveScroll);

Pascal

[Jeff71]

Encore un qui veut le beurre et l'argent du beurre, sans parler de la fermière....

Plus sérieusement, dans le template.js de Cassiopeia, il y a déjà un override de window.onscroll.

Pour faire fonctionner le deuxième override (celui de la barre d'avancement), il faut remplacer la ligne :

window.onscroll = progressiveScroll;

par

window.addEventListener('scroll', progressiveScroll);

Pascal

merci pmleconte Pascal pour "le beurre, l'argent du beurre et la fermière." Ca marche. Je suis loin des connaissances nécessaires pour régler ces effets de bords. Je progresse mais il y encore pas mal de marche à gravir.

Bonne journée et je clos ce sujet