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.
Heute
Tag 1
2024-12-07
Tag 2
2024-12-08
Tag 3
2024-12-09
Tag 4
2024-12-10
Tag 5
2024-12-11
Tag 6
2024-12-12
Tag 7
2024-12-13
Tag 8
2024-12-14
Tag 9
2024-12-15
Tag 10
2024-12-16
Tag 11
2024-12-17
Tag 12
2024-12-18
Tag 13
2024-12-19
Tag 14
2024-12-20
Tag 15
2024-12-21
Tag 16
2024-12-22
Tag 17
2024-12-23
Tag 18
2024-12-24
Tag 19
2024-12-25
Tag 20
2024-12-26
Tag 21
2024-12-27
Tag 22
2024-12-28
Tag 23
2024-12-29
Tag 24
2024-12-30
Tag 25
2024-12-31
Tag 26
2025-01-01
Tag 27
2025-01-02
Tag 28
2025-01-03
Tag 29
2025-01-04
Tag 30
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
- Der
border ist nicht notwendig.
overflow: hidden; sorgt dafür, dass die Child-DIVs im rechten Nirvana verschwinden.-
display: -webkit-inline-box;
Da inline-box noch kein Standard ist, benötigt man das -webkit Präfix.
Die CSS-Anweisung ist im Grunde nicht notwendig. Sie erlaubt aber, dass das letzte sichtbare Child-DIV abgeschnitten angezeigt wird.
.InnenDiv
inline-block sorgt dafür, dass die Child-DIVs nebeneinander angezeigt werden (im Flow).border ist nicht notwendig.transition erlaubt den gschmeidigen Übergang.overflow schneidet im Child den Content zu.float damit die Childs nahtlos aneinander gereiht sind. (Whitspace)box-sizing weil man die Größe in Pixel genau bestimmen muss (siehe JavaScript-Code unten)
<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 < wiederhole; x++) {
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 < wiederhole; x++) {
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";
}
}
