getElementById - für alle elemente

[Slind]

Tag Leute,

ich habe dieses Script eingebunden, mein Problem ist das es nur auf das Element angewendet wird. Wie muss ich das umschreiben das es auf alle Elemente mit der ID image_list geht?

<script>
  window.onload = function() {
    var wall = new Masonry( document.getElementById('image_list') );
  };
</script>

http://miedl.n-lind.de/

[Slind]

up..........

[do_while]

Hallo Slind,

nach den aktuellen HTML-Standards, darf eine ID immer nur einmal auf einer Seite stehen. Die ID muss damit eindeutig sein. Daher ist es kein Wunder, dass Javascript nach der ersten Fundstelle aufhört. Siehe auch Fehlermeldungen im HTML-Validator.
Wenn Du mehrere Elemente mit der gleichen Kennzeichnung versehen möchtest, kannst Du das mit CSS-Klassen machen, die dürfen mehrfach auf einer Seite verwendet werden. Nur der JavaScript-Befehl getElementById bringt Dich dann natürlich nicht an's Ziel.

[Slind]

wie war nochmal der für klassen?

mhh, die ids kommen aber direkt von contao, hab da keine angegeben, wie kann oder soll ich das überhaupt beheben?

[do_while]

Na direkt von Contao kommt der Slider nicht, es ist eine Erweiterung!

Man kann den Fehler beim Autor melden oder versuchen, über die Templates den HTML-Code zu korrigieren. Ich kenne diese Slider-Erweiterung nicht, daher kann ich leider keine gezielteren Tipps geben.

[webstar]

wie war nochmal der für klassen?

Google fragen: mootools javascript selektor für klassen

[Slind]

ich sprech doch nicht vom slider, vorallem geht es hier ja auch gar nicht um den.

Ich meine die Image List die direkt von Contao kommt und wo ich keine Änderungen vorgenommen habe

 Line 177, Column 20: Duplicate ID image_list.
<ul id="image_list">

[Juggalo4u]

Irgendwo mußt du doch die Zuweisung von zum Beispiel

<ul id="image_list" style="position: relative; height: 191px;" class="masonry">

gemacht haben. Ich nehme mal an das ce_gallery.html5 - Template bearbeitet.

[Slind]

das ist bei mir im backend nicht vorhanden, naja habe es jetzt hinzugefügt und geändert.

nur funktioniert das nicht:

<script>
  window.onload = function() {
    var wall = new Masonry( $(".image_list") );
  };
</script>

was mach ich da falsch?

[Elvador]

Hast du denn Mootools bzw. Jquery aktiviert? Denn von alleine kann JavaScript den Code eher nicht...

Auch interessant hierfür: http://heise.de/-1808306

[Slind]

jquery ist an

<script>
  window.onload = function() {
    var wall = new Masonry( document.getElementsByTagName("image_list") );
  };
</script>

das funktioniert auch nicht

[webster]

Die Frage ist ja: Was erwartet der Konstruktor von Masonry als Parameter?

Ein DOM-Element (getElementById)?
Ein Array aus DOM-Elementen (getElementsByClassName)?
Ein jQuery-Objekt ($('#image_list'))?
Oder gar ein Array aus jQuery-Objekten ($('.image_list'))?

Um was für ein Skript handelt es sich denn? Ist es das hier: http://masonry.desandro.com/index.html ?

[Slind]

Die Frage ist ja: Was erwartet der Konstruktor von Masonry als Parameter?

Ein DOM-Element (getElementById)?
Ein Array aus DOM-Elementen (getElementsByClassName)?
Ein jQuery-Objekt ($('#image_list'))?
Oder gar ein Array aus jQuery-Objekten ($('.image_list'))?

Um was für ein Skript handelt es sich denn? Ist es das hier: http://masonry.desandro.com/index.html ?

achso, die vanilla variante: http://vanilla-masonry.desandro.com/

[jk1]

So gehts:

<script>
$(function() {
       $( ".image_list" ).each(function() {
        var wall = new Masonry( $(this)[0] );
    });
});
</script>

Siehe: http://jsfiddle.net/2NPCt/

[Slind]

So gehts:

<script>
$(function() {
       $( ".image_list" ).each(function() {
        var wall = new Masonry( $(this)[0] );
    });
});
</script>

Siehe: http://jsfiddle.net/2NPCt/

funktioniert leider nicht, denn jetzt sind alle Bilder nur noch 24px hoch.

[webster]

Probiers mal ohne $ und Arraykey im Konstruktor:

<script>
$(function() {
       $( ".image_list" ).each(function() {
        var wall = new Masonry( this );
    });
});
</script>

[Slind]

es geht, allerdings sind die Bilder beim ersten aufrufen immer noch nur 24px hoch, wie kann ich das beheben?
http://miedl.n-lind.de/

[Slind]

bzw. wieso ist das so wenn man es über ne Klasse statt über ne ID anspricht?

[Dirch]

vermutlich betrachtest du dir die Seite mit einem Webkit-Browser. Im FF sind die Bilder "richtig" hoch. Die Problematik ist, daß Webkit-Browser beim Laden der Seite als Elementhöhen falsche Werte liefern. Das ist ein grundsätzliches Problem. Lösen kannst du es teilweise, wenn du das Script erst bei

$(window).load(function() { } 

triggern läßt. Zu diesem Zeitpunkt sind auch alle Bilder geladen und es wird die korrekte Größe geliefert. Bei

$(document).ready(function() { } 

ist nur der DOM aufgebaut und die Bilder noch nicht geladen. Warum Webkit-Browser sich weigern die im img-Tag hinterlegten Größen-Angaben zu nutzen weiß wohl niemand. Jedenfalls gäbe es keinen Grund es nicht zu tun... ;(

[Slind]

vermutlich betrachtest du dir die Seite mit einem Webkit-Browser. Im FF sind die Bilder "richtig" hoch. Die Problematik ist, daß Webkit-Browser beim Laden der Seite als Elementhöhen falsche Werte liefern. Das ist ein grundsätzliches Problem. Lösen kannst du es teilweise, wenn du das Script erst bei

$(window).load(function() { } 

triggern läßt. Zu diesem Zeitpunkt sind auch alle Bilder geladen und es wird die korrekte Größe geliefert. Bei

$(document).ready(function() { } 

ist nur der DOM aufgebaut und die Bilder noch nicht geladen. Warum Webkit-Browser sich weigern die im img-Tag hinterlegten Größen-Angaben zu nutzen weiß wohl niemand. Jedenfalls gäbe es keinen Grund es nicht zu tun... ;(

cool, vielen Dank

so wie es aussieht muss ich javascript/jquery noch mal lernen, könnt ihr mir da was bestimmtes empfehlen.