Wenn du die Seiten dieser Website nach unten scrollst, hast du vielleicht bemerkt, dass sich ein schmaler farbiger Balken am oberen Rand der Seite bewegt. Dieser Balken wird manchmal als Lesefortschrittsbalken bezeichnet, und es gibt eine Reihe von Erweiterungen, die du verwenden kannst, um diesen Effekt zu erzielen.
Dies ist eine Übersetzung des Artikels «How to create a reading bar in your Joomla website» von Michael Russel aus dem Joomla! Community Magazine 10/22 (Link zum Original)
Die Inspiration zu diesem kleinen Helferlein kam mir, nachdem ich dazu eine Frage im Joomla-Forum gelesen hatte. Keine Sorge, es gibt nichts, was du herunterladen oder installieren musst, es ist im Grunde genommen sehr einfach.
Erstelle ein 'Eigenes Modul'
Es gibt viele Möglichkeiten, diese Funktion in deine J-Website einzubauen, aber ich habe es mit einem 'Eigenen Modul'. Die Technik umfasst drei Zeilen HTML, sechzehn Zeilen CSS und sieben Zeilen Javascript, die sich alle in diesem Modul befinden. Du weisst, wie man Joomla dazu bringt, code in einem Beitrag / Modul beim Speichern nicht zu löschen? Gut! Der Quellcode, den du im Modul plazieren musst folgt hier:
<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.onscroll = progressiveScroll;
function progressive Scroll() {
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>
Und nun viel Spass!
Das war's auch schon. Tim Davis hat übrigens das Ganze in einem Video auf YouTube ausprobiert und getestet.
Wenn hier von «ich» die Rede ist, ist selbstverständlich der Autor des Originals des Artikels gemeint.
Über den Autor dieses Artikels
Michael Russell ist ein Website-Hobbyist, der sich auf Joomla spezialisiert hat. Seine Karriere in der IT Industrie erstreckt sich über mehr als 40 Jahre, während denen er fast ausschliesslich in verschiedenen australischen Ministerien und Behörden gearbeitet hat. In den letzten 15 Jahren hat er sich sehr für die Entwicklung von Intranet-Sites interessiert, und das hat sich natürlich in den Internet-Bereich entwickelt. Seine Erfahrung umfasste die meisten Tätigkeiten im IT-Bereich: Systemanalyse und -design, Programmierung, Testen, Projektmanagement, Kundenbeziehungsmanagement, Wissensmanagement.
Im Januar 2007 schied er aus dem Berufsleben aus, und wenn er schon dachte, dass er zu seiner Zeit viel zu tun hatte, dann hat er jetzt mehr zu tun als je zuvor - vor allem ist er damit beschäftigt, das Leben zu geniessen!
Wenn er nicht gerade über das Weltgeschehen oder die australische Politik nachdenkt oder sich vergewissert, dass er nicht weit vom Kaffee entfernt ist, ist Michael damit beschäftigt, Menschen dabei zu helfen, den besten Gebrauch von Joomla zu machen.