Objektmenge erkennen und dann ein <div> erstellen

gianfranco0104

Erfahrenes Mitglied
Hi. Ich habe da ein Problem, ich habe eine div (als Metro-Kacheldesign), welche ein Bild, den Namen dazu und das Datum, sagen wir mal als ein "Paket" darstellt. Die Information hole ich aus einem FSO, also Dateiname, erstelltes Datum und das Bild selbst, das Ganze arbeitet lokal, also nicht online.
Soweit klappt alles und ich habe Werte in
Javascript:
var FileDate
var FileName
var pictureElement

stehen. Nun ist es aber so, dass das ja mal nicht nur eine Datei ist, sondern ggf. auch weit aus mehr sein können.
Wie kann ich also dynamisch, z.B. in zwei Zeitig die Kachel-Divs aufbauen lassen?
Ich habe keinen Ansatz, muss aber auch sagen, in der Hinsicht zu wenig Erfahrungen.
Danke für die Hilfe...
 
Ich mir nicht sicher ob ich dich richtig verstanden habe. Hast du einen Div mit fester Größe, dessen Inhalt sich dynamisch ändern soll? Oder willst du dynamisch mehrere Div's erzeugen?
Das Erste lässt sich mit Javascript einfach bewerkstelligen, in dem du den Wert innerHTML des Divs änderst.
Siehe zum Beispiel hier
http://www.ezineasp.net/post/javascript-code-to-change-div-object-innerhtml.aspx
Das zweite ist etwas schwieriger geht aber auch. Du musst hier halt auch den Einfluss auf das Layout berücksichtigen.
http://stackoverflow.com/questions/6840326/how-can-i-create-and-style-a-div-using-javascript
 
HI @ikosaeder , ich meine eher das Zweite. Divs sind immer gleich, sollen aber erzeugt werden, sobald weitere Elemente erscheinen.. ich schaue mir mal den Link an.. Danke vorerst
 
Hi,

zum Erstellen neuer Elemente existiert die Methode createElement. Zum Stylen das style-Objekt und das className-Attribut.

Beispiel:
HTML:
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<style>
.metro-div{
    border-radius: 8px;
    border: 1px solid #ccc;
    margin: 10px;
    width: 110px;
    height: 110px;
    padding: 10px;
}
</style>
<script>
var files = [
        {'name': 'eins.txt', 'date': '01.02.03', 'size': 100},
        {'name': 'zwei.txt', 'date': '29.02.03', 'size': 300},
        {'name': 'drei.txt', 'date': '12.02.03', 'size': 200}
    ],
    insertDiv = function(wrapper, file){
        // neues Element erstellen
        var div = document.createElement('div'),
            content = "",
            _key;

        for(_key in file){
            if(file.hasOwnProperty(_key)){
                content += _key + ": " + file[_key] + "<br />";
            }
        }

        // dem neuen Element Inhalt zuweisen
        div.innerHTML = content;
        // CSS-Eigenschaften über das style-Objekt (z.b. inline-block)
        div.style.display = "inline-block";
        // CSS über Klasse zuweisen
        div.className += " metro-div";
        wrapper.appendChild(div);
    };

window.onload = function(){
    var wraper = document.getElementById('wrapper');

    // Über alle Files iterieren
    for(var i=0; i<files.length; i++){
        insertDiv(wrapper, files[i]);
    }
}
</script>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>
Ciao
Quaese
 
@Quaese . Das hat prima geklappt, danke!
Eine Frage noch; Wäre es eigentlich auch möglich das so aufzu bauen:

Wenn Bildschirm breit genug ist, dann sind sie momentan so angeordnet:
div1 div2 div3 || < Bildschirm oder DIVrand.
div4 div5

Besser wäre es aber, dass die nächste unten und die übernächste wieder oben, also in 2er Reihen angeordnet wären:
div1 div3 div5
div2 div4


Habe schon geschaut das Ganze über Masonry / jQuery zu probieren, leider ohne Erfolg. Hat jemand sowas schon mal gemacht? Hab auch schon im Google gesucht, ggf. die falsche Bezeichnung - finde einfach nichts.
 
Zuletzt bearbeitet:
@Quaese , ein dickes Danke für deine Arbeit. Wirklich sehr genial!
Frage noch -habe etwas ruprobiert, aber bekomme es nicht hin, gibt es eine Möglichkeit bei
// 2. Anzahl Zeilen
rows = Math.ceil(files.length / cols);
noch das so zu bauen, dass es nur 2 Zeilen gibt? der rest lagert sich dann rechts aus...
 
Zuletzt bearbeitet:
Hi,

da ist die Berechnung der Matrix insgesamt etwas anders, außerdem das CSS.

Unter dem gleichen Link wie oben findest du bei "Beispiel 2" eine mögliche Lösung.

Ciao
Quaese
 
Zurück