Javascript-Kenner gesucht
 

Meine Tochter hat in den vergangen zwei Wochen zur Online-Präsentation ihres Portfolio als Designstudentin eine Website erstellt.

www.annamariefunk.de

Ich hatte ihr zwar geraten das Ganze auf Basis eines CMS laufen zu lassen, also unter Nutzung von Joomla oder Wordpress, auch mit dem Hintergedanken, dass ich im Umgang mit Joomla halbwegs vernünftige Anwenderkenntnisse habe, ich ihr da bei möglichen Problemen eher helfen könnte und man da erfahrungsgemäß sehr viele Web-Funktionalitäten relativ einfach über Plugins ergänzen kann, aber meine Tochter hat sich entschlossen, die gesamt Website in HTML zu erstellen und nutzt lediglich einige Java-Scripts für Bilddarstellungsfunktionen.

Lokal auf der Festplatte funktioniert die Website einwandfrei, aber nach dem Upload auf einen Webserver funktioniert ein bestimmtes Javascript namens "masonry-vanilla.js" nicht beim ersten Aufruf sondern erst nach Betätigen des Reload-Buttons des Browser.
Gut erkennbar z.B. bei diesem Link.

Am Sonntag hatte ich mal kurz gegoogelt und festgestellt, dass das Problem durchaus auch bei anderen Usern auftritt, aber einen vernünftigen Workaround, der z.B. dazu führt, dass nach dem initialen Laden die Webseite sich automatisch nochmal neu lädt (ohne dass der User den Reload-Button betätigen muss), und sich die hinterlegten Fotos so anordnen wie vorgesehen, habe ich nicht gefunden und selbst kenne ich mich mit Java zuwenig aus, als dass ich das eher simple Skript passend verändern könnte.
Das derzeit genutzte masonry-vanilla-Skript habe ich mal in den Anhang hier hineingepackt.

Anhang 46239

Gibt bestimmt hier in der Community jemanden, der weiß, was ich in dem Skript verändern oder ergänzen muss, damit die bei Erstaufruf fehlerhaften Seiten von Anfang an sich so darstellen, wie nach Nutzung des Reload-Buttons.

Wenn irgendjemandem ansonsten Probleme auf der nicht allzu komplexen Website auffallen (z.B. tote Links, Rechtschreibfehler usw.) darf er diese selbstverständlich auch gerne melden.

was geht denn bei dem Link nicht?

Ich sehe 9 Fotos und drunter noch Zell am See

Bug?

auf der Startseite legt sich die Grafik (Hi ....) beim zweiten Aufruf (?) über den Text

(Chrome, Windows 10)

m.

bei Safari auch

screen shot

Ich wollte nur bestätigen, dass ich das Problem auch habe. Beim ersten Laden werden zwei Bilder angezeigt, nach dem Reload deutlich mehr, habe nicht nachgezählt. ;)
Aktueller Chrome-Browser unter Windows 10.

Du brauchst übrigens explizit einen JavaScript-Kenner. Java und JavaScript sind zwei deutlich unterschiedliche Paar Stiefel. :)

Bug2: Ipad Safari, iOS 14.5:
Photography, Foto nach Aufruf Next Project legt sich über den Text.
Screen Shot Ipad, unter Chrome, Win 10 auch so
+ macOS 11.3 und Firefox 88.0 auch so
+ Win 10 und Edge auch

m.

Kann sein, dass das Problem Browser-abhängig ist. Reproduzieren konnte ich es mit Google Chrome und Firefox.

Mit Internet Explorer funktioniert die Darstellung wohl von Anfang an.

Bei mir führt der Link zu den Videos ins Leere. Und ja, das Javascript-Problem sehe ich auch.

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

Von der Frontpage aus oder von einer Unterseite. Toter Link auch nach Reload?

Schreibst du noch mit welchem Browser du die Seite nutzt?:Blumen:

Bin jetzt auch kein JS-Experte, hier einige Ansätze:

Laut der kurzen Beschreibung auf der Homepage des Scripts kann man die Features wohl per JQuery, "Standard"-JavaScrip oder HTML aktivieren. So wie ich das sehe, wurden hier alle 3 Varianten hintereinander gepackt.

Der Fehler mit dem "$" klingt nach es werden JQuery-Sachen verwendet ohne dass JQuery auf der Seite eingebettet ist.

d.h. die JQuery-bibliothek dann noch auf den Webserver in ein passendes Unterverzeichnis ergänzend hochladen zur Problembeseitigung oder im masonry-Skript, den entsprechenden Abschnitt einfach löschen?

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):
Hier liegt ein Tippfehler vor. "Es sollte "https://www.annamariefunk.de/videos.html" heißen, mit kleinem "v". In der URL wird (grundsätzlich, results may vary) zwischen Groß- und Kleinschreibung unterschieden.

PS: Hier noch, was ein Checker (Xenu's Link Sleuth) ausspuckt. Da sollte sie mal danach schauen:

Geht beides, ich würde es zuerst mit löschen versuchen. Weniger Skript = weniger Komplexität = weniger kann schief gehen :)

Ich bin weder Designer noch Front-End Entwickler…aber vielleicht helfen ihr meine Anregungen:

Ist im masonry.pkgd.min.js JQuery enthalten? Ansonsten fehlt hier vielleicht das Laden von JQuery:

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

Die Version müsste passend zum masonry gewählt werden.

Die Seite insgesamt ermöglicht bisher keine Interaktion mit dem „Nutzer“ oder habe ich etwas übersehen? Wäre für mich ein Grund auf Js komplett zu verzichten.

Wird das Masonry nur für das Arrangieren von Bildern verwendet? Als Blogger macht man sich damit das Leben leichter als Designerin erreicht man sein Ziel eventuell nicht. Masonry versucht – soweit ich das gesehen habe – nur den Bildschirmplatz optimal zu nutzen, so dass das Gesamtbild besser aussieht. Als Designerin will man aber vermutlich, dass Highlights an ganz bestimmten stellen stehen und wahrgenommen werden. Auch wenn es verdammt viel Arbeit ist, vielleicht die Bilder so arrangieren, dass sie „inhaltlich“ perfekt sind und Highlights nicht übersehen werden.

Das Js für das Menü vielleicht auch gleich loswerden und über reines html/css lösen.

Im CSS werden relativ viele Bildschirmauflösungen berücksichtigt. Grundsätzlich ist das nicht schlecht. Allerdings wird es bei mehr als 2-3 Auflösungen zu einem unüberschaubarem Testaufwand. Aktuell gibt es zumindest ein paar Stellen mit weißer Schrift auf weißem Grund, überlappende Graphik mit unlesbarer Schrift, … Vielleicht drüber nachdenken max. 3 Auflösungen zu verwenden und wenn wirklich alles steht und funktioniert, drüber nachdenken, ob weitere Auflösungen notwendig sind. Keep It Simple Stupid :) Sehe ich mir fünfmal dieselbe Seite in unterschiedlichen Auflösungen an, sieht man meist offensichtliche Fehler nicht mehr.

Ein Font kann anscheinend nicht geladen werden: https://use.typekit.net/af/21f8d4/00...191&fvd=n7&v=3

Die Google Fonts zu einem Aufruf zusammenfügen, statt viermal Traffic zu erzeugen.

Verwendet sie eigentlich SCSS oder ähnliches? Das CSS wirkt sehr aufgebläht im Sinne, dass sich sehr viel wiederholt. Auf den ersten Blick scheint jede Seite ein eigenes CSS zu bekommen, was sich aber nicht immer unterscheidet. Evtl. ein globales CSS erstellen und für die einzelnen Seiten erweitern.

Der Laden der Seiten – wenn man den Cache ausstellt – dauert zum Teil sehr lange, was an der Anzahl der Bilder liegt. Hier vielleicht die Bilder während des Scrollens nachladen und nicht direkt alle Bilder laden. Sonst verlässt der „Kunde“ die Seite bevor sie geladen ist.

Hi Hafu,

hab dir eine PN geschickt.

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

:Lachen2:

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

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

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:

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:
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.

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 :-)

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.:Blumen:

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. ;)


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.

https://jsfiddle.net/u0qrkvpt/

und das data-masonry aus dem MarkUp entfernen ;)

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

Wo genau füge ich diese Libs hinzu?



Das bedeutet was genau? Editieren der index.html?

vielleicht hilft dir der JS Fiddle link den ich dir gepostet habe: https://jsfiddle.net/u0qrkvpt/

wenn du den link öffnest siehst du links oben den etwas abgespeckten HTML Code dort siehst du wie in Zeile 60-63 die libs eingebunden werden sollten.

Das entfernen des initialise via HTML siehst du in Zeile 15

jetzt steht da <div class="grid">
vorher
<div class="grid" data-masonry="{ &quot;itemSelector....

Die Libs habe ich jetzt eingebunden (war aufgrund deines JS-Fiddle-Links gut nachvollziehbar.:Blumen: )

Die entsprechende Passage (<div class="grid" data-masonry="{ &quot;itemSelector...) finde ich leider nicht. Muss aber vielleicht auch erwähnen, dass ich über meinen Büro-PC im Moment nur per WebFTP auf den Webspace zugreifen kann und dementsprechend nur einen einfachen Editor (ähnlich notepad) zum Zugriff auf einzelne Dateien nutzen kann.

(Eigentlich sollte das auch meine Tochter erledigen, die ja schließlich was dabei lernen soll:Maso: )

Das Delegieren hat sie schon mal ganz gut drauf. :Lachen2:

Ich werde jetzt zwar nicht direkt off-topic, verfehle aber dennoch knapp das Thema. Sorry dafür! :Blumen:

Grundsätzlich würde ich mir gerne mal anhören, warum der Mensch, der JavaScript konzipiert hat, es für besser hielt, sich grenzwertige Konstrukte wie den "strict equality operator" (===) und — fast noch geiler — den "strict inequality operator" (!==) einfallen zu lassen als eine strengere Typisierung zu erzwingen.

"Anyone…? Anyone…? Bueller…? Bueller…?" :)

Oder hat das vorher schon jemand verbrochen? Spontan würde mir angesichts der Hemdsärmligkeit BASIC einfallen, aber dort schlägt das Pendel in die andere Richtung aus und die Symbole für Zuweisung und Vergleich sind identisch und kontextabhängig, was an sich auch eine Katastrophe ist.

Eigentlich mag ich C, aber das ist diesbezüglich leider auch ein ziemlicher Misthaufen, bei dem man darauf hoffen muss, dass man von einem ordentlichen Compiler gerettet wird. Schade, dass Pascal so unsexy ist. :Lachen2:

Ich verstehe zwar fast kein Wort, von dem was Schnodo gerade geschrieben hat (O.k., C und Pascal sind alternative Programmiersprachen, das weiß ich immerhin ohne Googeln), aber möchte mich trotzdem im Namen meiner Tochter nochmal für die prompte Community-Hilfe im Zusammenhang mit ihrem Webseiten-Projekt bedanken.:Blumen:

Mit den Anleitungen hier aus dem Thread und den zusätzlichen Tipps per PN hat Anna-Marie gestern das Masonry-Script endlich vernünftig zum Laufen bekommen und auch die anderen Darstellungsfehler, die euch aufgefallen sind, sollten nun (zumindest für die realistisch verbreiteteten Bildschirmauflösungen) behoben sein.

(Alleine die erkennbar gute Laune, die meine vom monatelangen Fernstudium bisweilen massiv genervte Tochter gestern abend und heute morgen zur Abwechslung mal aufgelegt hatte, war es wert, diesen Hilfe-Thread zu erstellen)