Offtopic Projekte
Kommentare Zurück zur Übersicht

Div Bildlaufleiste auf Band

Im diesem Offtopic wird gezeigt, wie eine horizontale Bildlaufleiste aussehen könnte.
Die Codebeispiele diskutieren nur das Grundgerüst. Selbstverständlich gibt es unzählige andere Wege nach Rom!
Der Code kann im Machmal von css4.at eingeschaut werden!

Das Beispiel zeigt eine (formatierte und fiktive) 30-Tage-Wettervorausschau.
Ohne Gewähr auf den Inhalt. Das Wetter wurde durch einen Zufallsgenerator erzeugt!
Mit einem Mausclick auf die Pfeile Links und Rechts navigiert man durch das Band.

Zurück
Heute
Tag 1
2024-06-25
Tag 2
2024-06-26
Tag 3
2024-06-27
Tag 4
2024-06-28
Tag 5
2024-06-29
Tag 6
2024-06-30
Tag 7
2024-07-01
Tag 8
2024-07-02
Tag 9
2024-07-03
Tag 10
2024-07-04
Tag 11
2024-07-05
Tag 12
2024-07-06
Tag 13
2024-07-07
Tag 14
2024-07-08
Tag 15
2024-07-09
Tag 16
2024-07-10
Tag 17
2024-07-11
Tag 18
2024-07-12
Tag 19
2024-07-13
Tag 20
2024-07-14
Tag 21
2024-07-15
Tag 22
2024-07-16
Tag 23
2024-07-17
Tag 24
2024-07-18
Tag 25
2024-07-19
Tag 26
2024-07-20
Tag 27
2024-07-21
Tag 28
2024-07-22
Tag 29
2024-07-23
Tag 30
Weiter

Der Quellcode des Grundgerüst

HTML

Zuerst benötigen wir einen DIV-Container mit jenen DIV-Elementen, die den Inhalt darstellen.
Das Parent-DIV benötigt das id="Hauptdiv" Attribut.
Die Child-DIVs benötigen die class="InnenDiv" Attribute.
Es sind theoretisch unendlich viele Child-DIVs erlaubt, weil diese dynamisch später mit JavaScript durchnummeriert werden!
<div id="HauptDiv">
  <div class="InnenDiv">1</div>
  <div class="InnenDiv">2</div>
  <div class="InnenDiv">3</div>
  <div class="InnenDiv">4</div>
  <div class="InnenDiv">5</div>
  <div class="InnenDiv">6</div>
  <div class="InnenDiv">7</div>
  <div class="InnenDiv">8</div>
  <div class="InnenDiv">9</div>
  <div class="InnenDiv">...</div>
</div>
Wie die Naviagtion plaziert wird ist eine Design-Frage. Um es einfach zu halten, wurden zwei button Elemente verwendet.
Man kann natürlich beinahe jedes HTML-Element für die Navigation verwenden (z. B. img).
Wichtig ist nur das für Zurück und Weiter folgende Attribute verwendet werden:
onclick="zurueck();" id="ButtonZurueck"
und
onclick="weiter();" id="ButtonWeiter"
<div id="Navigation">
  <button onclick="zurueck();" id="ButtonZurueck">Zurück</button>
  <button onclick="weiter();" id="ButtonWeiter">Weiter</button>
</div>

CSS

#HauptDiv
.InnenDiv
<style>
  #HauptDiv {
    width: 100%;
    border: blue 1px solid;
    overflow: hidden;
    display: -webkit-inline-box;
  }
  .InnenDiv {
    display: inline-block;
    border: red 1px solid;
    transition: width 2s;
    overflow: hidden;
    float: left;
    box-sizing: border-box;
  }
</style>

JavaScript

Das Script sollte am Ende vom DOM stehen (z. B. zwischen Ende body und html). Die Variablen müssen global sein!
Über _divHoch und _divBreit wird die Pixelgröße der Child-DIVs definiert.
Die Größe des Hauptdiv wird angepasst.
Über die tatsächliche Breite des Hauptdiv und der Breite der Child-DIVs lässt sich errechnen wie oft die Wiederholung des Ausblende-Vorgang ist.
Die For-Schleife nummieriert die Child-DIVs durch, in dem sie jeden ein data-nr Attribut verleiht. Außerdem werden die vordefinierten Größen (Breite und Höhe) zugewiesen!
<script>
  var divHoch = 200;
  var divBreit = 400;
  document.getElementById("HauptDiv").style.height = divHoch + "px";
  var hauptDivBreit = document.getElementById("HauptDiv").scrollWidth;
  var wiederhole = parseInt(hauptDivBreit / divBreit);
  var nr = 0;
  var meineDivs = document.querySelectorAll(".InnenDiv");
  for (var i = 0; i < meineDivs.length; i++) {
    meineDivs[i].setAttribute("data-nr", i + 1);
    meineDivs[i].style.height = divHoch + "px";
    meineDivs[i].style.width = divBreit + "px";
  }
</script>
Es folgen die fleißigen Funktionen, die die Childs ausblendet, indem sie auf 0 Pixel breite gesetzt werden.
var dasDiv = '[data-nr="' + nr + '"]'; ist notwendig um über den querySelector die Child-DIVs der Reihe nach zu selektieren.
wiederhole und nr sind die globalen Variablen.
if(nr == meineDivs.length) {break;} sorgt dafür, dass sich die Schleife aufhöhrt zu drehen, wenn das Ende erreicht ist.
function weiter() {
  for (var x = 0; x < wiederholex++) {
    nr = nr + 1;
    var dasDiv = '[data-nr="' + nr + '"]';
    document.querySelector(dasDiv).style.width = "0px";
    checkNavi();
    if(nr == meineDivs.length) {break;}
  }
}
Die zurueck() Funktion tut das gleiche, wie die weiter() Funktion - nur halt eben in die andere Richtung.
if(nr == 0) {break;} sorgt dafür, das die Zählschleife aufhört, wenn sie den Anfang erreicht hat.
function zurueck() {
  for (var x = 0; x < wiederholex++) {
    if(nr == 0) {break;}
    var dasDiv = '[data-nr="' + nr + '"]';
    document.querySelector(dasDiv).style.width = divBreit + "px";
    nr = nr - 1;
    checkNavi();
  }
}
Die checkNavi() Funktion wird sowohl in der weiter() als auch zurueck() aufgerufen und blendet die Naviagtions-Elemente (Buttons) je nach Position ein oder aus.
function checkNavi() {
  if(nr == 0) {
    document.getElementById("ButtonZurueck").style.visibility = "hidden";
    document.getElementById("ButtonWeiter").style.visibility = "visible";
  }
  if(nr > 0 && nr < meineDivs.length) {
    document.getElementById("ButtonZurueck").style.visibility = "visible";
    document.getElementById("ButtonWeiter").style.visibility = "visible";
  }
  if(nr == meineDivs.length) {
    document.getElementById("ButtonWeiter").style.visibility = "hidden";
  }
}
24. Jun 2024 - 15:21
Hier könnte dein Kommentar stehen!

Thomas Maier css4.at Logo
Thomas Maier Impressum OER: CC BY NC SA 2023-10-30