Javascript-Kenner gesucht

[iChris]

Hi Hafu,

hab dir eine PN geschickt.

[Thorsten]

Zitat von Hafu

Ok, ich dachte mit meinem rudimentären Anwender-IT-Viertelwissen, dass man mit Java-Programmierbefehlen Java-Scripts schreibt.

Nein - und wer selbst keine Verbrechen gegen die Menschlichkeit begangen hat, sollte auch nicht mit JavaScript bestraft werden .

[Flow]

Zitat von Thorsten

Nein - und wer selbst keine Verbrechen gegen die Menschlichkeit begangen hat, sollte auch nicht mit JavaScript bestraft werden .

Schön, daß der Titel endlich geändert wurde ... jetzt atmet es sich wieder unbeschwerter beim Blick ins Forum ...

[zahnkranz]

Zitat von schnodo

Von der Hauptseite unter der Rubrik Videos führt der Button "SEE MORE" zu "https://www.annamariefunk.de/Videos.html"

Diese Seite existiert nicht (das ist ganz unabhängig von Browser oder Reload, weil eine Fehlermeldung vom Server kommt):

Genau das habe ich gemeint, von der Hauptseite der Link zu den Videos, Browser-unabhängig.

[binolino]

Hallo Hafu,

entwickle sowohl Java als auch JavaScript :-P ... aber hier ist wohl eher letzteres gefragt.

Das Script masonry.pkgd.min.js hat deine Tochter wohl von https://masonry.desandro.com

Aber sie hat wohl die Initialisierung noch mit oben reingeschrieben. Dabei hat sie die Initialisierung mit jQuery versucht:

// init Masonry
var $grid = $('.grid').masonry({// options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress(function() {
$grid.masonry('layout');
});

Das sollte sie aus mehreren Gründen entfernen:
1. wenn sie die Fremdbiblothek irgendwann aktualisieren will, kann sie nicht einfach die Datei tauschen "und gut is" sondern sie muss daran denken, dass sie hier etwas manipuliert hat. Üblicherweise macht man solche Initialisierungen in eine eigene JavaScript-Datei

2. Es wurden keine Options angegeben: Der Inhalt wo // options steht fehlt. Im Beispiel auf der o.g. Webseite steht:

$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 200
});

3. Ihre Seite nutzt kein jQuery also sollte sie auch nicht die Initialisierung via jQuery wählen. Das Problem an JavaScript... sobald 1 Fehler auftritt (den man nicht behandelt hat), wird kein weiterer JavaScript-Code ausgeführt. Hier wird jQuery ($) nicht gefunden.

4. Deshalb funktioniert auch die Initialisierung via HTML nicht, da der JavaScript-Code unterhalb des eingefügten Teils nicht mehr ausgeführt wird.

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 399, "fitWidth": true, "gutter": 30 }'>

Der schaut für mich auf den ersten Blick sauber aus. Zumindest steht es auf o.g. Anleitung der Webseite nicht anders aus.

Also selbst geschriebenen Code entfernen und happy sein :-)

Zitat von binolino

Hallo Hafu,

entwickle sowohl Java als auch JavaScript :-P ... aber hier ist wohl eher letzteres gefragt.

Das Script masonry.pkgd.min.js hat deine Tochter wohl von https://masonry.desandro.com

Aber sie hat wohl die Initialisierung noch mit oben reingeschrieben. Dabei hat sie die Initialisierung mit jQuery versucht:

...

Da muss ich meine Tochter in Schutz nehmen, den o.g. Codeschnipsel habe ich gestern abend noch selbst reingemurkst (Copy und paste-übernommen von der von dir genannten Website des masonry-Entwicklers) um den von ihm empfohlenen Workaround mit imagesload.pkgd.min.js zur Vermeidung der "overlapping irtems" zu implementieren.
Aber erstens wusste ich nicht, dass man da noch options implementieren muss und zweitens nicht, wo genau man den zusätzlichen Code einfügen muss.

Habe den falsch eingefügten Code jetzt erstmal wieder entfernt, aber irgendwie funktioniert masonry gerade nicht mehr. Evt. muss man das masonry-Skript nochmal neu in html initialisieren.

Aber da soll sich Anna-Marie heute darum kümmern (ich muss jetzt erstmal wieder in die Arbeit). Sie hat auch noch diverse andere Verbesserungs- und Korrekturhinweise bekommen. Vielen Dank vorab der ganzen Community für die Hilfe.

[iChris]

Zitat von binolino

4. Deshalb funktioniert auch die Initialisierung via HTML nicht, da der JavaScript-Code unterhalb des eingefügten Teils nicht mehr ausgeführt wird.

Der schaut für mich auf den ersten Blick sauber aus. Zumindest steht es auf o.g. Anleitung der Webseite nicht anders aus.

Also selbst geschriebenen Code entfernen und happy sein :-)

Das kann man so leider nicht unterschreiben. Die Initialisierung der Lib via HTML führt wie mehrfach geschildert zum Problem, dass die Bilder erst korrekt dargestellt werden wenn alles mal im Cache liegt. Im FAQ der Lib wird auch explizit drauf hingewiesen, dass wenn man das Ganze mit Bildern nutzen will auch imagesLoaded verwenden soll und das dann auch richtig initialisert.

Zitat von Hafu

Aber erstens wusste ich nicht, dass man da noch options implementieren muss und zweitens nicht, wo genau man den zusätzlichen Code einfügen muss.

Wie schon von binolino beschrieben lässt man Libs eigentlich unangepasst. Theoretisch würde das trotzdem funktionieren wenn du eben jQuery und imagesLoaded zuvor eingebunden hast, da das initialize erst nach der Einbindung passiert. "Sauber" wäre es ein separates File als letztes hinzuzufügen.

Das Mansonry funktioniert jetzt nicht mehr, da das JS jetzt ein Syntax Error hat.
Du hast vergessen var $grid = $('.grid').imagesLoaded( function() { zu entfernen.


Füge einfach die fehlenden Libs hinzu:
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="Js/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="Js/Navbar.js"></script>

und packe das initialisieren entweder in ein neues File oder in das schon vorhande Navbar.js und gebe dem vielleicht einen generischeren Namen.

$(document).ready(function() {
var $grid = $('.grid').imagesLoaded(function() {
$grid.masonry({
itemSelector: '.grid-item',
columnWidth: 399,
gutter: 30,
fitWidth: true
});
});
});

https://jsfiddle.net/u0qrkvpt/

und das data-masonry aus dem MarkUp entfernen

Zitat von iChris

...
Wie schon von binolino beschrieben lässt man Libs eigentlich unangepasst. Theoretisch würde das trotzdem funktionieren wenn du eben jQuery und imagesLoaded zuvor eingebunden hast, da das initialize erst nach der Einbindung passiert. "Sauber" wäre es ein separates File als letztes hinzuzufügen.

Das Mansonry funktioniert jetzt nicht mehr, da das JS jetzt ein Syntax Error hat.
Du hast vergessen var $grid = $('.grid').imagesLoaded( function() { zu entfernen.

Danke für die Analyse. Hab den Code wieder entfernt und jetzt geht mansonry zumindest wieder wie zuvor (mit Reload).

Zitat von iChris

...
Füge einfach die fehlenden Libs hinzu:
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="Js/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="Js/Navbar.js"></script>

Wo genau füge ich diese Libs hinzu?

Zitat von iChris

...

und das data-masonry aus dem MarkUp entfernen

Das bedeutet was genau? Editieren der index.html?