[GELOEST] Freien Platz in 'aside' füllen

[FritzKrieger]

Hallo zusammen,

meine Website ist mittels Grid-Raster in 2 Spalten aufgeteilt: "Content" und "Aside".
Die Seitenleiste soll dynamisch mit Bildern gefüllt werden. Mittels Array (ca. 100 Bilder) und For-Schleife lade ich die Bilder in die Seitenleiste.
Dabei soll der Inhalt der Seitenleiste (also Anzahl der Bilder) so groß sein, dass diese mit dem Ende des MainContent abschließen (Siehe Mockup Desktop).

Herausforderung:
Dank responsivem Webdesign ist der Content-Bereich mal höher (Mobile) oder mal weniger hoch (Desktop).

Idee:
Content-Bereich und Seitenleiste sind immer gleich hoch, da Grid-Layout. Also lese ich anhand "scrollHeight" die komplette Höhe der Seite aus.
Die Bilder haben immer eine Höhe von 400px. Ergo muss man "nur" die ermittelnde Höhe durch 400px dividieren, rundet den Wert ab und das ist die Anzahl der Bilder.
Wird die Gesamthöhe (inkl. scrollender Bereich) verkleinert oder vergrößert, so die Berechnung neu erfolgen.

Problem:
Das Array und die For-Schleife funktionieren.
Allerdings wird mir beim Auslesen von "scrollHeight" immer ein falscher Wert angezeigt oder der Befehl funktioniert gar nicht.
Ich habe auch noch keine Idee, wie und wo ich die If-Bedingung hinsichtlich Bilder-Anzahl reinpacken muss, da ich erst kürzlich angefangen haben JS zu lernen.
Über eine Hilfestellung wäre ich dankbar, da ich schon 2 Tage vergeblich daran rummache.

Die Rohdatei muss ich leider anhängen da JSFIddle und CodePen wohl offensichtlich kein Grid-Layout kennen.
(Datei in .html ändern.)

Danke & Grüße,
Fritz

 

[basti1012]

Die Rohdatei muss ich leider anhängen da JSFIddle und CodePen wohl offensichtlich kein Grid-Layout kennen.

Doch das geht da auch

Problem:
Das Array und die For-Schleife funktionieren.
Allerdings wird mir beim Auslesen von "scrollHeight" immer ein falscher Wert angezeigt oder der Befehl funktioniert gar nicht.

Kein wunder
Dein Code

       var attr = document.getElementById("body");
        alert(attr.scrollHeight);

Du hast keine Id mit body. ( und deine Variable attr zu nennen ist auch nicht sehr Praktisch. ).
Wenn dann document.getElementsByTagName('body')[0];


Aber so geht es ja dann

https://basti1012.bplaced.net/index.php?ordner=html&id=707

 

[FritzKrieger]

Hi basti1012,

wie gesagt, ich hatte 2 Tage mit Trail-and-Error-Manier rumgetestet; konnte anschließlich nicht mal mehr klar denken.

Die Lösung ist genau das, was ich brauche!

Vielen Dank!!

Grüße,
Fritz

 

[FritzKrieger]

Hi basti1012,

ich habe mich mal an einem Multiarry versucht, sieht auf den ersten Blick auch gut aus:

https://codepen.io/FritzKrieger/pen/bGNbQjE

Allerdings beim Verkleinern des Browserfenster rutscht die Seitenleiste nach links und der Content verschwindet(!).
Ich hätte es verstanden, wenn die Logik mit der Bilderanzahl nicht mehr funktioniert hätte.
Vermutlich habe ich einen Denkfehler in der For-Schleife.

Grüße,
Fritz

 

[FritzKrieger]

Hallo Sempervivum,

irgendwo muss ein Fehler sein, ich bekomme nur ein leere Seite, allerdings habe ich ihn noch nicht gefunden...

Grüße
Fritz

 

[basti1012]

Ist der code aus deinen Codepen jetzt der aktuelle Code den DU benutzt?
Das sieht mir jetzt so aus wenn du da irgendwas versuchst zusammen zu kopieren.

Das document.write() für sowas nicht optimal ist wurde ja schon gesagt.
Versuche mal den Code aus post #5 bei dir anzuwenden und laß document.write weg

 

[FritzKrieger]

HEUREKA!

Im Code von Sempervivum musste die For-Schelife gepasst werden:
Von
for (var i = 0; i < arr.length; i++) {
auf
for (var i = 0; i < hei-1; i++) {

Hier nochmal der komplette funktionierende Code:

https://codepen.io/FritzKrieger/pen/oNgvmRp

Nochmals Danke an euch Beide!

Grüße,
Fritz

 

[basti1012]

Das ist doch schön das du den Fehler selber beheben konntest.

Da du ja vorhast eine Seite Bilder rein zumachen und es auch mal viele Bilder werden könnten, solltest du vieleicht auch überlegen das du nur die Bilder laden tust die im Sichtbaren Feld sind.

Nicht jeder will alles lesen und scrollt bis nach unten.
Die das aber wirklich wollen bekommen dann auch die Bilder zu sicht.
Die anderen die das nicht sehen wollen brauchen die Bilder dann auch nicht laden.

Das kommt aber jetzt darauf an was du genau vor hast.
Eine Seite mit 4-6 Bilder mit zb 1500kb wäre unnötig so ein Script einzubauen, da kann man alles laden.


Hast du aber eine Seite die zb 30 - 40 Bilder hat mit zb 40 mb , da wäre es sinnvoll nur das zu laden was auch gebraucht wird.