Vollständige Version anzeigen : 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. (https://www.annamariefunk.de/ABirdsView.html)
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.
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.
sabine-g
11.05.2021, 11:31
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.
sabine-g
11.05.2021, 11:35
Bug?
auf der Startseite legt sich die Grafik (Hi ....) beim zweiten Aufruf (?) über den Text
(Chrome, Windows 10)
m.
bei Safari auch
Gut erkennbar z.B. bei diesem Link. (https://www.annamariefunk.de/ABirdsView.html)
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.
zahnkranz
11.05.2021, 11:45
Bei mir führt der Link zu den Videos ins Leere. Und ja, das Javascript-Problem sehe ich auch.
...
Du brauchst übrigens explizit einen JavaScript-Kenner. Java und JavaScript sind zwei deutlich unterschiedliche Paar Stiefel. :)
Ok, ich dachte mit meinem rudimentären Anwender-IT-Viertelwissen, dass man mit Java-Programmierbefehlen Java-Scripts schreibt.
Bei mir führt der Link zu den Videos ins Leere. Und ja, das Javascript-Problem sehe ich auch.
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.
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 Frontpage aus oder von einer Unterseite.
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):
Not Found
The requested URL was not found on this server.
Apache/2.4.38 (Debian) Server at www.annamariefunk.de Port 443
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:
Broken links, ordered by link:
https://fonts.gstatic.com/
link text:
error code: 404 (not found), linked from page(s):
https://www.annamariefunk.de/Conveer.html
https://www.annamariefunk.de/NuernbergMobil.html
https://www.annamariefunk.de/Videos.html
link text: <h3 class="videos"> <p>Videos</p> </h3>
error code: 404 (not found), linked from page(s):
https://www.annamariefunk.de/
https://www.annamariefunk.de/index.html
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?
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/00000000000000003b9b201c/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc38 3831fe2ea177f62257a9191&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.
Thorsten
11.05.2021, 20:09
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 ;).
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 ... :)
zahnkranz
11.05.2021, 23:05
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
11.05.2021, 23:35
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 :-)
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" (https://masonry.desandro.com/layout.html) 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:
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. ;)
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 ;)
...
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).:Blumen:
...
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?
...
und das data-masonry aus dem MarkUp entfernen ;)
Das bedeutet was genau? Editieren der index.html?
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="{ "itemSelector....
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.
Die Libs habe ich jetzt eingebunden (war aufgrund deines JS-Fiddle-Links gut nachvollziehbar.:Blumen: )
Das entfernen des initialise via HTML siehst du in Zeile 15
jetzt steht da <div class="grid">
vorher
<div class="grid" data-masonry="{ "itemSelector....
Die entsprechende Passage (<div class="grid" data-masonry="{ "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: )
(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)
vBulletin v3.6.1, Copyright ©2000-2025, Jelsoft Enterprises Ltd.