Programmation du localisateur de lecture (CSS et JavaScript)

Partager c'est aimer!

L’indicateur de position de lecture est un Balken auf deiner Website der anzeigt, wie viel der Besucher bereits von deinem Inhalt gelesen hat – and so einfach kannst du ihn selber programmes.Les publicités

Lese Fortschritt Anzeige, Barre de progression de lecture, position de défilement ou indicateur de défilement : Die mysteriöse Leiste hat viele Namen. Ein einfaches Feature, welches deinem Besucher einen Überblick darüber gibt, wie viel er bereits von deinem Beitrag gelesen hat.

Besonders für Blogs est un indicateur de position de lecture d’un autre Sache. Natürlich funktioniert er auch komplett responsive, aussi auch für alle Mobilgeräte. Hier kannst du ihn mal ausprobieren.

L’indicateur de position de lecture est auch ganz einfach dans WordPress eingebunden. Wie das geht erfährst du im letzten Schritt.Les publicités

1. HTML-Struktur entwerfen

Zuerst benötigen wir die eigentliche Leiste. Dazu legen wir einen Container an, den wir später auf vol Breite setzen und einen Container innerhalb, der immer so lang ist, wie der aktuelle Fortschritt sein soll.

<div id="read-progress" class="progress">
  <div class="progress-bar"></div>
</div>

2. Style d’indicateur de position de lecture (CSS)

Wenn Du Bootstrap in deine Seite eingebunden hast, kannst Du eine fertige Progressbar benutzen und kannst diesen Schritt überspringen. Den Link dazu findest Du hier.

Psssst ! Kennst du schon diese CSS Tipps & Tricks?Les publicités

Das grundlegende Styling ist mit diesen wenigen Zeilen erledigt. Hierbei ist der Balken immer am oberen Ende deiner Website.

Nutzererfahrung verbessern und gleichzeitig Geld verdienen?

.progress {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 7px;
  background-color: #d3d3d3;
}
.progress > .progress-bar {
  height: 7px;
  width: 0px;
  background-color: #3d50a7;
}

Wenn du die Leiste lieber am unteren Rand haben möchtest kannst du diesen CSS code verwenden.

.progress {
  width: 100%;
  position: fixed;
  top: calc(100vh - 7px);
  left: 0;
  height: 7px;
  background-color: #d3d3d3;
}
.progress > .progress-bar {
  height: 7px;
  width: 0px;
  background-color: #3d50a7;
}

Tous les paramètres (Dicke, Farbe,…) kannst du natürlich nach deinen Wünschen anpassen.

3. Fonctionnalités de base (JavaScript)

Nun kommt der spannendste und wichtigste Teil des Features. Dazu binden wir zuerst jQuery vor dem schließenden <body>-Tag ein und anschließend den Code für die Leiste.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Danach kannst du schon diesen Code in deine JavaScript-Datei einfügen oder per <script>-Tag nach der jQuery Einbindung.

$(function() {
  $(window).scroll(function() {

    let offset = $(window).scrollTop();
    let windowHeight = $(window).height();
    let height = $(document).height();
    let progress = (offset / (height - windowHeight)) * 100;

    $("#read-progress .progress-bar").css("width", progress + "%");
  });
});

Der Code berechnet bei jedem Scroll-Event and der Höhe und der Scrollposition den aktuellen Progress in Prozent und setzt den farbigen Balken in die ntsprechende Breite.

Viele vermeintlich komplex Sachen lassen sich recht einfach selberprogramseren. Willst du zB wissen, wie man einen eigenen WYSIWYG Editor programseren kann?

Les publicités

Lire la barre de progression dans WordPress einbinden

Wenn du WordPress verwendest kannst du diesen Code natürlich auch verwenden. Dazu packst du den Code einfach an folgende Stellen :

HTML footer.php ou header.php
CSS style.css
liaison jQuery footer.php (pour schließenden <body>-Étiqueter)
Javascript Beliebige .js-Datei ou nach jQuery Einbindung

Wenn du noch Fragen zur Einbindung oder Funktionalität hast, schreib gern einen Kommentar.

Laisser un commentaire

13 − deux =