[Frage] Einfacher back-to-top-Button mit jQuery funktioniert nicht TYPO3-Version: 7.6.14

  • Schwerus Schwerus
    R2-D2
    0 x
    107 Beiträge
    0 Hilfreiche Beiträge
    11. 01. 2018, 21:27

    Hallo zusammen!

    Ich bekomme es im Moment mit T3 nicht hin, einen simplen back-to-top-Button mit jQuery zu realisiern, der verschwindet, wenn man nach unten scrollt.

    jQuery ist eingebunden und läuft.
    Es zieht das Button-Script auch an, denn im FireBug gibt es Fehler, falls man welche im Script provoziert.
    Und es muss mit page.includeJSFooter.file5 = fileadmin/tmplcss/ButtonUp.js ans Ende geschoben werden, sonst wird es zu früh angezogen.

    Es scheint aber keine Verknüpfung zwischen der Klasse im Script und der CSS Class zu geben:
    Der Button erscheint zwar <a href="#" class="back-to-top">Nach oben</a>, doch er wird weder zu Anfang versteckt noch später ausgeblendet.

    Und zwar unabhängig von den Snippets, die ich bislang ausprobiert habe.

    Ausgangspunkt war das hier, leicht modifiziert. Es funxt auch problemlos, wenn man eine popelige HTML-Datei anlegt und das CSS dazu einbindet - nur halt nicht in TYPO3.

    [code]$(function() {

    // Der Button wird ausgeblendet
    $(".back-to-top").hide();

    // Funktion für das Scroll-Verhalten
    $(function () {
    $(window).scroll(function () {
    if ($(this).scrollTop() > 100) { // Wenn 100 Pixel gescrolled wurde
    $('.back-to-top').fadeIn();
    } else {
    $('.back-to-top').fadeOut();
    }
    });

    $('.back-to-top').click(function () { // Klick auf den Button
    $('body,html').animate({
    scrollTop: 0
    }, 800);
    return false;
    });
    });

    });[/code]

    Bin für jeden Hinweis dankbar...

    Thx in advance

    Schwerus

    Projekt mit der größten Brüller-Dichte: http://www.thedailyschwerus.com - natürlich inkl. eigener Templates für Smartphones

    - Der Vollständigkeit halber: "Certified TYPO3 Integrator"


  • 0 x
    97 Beiträge
    3 Hilfreiche Beiträge
    12. 01. 2018, 11:44

    Ich benutze kein jQuery, sollte aber denke ich egal sein, ob jQuery oder nicht.
    Meine .js files lade ich in page.includeJS , funktioniert einwandfrei.
    Sie greifen in das Layout ein, setzen verschiedene Klassen, bzw. entziehen diese.
    Allerdings habe ich sie in eine EventListener "load" gepackt, sodass ihre Auswirkungen erst nach dem laden der Seite ausgeführt werden. (Ob das sinnvoll ist, oder nicht, weiß ich nicht. Mir egal :D )
    Pack deine function doch mal testweise in einen EventListener load.

  • Schwerus Schwerus
    R2-D2
    0 x
    107 Beiträge
    0 Hilfreiche Beiträge
    12. 01. 2018, 12:37

    Joh danke schon mal!

    Aber das Anziehen von jQuery ist nicht das Prob, weil schon gelöst. Die .js muss (in meinem Falle) in den Footer, weil die Bibliothek sonst noch nicht geladen wurde. Läuft auch.

    Ein kleines Snippet (aus tutorials.de), um dies zu testen. Einfach als .js anziehen - es stellt sich umgehend raus, ob jQuery schon, noch nicht (oder gar nicht =D) geladen wurde.

    [code]if(typeof jQuery == "function")
    alert("jQuery geladen");
    else
    alert("jQuery nicht geladen");[/code]

    Projekt mit der größten Brüller-Dichte: http://www.thedailyschwerus.com - natürlich inkl. eigener Templates für Smartphones

    - Der Vollständigkeit halber: "Certified TYPO3 Integrator"

  • 0 x
    97 Beiträge
    3 Hilfreiche Beiträge
    15. 01. 2018, 08:36

    Ich meinte nicht, das du jQuery rausschmeißen sollst, dass ist deine Problem, ähm Entscheidung, wenn du das nutzt :D

    Ich meine nur du sollst deine Funktion mal in window.addEventListener ('load', function () { CODE }); packen (Natürlich in jQuery, keine Ahnung wie es da aussehen muss :D.
    Ich mag jQuery nicht, finde es zu unübersichtlich.
    Also das $(".back-to-top").hide(); erst ausgeführt wird, wenn die Seite wirklich schon geladen ist.

  • Teisinger Teisinger
    Jedi-Ratsmitglied
    0 x
    502 Beiträge
    37 Hilfreiche Beiträge
    15. 01. 2018, 16:06

    was ist jQuery zu unübersichtlich=? Muharhar...

    jQuery:

    (function($) {
    //DEIN CODE bei document ready
    $(window).on("load", function() {
    //DEIN CODE bei document full load
    });
    $(window).on("resize", function() {
    //DEIN CODE bei resize
    });
    }(jQuery);

    https://github.com/groundstack-org

  • Schwerus Schwerus
    R2-D2
    0 x
    107 Beiträge
    0 Hilfreiche Beiträge
    15. 01. 2018, 18:37

    lustig find ichs eigentlich nicht... nunja...

    Also, um auf die Anregung von Power-Poler eine belastbare Anwort zu geben:
    Checken, ob das DOM geladen ist, ist die Grundlage und erste Funktion der meisten jQuery-Codes, und das geht, wie Teisinger anzudeuten versuchte, mit

    $(document).ready(function() {
    ##CODE HIER, wird erst audgeführt, wenn Seite ganz geladen ist

    oder kürzer ($(document).ready(function() wird z.B. vom Firebug angemeckert) einfach mit
    $(function() {
    ##CODE HIER, wird erst audgeführt, wenn Seite ganz geladen ist

    wie der geneigte Leser jetzt annehmen darf und wird, habe ich das auch so umgesetzt - und es geht trotzdem nicht... wie gesagt, zum Lachen ist's net....

    Projekt mit der größten Brüller-Dichte: http://www.thedailyschwerus.com - natürlich inkl. eigener Templates für Smartphones

    - Der Vollständigkeit halber: "Certified TYPO3 Integrator"

  • Teisinger Teisinger
    Jedi-Ratsmitglied
    0 x
    502 Beiträge
    37 Hilfreiche Beiträge
    15. 01. 2018, 20:09

    zum einen die erste variante ist depricated und funktioniert mit jQuery >= 3 nicht mehr.
    Zum anderen:
    hast du schon einmal geguckt ob die events überhaupt ausgelöst werden? console.log / alert?

    https://github.com/groundstack-org

  • Schwerus Schwerus
    R2-D2
    0 x
    107 Beiträge
    0 Hilfreiche Beiträge
    15. 01. 2018, 21:04

    Vielen Dank für die prompte Antwort, und

    genau DAS ist das Problem:

    Ich habe das Script jetzt auf das Minimum eingedampft. Es wird auch angesprochen... wenn ich

    ASDF $(function) reinschreibe, gibt es einen Error im FireBug


    Sobald aber ein "funktionierendes" Script läuft, passiert ABSOLUT NICHTS - weder

    $(function() {
    alert("passiertwas");
    });

    NOCH

    $(function() {
    console.log( "passiertwas" );
    });

    liefert weder ein Popup noch einen Eintrag in der Console...

    Dazu testweise das Ganze auf dem Desktop nachgebildet - hier funxt sowohl die ursprüngliche Version als auch die rudimentären Tests...

    Ich weiß echt nicht mehr weiter...

    Projekt mit der größten Brüller-Dichte: http://www.thedailyschwerus.com - natürlich inkl. eigener Templates für Smartphones

    - Der Vollständigkeit halber: "Certified TYPO3 Integrator"

  • 0 x
    97 Beiträge
    3 Hilfreiche Beiträge
    16. 01. 2018, 14:07

    Ah Ok, wusste ich nicht, dass $(function() dies bereits alles von sich aus macht.
    Klingt aber dann danach, als ob das Event nicht feuert.

  • Teisinger Teisinger
    Jedi-Ratsmitglied
    0 x
    502 Beiträge
    37 Hilfreiche Beiträge
    16. 01. 2018, 15:49

    wie kein fehler im firebug? auch im chrome nix?

    kann passieren wenn 2 jquery versionen gleichzeitig geladen werden.
    du kannst ja mal:

    console.log("test1");
    (function($) {
    console.log("jquery rennt");
    $(window).on("load", function() {
    console.log("event load funkt");
    });
    })(jQuery);

    test1 muss auf jedenfall ausgegeben werden, sonst wird entweder die datei nicht eingebunden oder davor ist schon ein js fehler!

    https://github.com/groundstack-org