jQuery möchte aus unerklärlichen Gründen nicht funktionieren

  • JavaScript

Es gibt 21 Antworten in diesem Thema. Der letzte Beitrag () ist von KoolDerGroße.

    jQuery möchte aus unerklärlichen Gründen nicht funktionieren

    Hallo,

    ich habe jetzt schon seit mehreren Tagen Probleme, jQuery auf einem lokalen Server (xampp) zum laufen zu bringen.
    Ich habe schon nach etlichen Lösungen gesucht, aber keine dieser wollte jemals funktionieren. Ich habe auch schon meinen Code überprüft, aber
    der war nicht das Problem, denn auch Beispiel-Code-Stücke wollten nicht funktionieren.

    Hier mal ne Liste mit dem, was ich schon ausprobiert habe:
    • in den <script>-Tag "type='text/javascript'" einbinden half nicht (also von dem, wo der Code drinne steckt, nicht bei jQuery selbst)
    • aus dem Online-Code ne js-file machen half auch nicht
    • neueste Version mit allem drum und dran brachte nichts
    • jegliche, unterschiedliche Formationen von Code brachten auch nix, egal ob mit oder ohne jQuery.noConflict();
    • nach einer Zeit recherchieren habe ich immernoch keine brauchbare Lösung
    • in der Konsole gab es keine Fehlermeldungen zu jQuery, lediglich welche zu ein paar Fonts, die nicht gefunden werden konnten, was aber kein Problem darstellt.
    Was aber sehr verdächtig aussah, war der Code in der jQuery-Datei. Dort war der Code ab einer Zeile komplett ausgegraut und es wurden (von Brackets) 95+ Probleme angezeigt.
    Keine Ahnung was mein Problem ist, aber jQuery scheint, egal wie ichs drehe und wende, nicht funktionieren zu wollen.

    (Bilder zu meinem Code, der jQuery-Datei und der Konsole sind im Anhang)

    P.S.: Ich arbeite mit Adobe Brackets. Mein JS-Code habe ich noch vor dem </body>-Tag platziert, so wurde es mir empfohlen.

    Danke für eure Hilfe, sollte welche kommen;D

    *Topic verschoben*
    Bilder
    • 234234.png

      31,39 kB, 567×469, 439 mal angesehen
    • 341234.png

      29,45 kB, 538×407, 205 mal angesehen
    • 5342534.png

      573 kB, 1.673×973, 240 mal angesehen

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Marcus Gräfe“ ()

    Hay, nutze bitte für Codeschnipsel die Code-Tags (BBCodes).

    Was für ne Resource findet der da denn nicht?
    LG
    Bitte benutze OPTION STRICT ON.
    Und optional OPTION EXPLICIT ON.
    Hier ein CODE-CONVERTER.

    Suchanfragen-Ansatz für GOOGLE.
    Prüfe deinen Beitrag in einer RECHTSCHREIBPRÜFUNG.

    Das Einzige was er nicht findet sind Fonts, wie schon oben erwähnt. Der Rest funktioniert, bis auf das jQuery-Script, was nur teils teils seinen Dienst erfüllt. Alles ist richtig verknüpft und der Code sollte ebenfalls stimmen.
    nutze bitte für Codeschnipsel die Code-Tags (BBCodes).
    Nächstes mal, ganz bestimmt. Das sollte so reichen und den ganzen jQuery-Code werde ich net nochmal einfügen, da er ja auf deren Homepage unter Downloads verlinkt ist. Mein Code stammt aus dem Internet von Personen, die JS können. Dort sollte kein Fehler sein

    KoolDerGroße schrieb:

    Mein Code stammt aus dem Internet von Personen, die JS können. Dort sollte kein Fehler sein

    Spielt keine Rolle... Siehst du wieviele Bugs Microsoft in Windows rein hämmert? Und das sind auch Leute die ihre Programmiersprache können.

    Gib uns etwas das wir bei uns genauso lokal testen können. Ich werde deinen JS-Code nicht erst abschreiben.
    Klar brauchst du JQuery nicht reinmachen. Aber Code der von dir ist bzw relevant ist das wir es testen können und reproduzieren wäre schön.
    Also mal Code in die CodeTags und schön würde ich hier ein wenig mehr machen können.

    Ansonsten kann ich jetzt nur Glaskugel raten machen.
    Grüße , xChRoNiKx

    Nützliche Links:
    Visual Studio Empfohlene Einstellungen | Try-Catch heißes Eisen

    KoolDerGroße schrieb:

    Was aber sehr verdächtig aussah, war der Code in der jQuery-Datei. Dort war der Code ab einer Zeile komplett ausgegraut und es wurden (von Brackets) 95+ Probleme angezeigt

    Das liegt übrigens daran, dass du da eine minified Version von jQuery hast, bei der fast der gesamte Code ohne Leerzeichen und Zeileumbrüche in so wenig Zeichen wie möglich komprimiert wird. Das überfordert in dem Fall einfach den Parser/Tokenizer von Brackets, sodass dieser ab Zeile X einfach aufhört den Code zu analysieren und deshalb nicht nur das Syntaxhighlighting ab der Zeile mehr funktioniert sondern auch der JS Interpreter den restlichen Code nicht mehr kennt (so ergeben sich dann NullPointer, Syntax-Fehler, etc. die dann für die 95+ Probleme sorgen).
    Du nutzt jQuery Slim, die ranzt. Nimm stattdessen code.jquery.com/jquery-3.3.1.min.js damit gibt's keine (mir bekannten) Fehler und du hast mehr Funktionen (siehe auch hier).

    Zu deinem Problem mit dem Laden der Font kann ich nix sagen weil ich nicht weiß wo die liegen und wo/wie die reingeladen werden. Das hat in dem Fall auch nix mit jQuery zu tun.
    Lade FontAwesome doch einfach über einen CDN anstatt lokal, mir scheint du hast dich hier mit den Pfaden verwurstet. Entweder FA4 (E-Mail hier reintippen und los) oder aber FA5 mit dem Code

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

    Damit sollten dann beide "Fehler" bei dir behoben sein.

    PS: grundsätzlich nutze ich auch immer die minified Version, lädt schneller und selbst dran rumnudeln muss man ja eh nicht. Wenn hier was schief läuft liegt es most likely nicht daran dass die Datei minified ist sondern nur dass deine IDE einen schrottigen Parser (wie @Vainamo auch sagte) benutzt. Ich würde trotzdem immer empfehlen die minified Version zu nehmen. Im Zweifelsfall hast du normalerweise einen Mechanismus zur Unterscheidung von dev- und production environment, entsprechend kannst du dann dynamisch entweder die minified (für production) oder die uncompressed Version laden.

    Link :thumbup:
    Hello World

    Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von „Link“ ()

    Die Font ist nicht das Problem, die liegt auch in einem Ordner, der von mir net genutzt wird. Dort liegt noch ne etwas ältere Website, die damit arbeitet, aber nicht mehr funktioniert. Die Fehler müssten ein Verlinkungsproblem sein, oder so ähnlich.

    Ich bedanke mich schonmal im voraus, ich probiere Mal eine Version ohne slim, vllt klappt das ja. Falls nicht schreibe ich nochma, ist ja klar

    (Edit: ich probiere ebenfalls auch Mal eine uncompressed Version, habe diese noch nicht vorher verwendet, falls ohne slim auch nix ist, hoffe ich darauf, dass die funktioniert)
    Sooooooo, die uncompressed und compressed Versionen von jQuery haben ebenfalls noch nicht das Problem gelöst. Mir gehen so langsam die Ideen aus und meine
    Hoffnung auf ein funktionierendes jQuery schwinden immer mehr.

    Hier ist der Code, den ich geschrieben/aus dem Internet gezogen habe (so teil teils):

    HTML-Quellcode

    1. <!-- Scripts -->
    2. <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    3. <script type="text/javascript">
    4. jQuery.noConflict();
    5. jQuery(document).ready(function(){
    6. jQuery(window).scroll(function() {
    7. if (jQuery(this).scrollTop() >= 50) {
    8. jQuery('#return-to-top').fadeIn(200);
    9. } else {
    10. jQuery('#return-to-top').fadeOut(200);
    11. }
    12. });
    13. jQuery('#return-to-top').click(function() {
    14. jQuery('body,html').animate({
    15. scrollTop : 0
    16. }, 500);
    17. });
    18. ////////////////////////////////////////
    19. var winheight= parseInt($('body, html').scrollTop());
    20. var value = 100;
    21. if (winheight > value) {
    22. jQuery('#launcher-download').css({'z-index':'2'});
    23. }
    24. });
    25. </script>


    Aber immerhin: bei der uncompressed Version sind keine Probleme. Das ist doch schonmal etwas;DD

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „KoolDerGroße“ ()

    KoolDerGroße schrieb:

    uncompressed und compressed Versionen von jQuery haben ebenfalls noch nicht das Problem gelöst


    KoolDerGroße schrieb:

    bei der uncompressed Version sind keine Probleme


    wat? Was ist denn das Problem?


    Link :thumbup:
    Hello World
    Mein Code von oben wird nicht korrekt ausgeführt. Ich dachte es liegt an der fehlerhaften jQuery-Datei, aber da wurde ich jz vom Gegenteil überzeugt. Die Variablen von jQuery funktionieren nicht so, wie sie eigentlich sollen. Zb gibt scrollTop(); nicht die Höhe an, die man schon gescrollt hat, animate(); animiert auch nicht den Scrollvorgang nach oben, welcher noch nicht mal eingeleitet wird und fade(); funktioniert ebenfalls nicht, so wie alle anderen jQuery-Funktionen. Ich bin momentan sehr ratlos, da ja so weit eigentlich alles eingebunden ist
    Zwei Dinge:
    1. Die jQuery-Datei war und ist nich fehlerhaft (da bin ich mir zu 99.9% sicher - solange du die nicht verändert hast) - Weil die keine fehlerhafte Version veröffentlichen würden. Der Fehler lag vmtl. in der Darstellung deiner IDE.
    2. Bitte binde mal exakte diese jQuery-Datei ein. Also aktuelles Script-Tag löschen und durch dieses ersetzen:

    Quellcode

    1. <script
    2. src="https://code.jquery.com/jquery-3.3.1.min.js"
    3. integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    4. crossorigin="anonymous"></script>


    Teste dann nochmal ob es dann funktioniert. ist dies dann immernoch nicht der Fall, dann Poste den Inhalt der Konsole nach triggern des "Zurück zum Anfang"-Buttons.
    Habe ich ja auch nicht behauptet, dass die Datei jetzt immer noch Fehler hat, im Gegenteil, sie wird ja korrekt erkannt. Nur der Rest stimmt noch immer nicht.

    Ich werde deinen Vorschlag Mal einbinden, Mal sehen was dort so kommt. Das mit der Konsole muss ich dann noch einstellen, dass er dort was ausgibt
    Also. Ich habe mir das jetzt mal am PC angeschaut.
    Du hast auch 1-2 Probleme in deinem Code.
    1. Dadurch dass du jQuery.noConflict(); aufrufst, kannst du kein $(..).. mehr verwenden.
    2. $("html, body") habe ich durch $(window) ersetzt. Sollte deine Seite anders zu scrollen sein, ersetze das durch 1 Element.
    3. Sind die letzten paar Zeilen dort richtig positioniert? Ist das das gewünschte Verhalten, dass dies nur 1x beim laden der Website ausgeführt wird, und nicht, wenn du scrollst??

    Dies ist ein soeben von mir getesteter Beispielcode, welcher wie gewünscht funktioniert:

    HTML-Quellcode

    1. <!Doctype html>
    2. <html>
    3. <head>
    4. <script
    5. src="https://code.jquery.com/jquery-3.3.1.min.js"
    6. integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    7. crossorigin="anonymous"></script>
    8. </head>
    9. <body>
    10. <div style="z-index:1;height:1000px;">
    11. ... LAAANGER TEXT ...<br/>... LAAANGER TEXT ...<br/>... LAAANGER TEXT ...<br/>... LAAANGER TEXT ...<br/>... LAAANGER TEXT ...<br/>... LAAANGER TEXT ...<br/>... LAAANGER TEXT ...<br/>
    12. </div>
    13. <div id="return-to-top" style="position:fixed;bottom:10px;right:10px;background-color:#FF0000;padding:20px;cursor:pointer;">TOP</div>
    14. <div id="launcher-download" style="z-index:-1;position:fixed;top:0px;width:100%;height:60px;background-color:#0000FF;">TEST</div>
    15. <script type="text/javascript">
    16. jQuery.noConflict();
    17. jQuery(document).ready(function(){
    18. jQuery(window).scroll(function() {
    19. if (jQuery(this).scrollTop() >= 50) {
    20. jQuery('#return-to-top').fadeIn(200);
    21. } else {
    22. jQuery('#return-to-top').fadeOut(200);
    23. }
    24. });
    25. jQuery('#return-to-top').click(function() {
    26. jQuery('body,html').animate({
    27. scrollTop : 0
    28. }, 500);
    29. });
    30. ////////////////////////////////////////
    31. var winheight= parseInt(jQuery(window).scrollTop());
    32. var value = 100;
    33. if (winheight > value) {
    34. jQuery('#launcher-download').css({'z-index':'2'});
    35. }
    36. });
    37. </script>
    38. </body>
    39. </html>
    Hallo, da bin ich wieder.

    Ich habe deinen Code mal ausprobiert, einmal in meiner Website und einmal außerhalb, in einer einzelnen HTML/PHP-Datei.
    Es hat sich ergeben, dass etwas innerhalb meiner Website nicht möchte, dass der Code ausgeführt wird.
    Ich werde mal ein paar Stellen abgehen, evtl werde ich ja fündig. Falls nicht schreibe ich nochmal und bitte euch
    um Hilfe. Sollte ich was finden, schreibe ich trotzdem auch nochmal

    Danke schonmal bis hierhin;D
    So, nach ein paar Tests kam auch schon das Ergebnis.
    Ich dachte mir schon, dass das Fehler verursachen wird: die Parallax-Hintergründe die ich nutze (bzw. den Effekt).
    Es gibt dort zwei Einstellungen, die anscheinend Javascript nicht gefallen.
    Hier ist der gesamte Effekt aus meinem Code (CSS):

    Quellcode

    1. /* Parallax-effect */
    2. .parallax {
    3. perspective: 300px;
    4. height: 100vh;
    5. overflow-x: hidden;
    6. overflow-y: auto;
    7. perspective-origin-x: 100%;
    8. -webkit-perspective-origin-x: 100%;
    9. -moz-perspective-origin-x: 100%;
    10. -o-perspective-origin-x: 100%;
    11. -ms-perspective-origin-x: 100%;
    12. color: black;
    13. }
    14. .parallax__layer {
    15. position: absolute;
    16. overflow-y: hidden;
    17. top: 0;
    18. right: 0;
    19. bottom: 0;
    20. left: 0;
    21. transform-origin-x: 100%;
    22. -webkit-transform-origin-x: 100%;
    23. -moz-transform-origin-x: 100%;
    24. -o-transform-origin-x: 100%;
    25. -ms-transform-origin-x: 100%;
    26. }
    27. .parallax__layer--base {
    28. z-index: 4;
    29. transform: translateZ(0);
    30. -webkit-transform: translateZ(0);
    31. -moz-transform: translateZ(0);
    32. -o-transform: translateZ(0);
    33. -ms-transform: translateZ(0);
    34. }
    35. .parallax__layer--back {
    36. z-index: 3;
    37. transform: translateZ(-280px) scale(2);
    38. -webkit-transform: translateZ(-280px) scale(2);
    39. -ms-transform: translateZ(-280px) scale(2);
    40. -o-transform: translateZ(-280px) scale(2);
    41. -moz-transform: translateZ(-280px) scale(2);
    42. }
    43. .parallax__layer--deep {
    44. z-index: 2;
    45. transform: translateZ(-600px) scale(3);
    46. -webkit-transform: translateZ(-600px) scale(3);
    47. -moz-transform: translateZ(-600px) scale(3);
    48. -o-transform: translateZ(-600px) scale(3);
    49. -ms-transform: translateZ(-600px) scale(3);
    50. }
    51. .parallax__group {
    52. position: relative;
    53. margin: 0;
    54. padding: 0;
    55. height: 100vh;
    56. transform-style: preserve-3d;
    57. -webkit-transform-style: preserve-3d;
    58. -moz-transform-style: preserve-3d;
    59. -o-transform-style: preserve-3d;
    60. -ms-transform-style: preserve-3d;
    61. }


    Ich suche eine Alternative entweder zu dem gesamten Effekt oder zu den Einstellungen "overflow-x" und "overflow-y".
    Es würde mich freuen, wenn ihr Alternativen dazu kennt.

    Ansonsten bedanke ich mich für eure Hilfe bei der Fehlersuche;D

    (Der Code entstammt nicht von mir, von sowas habe ich keine Ahnung)
    Ich hab dir die Website auf Mediafire hochgeladen, habe jz keinen free-hoster gefunden und ich wollte auch nicht unbedingt dass die online ist.
    Naja, hier ist der Download-link. Habe meine Texte alle ausgetauscht, weil ich das auch noch net unbedingt preisgeben möchte.
    http://www.mediafire.com/file/ft59252cr2hfh6v/htdocs.rar/file
    Guter Free-Host: https://bplaced.net
    Bitte benutze OPTION STRICT ON.
    Und optional OPTION EXPLICIT ON.
    Hier ein CODE-CONVERTER.

    Suchanfragen-Ansatz für GOOGLE.
    Prüfe deinen Beitrag in einer RECHTSCHREIBPRÜFUNG.