Contao-Camp 2024
Ergebnis 1 bis 14 von 14

Thema: jQuery Scroll statt MooTools smoothScroll

  1. #1
    Contao-Nutzer Avatar von Eva
    Registriert seit
    03.07.2013.
    Beiträge
    149

    Standard jQuery Scroll statt MooTools smoothScroll

    Liebe Community

    Da ich nicht gerne MooTools und jQuery mische, habe ich die Scroll-Funktion neu in jQuery abgespeichert:

    HTML-Code:
    <script type="text/javascript">
    
    var $ = jQuery.noConflict();
    $('a[href^=#]').on('click', function(e){
        var href = $(this).attr('href');
        $('html, body').animate({
            scrollTop:$(href).offset().top
        },2000);
        e.preventDefault();
    });
    
    </script>
    Funktioniert bei mir ... aber nur ohne aktiviertem Mootools nun auch mit aktiviertem Mootools.
    Evt hat jemand anderes auch Interesse daran........
    Liebe Grüsse
    Eva
    Geändert von Eva (19.10.2014 um 20:55 Uhr)

  2. #2
    Contao-Fan
    Registriert seit
    21.08.2012.
    Beiträge
    280
    User beschenken
    Wunschliste

    Standard

    Moinsen,


    super Sache.
    Eventuell könntest du das $ noch durch jQuery ersetzen, dann sollte es auch mit aktiviertem MooTools funken.
    Grüße vom Gyer

  3. #3
    Contao-Nutzer Avatar von Eva
    Registriert seit
    03.07.2013.
    Beiträge
    149

    Standard

    Hallo MacGyer

    Danke für Deinen Input, hat leider nicht funktioniert. Ich habe aber dank Deinem Tipp im Internet die Lösung gefunden:

    HTML-Code:
    var $ = jQuery.noConflict();
    Ich habe den Code oben geändert und es funktioniert.
    Liebe Grüsse Eva
    Geändert von Eva (19.10.2014 um 20:58 Uhr)

  4. #4
    Contao-Fan Avatar von joe
    Registriert seit
    20.06.2009.
    Ort
    Lüneburg
    Beiträge
    687
    User beschenken
    Wunschliste

    Standard

    Du kannst auch einfach eine Immediately Invoked Function Expression (IIFE) verwenden. Dieses Muster kann ich persönlich generell bei jedem Javascript Code empfehlen da es die Nutzung globaler Variablen einschränkt.

    Nachfolgend ein Beispiel mit deinem Code.

    HTML-Code:
    <script type="text/javascript">
    
    !(function($) {
    
    "use strict";
    
    $('a[href^=#]').on('click', function(e){
        var href = $(this).attr('href');
        $('html, body').animate({
            scrollTop:$(href).offset().top
        },2000);
        e.preventDefault();
    });
    
    })(jQuery)
    
    
    </script>
    Geändert von joe (20.10.2014 um 15:21 Uhr)
    Trainings und Coachings zur Fort und Weiterbildung sowie Beratung in den Bereichen Contao, JavaScript, jQuery, VueJS, React, PHP, NodeJS und vielen weiteren Themen.

    Mehr unter jgreg.dev

    Follow me on Twitter @JoeRayGregory

  5. #5
    Contao-Urgestein Avatar von Tim G
    Registriert seit
    13.02.2010.
    Ort
    Lübeck
    Beiträge
    2.210
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von Eva Beitrag anzeigen
    Liebe Community

    Da ich nicht gerne MooTools und jQuery mische, habe ich die Scroll-Funktion neu in jQuery abgespeichert:

    HTML-Code:
    <script type="text/javascript">
    
    jQuery('a[href^=#]').on('click', function(e){
        var href = jQuery(this).attr('href');
        jQuery('html, body').animate({
            scrollTop:jQuery(href).offset().top
        },2000);
        e.preventDefault();
    });
    
    </script>
    Funktioniert bei mir ... aber nur ohne aktiviertem Mootools nun auch mit aktiviertem Mootools.
    Evt hat jemand anderes auch Interesse daran........
    Liebe Grüsse
    Eva
    So war es gemeint mit dem Austauschen von $ auf namespace jQuery
    http://www.tim-gatzky.de ˙ auch schon wieder 2 Jahre alt - wie die Zeit vergeht... muss mal umbauen.

  6. #6
    Contao-Nutzer Avatar von Schmidty
    Registriert seit
    06.06.2011.
    Ort
    Pforzheim
    Beiträge
    203

    Frage Höhe der Kopfzeile einberechnen?

    Hallo,

    ich habe das oben genannte Skript im Templates-Ordner mit dem Namen j_smoothScroll.html5 j_smoothScroll.zip abgelegt und im Seitenlayout eingebunden. Das Skript funktioniert auch, scrollt aber immer bis nach oben, ein Teil der Seite verschwindet unter dem Header.

    Im Moo_Tools-Script wird ja hier beschrieben, wie man die Höhe der Kopfzeile mit einberechnet.

    Was muss bei oben genannten jQuery Script eingefügt werden, damit die Höhe der Kopfzeile mit berücksichtigt wird?

    Ich beherrsche kein Javascript bzw. jQuery, deshalb benötige ich eine fertige Anleitung.

    Danke für Eure Hilfe.

    Schmidty

  7. #7
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.879
    Partner-ID
    10107

    Standard

    Link zur Seite?

  8. #8
    Contao-Nutzer Avatar von Schmidty
    Registriert seit
    06.06.2011.
    Ort
    Pforzheim
    Beiträge
    203

    Beitrag

    Hallo Spooky,
    die Seite ist eine reine Testseite und nicht online verfügbar. Ein bestimmtes Projekt ist (noch) nicht geplant. Ich mache gerade meine ersten Versuche mit OnePageWebsite. Die Testseite läuft Lokal unter xampp. Mit Moo-Tools läuft die Seite wie sie soll, mich interessiert jetzt die jQuery-Anpassung. Der Header ist 300 Pixel hoch.

    Gruß Schmidty

  9. #9
    Contao-Fan Avatar von Gassi
    Registriert seit
    18.11.2009.
    Ort
    Konstanz
    Beiträge
    423

    Standard

    Hey Schmidty,
    probier mal hinter dem offset().top einen minuswert einzufügen. z.B so wie hier unten
    HTML-Code:
    <script type="text/javascript">
    
    jQuery('a[href^=#]').on('click', function(e){
        var href = jQuery(this).attr('href');
        jQuery('html, body').animate({
            scrollTop:jQuery(href).offset().top -300
        },2000);
        e.preventDefault();
    });
    
    </script>
    Gruss Gassi

  10. #10
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    Bei mir läuft dieses Script seltsamerweise überhaupt nicht.
    Ich hatte mit der mootools-Variante kein Problem, wollte aber alles auf jquery umstellen.
    Das j_smoothscroll template ist eingebunden, jquery angehakt, aber es tut sich leider gar nichts. Muss man dazu noch zusätzlich ein bestimmtes Template der OPW Erweiterung aktivieren?

  11. #11
    Contao-Fan Avatar von joe
    Registriert seit
    20.06.2009.
    Ort
    Lüneburg
    Beiträge
    687
    User beschenken
    Wunschliste

    Standard

    Was sagt denn die Devolopertoolbar deines Browsers?
    Trainings und Coachings zur Fort und Weiterbildung sowie Beratung in den Bereichen Contao, JavaScript, jQuery, VueJS, React, PHP, NodeJS und vielen weiteren Themen.

    Mehr unter jgreg.dev

    Follow me on Twitter @JoeRayGregory

  12. #12
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.879
    Partner-ID
    10107

    Standard

    Zitat Zitat von Bennie Beitrag anzeigen
    Bei mir läuft dieses Script seltsamerweise überhaupt nicht.
    Ich hatte mit der mootools-Variante kein Problem, wollte aber alles auf jquery umstellen.
    Das j_smoothscroll template ist eingebunden, jquery angehakt, aber es tut sich leider gar nichts. Muss man dazu noch zusätzlich ein bestimmtes Template der OPW Erweiterung aktivieren?
    Link zur Seite?

  13. #13
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    Ist leider alles noch lokal. Der hier gepostete Code läuft aber bei euch und benötigt kein weiteres jQuery Plugin, oder?

  14. #14
    Contao-Nutzer Avatar von Schmidty
    Registriert seit
    06.06.2011.
    Ort
    Pforzheim
    Beiträge
    203

    Daumen hoch Läuft problemlos

    Hallo,

    zunächst einmal Entschuldigung für die späte Rückmeldung. Es ging einfach nicht früher...

    Das Script funktioniert bei mir mit der Anpassung so wie von mir gewünscht.

    Danke für die Hilfe.

    Viele Grüße Schmidty

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •