Contao-Camp 2024
Ergebnis 1 bis 6 von 6

Thema: Smooth Scroll und Sprachen URL

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

    Standard Smooth Scroll und Sprachen URL

    Nutzt jemand von euch das Smooth Scroll Script von cferdinandi ?
    Ich habe damit ein spezielles Problem und zwar gibt es in den Optionen die Möglichkeit
    PHP-Code:
    updateURLtrue// Update the URL on scroll 
    Ich habe eine Installation mit mehreren Sprachen und das Sparchkürzel in der URL also sieht eine URL z.B. so bei mir aus
    HTML-Code:
    http://example.com/en/
    Wenn ich jetzt einen Ankerlink einrichte dann soll nach Klicken desselbigen mit der o.g. Script Option, so etwas herauskommen
    HTML-Code:
    http://example.com/en/#anker
    Das klappt aber nicht denn das Sprachkürzel wird nach dem Klick auf den Ankerlink "rausgeschmissen" und die URL sieht dann so aus
    HTML-Code:
    http://example.com/#anker
    das führt bei Klick auf einen weiteren Ankerlink dazu dass die Seite neu geladen wird weil der Anker ja wieder auf
    HTML-Code:
    http://example.com/en/#anker
    verweist.

    Ohne die Sprachkürzel Funktion geht es einwandfrei , leider ist die aber in meinem Fall erwünscht.
    Das man auch ein anderes Script nehmen kann ist klar, hatte ich auch, aber dieses hier bietet eben noch einige andere Möglichkeiten die ich gerade für Onepages ganz nützlich finde

    Kann ja sein, dass jemand dieses Script ebenfalls einsetzt und das Problem kennt und/oder lösen konnte.

    Grüße
    Bennie

  2. #2
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ich kenne dieses smooth-scroll nicht, aber schau dir bitte nochmal genau im Quelltext die HREFs in deinen Links an. Die dürften eigentlich nicht
    Code:
    http://example.com/en/#anker
    sondern z.B. so lauten
    Code:
    en/contact.html#anker
    http://example.com/en/, http://example.com/de/ wäre ja immer die Startseite (index.html)

    Zusätzlich müsstest du einen BASE-Tag im HEAD haben, der so aussieht
    HTML-Code:
    <base href="https://example.com/">
    Wenn dein BASE und deine HREFs so aussehen wie oben von mir beschrieben und es dann immer noch nicht funktioniert, würde ich an deiner Stelle im Ticketsystem danach fragen.

    Beachte auch: Normalerweise (wenn man kein BASE im HEAD hat) reicht ein
    HTML-Code:
    href="#anker"
    egal ob du gerade auf
    • example.com
    • example.com/en/
    • example.com/en/contact.html

    bist. Der Browser bleibt immer auf der gleichen Seite im gleichen Ordner. Hast du aber ein BASE, dann wird ein
    HTML-Code:
    href="#anker"
    immer auf BASE-HREF#anker verweisen z.B. https://example.com/#anker. Egal auf welcher Seite/Ordner du bist.

    BTW, mit dem Insterttag {{env::request}} kann man die aktuelle Seite/Ordner vor den Anker schreiben
    Code:
    {{env::request}}#anker
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

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

    Standard

    Ich kenne dieses smooth-scroll nicht, aber schau dir bitte nochmal genau im Quelltext die HREFs in deinen Links an. Die dürften eigentlich nicht
    http://example.com/en/#anker

    sondern z.B. so lauten
    Ja aber auf der Startseite sehen die so aus, und auf anderen Seiten wie von Dir beschrieben, also so
    PHP-Code:
    example.com/en/contact.html#anker 
    und ich habe u.a. auch
    PHP-Code:
    {{env::request}}#anker 
    genutzt aber das ändert ja nichts.

    Ich hatte das Problem neulich schon bei einer Onepage die ich mithilfe des Moduls Artikelliste (als Navigation) erstellt hatte, dort passierte genau dasselbe.

  4. #4
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hast du mal ohne das Smooth-Scroll probiert? Bei mir in der Demo geht das Anspringen auf der Startseite mit diesen Möglichkeiten:

    BASE: https://example.org/

    HREF:
    • #footer
    • en/#footer
    • https://example.org/#footer
    • https://example.org/en/#footer

    In allen Fällen steht in der Address-Bar im Firefox nachher https://example.org/en/#footer.

    Hast du sichergestellt, dass der Alias deiner ersten Seite "index" heißt?
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

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

    Standard

    Ja index ist vergeben - und all diese Möglichkeiten klappen bei mir auch ohne das Script.
    Ich habe mal mit diesem getestet:
    HTML-Code:
    <script>
    $(document).ready(function(){
      $('a[href*="#"]').on('click', function(event) {  
        if (this.hash !== "") { 
        
              event.preventDefault();
              
          var hash = this.hash;
          
          $('html, body').animate({
            scrollTop: $(hash).offset().top
          }, 800, function(){
    
            window.location.hash = hash;
          });
        } 
      });
    });
    </script>
    das klappt gut aber mit dem Offset bekomm ich das nicht entsprechend hin in Verbindung mit einer fixed Navigation.

    Mein Ziel ist eigentlich:
    Smooth Scroll mit Anker in der URL nach Klick , dann muss es zum entsprechenden Anker scrollen und auch noch eine Offset Funktion haben,
    da die Navigation beim nach unten scrollen bei >200px zu einer fixed Navigation wird - also muss ein entsprechendes Offset berechnet werden.

    Ich hatte das schon mit der jquery .offset() probiert, das führte aber dazu dass zwar zu richtigen Stelle gescrollt wird aber sobald der Anker dann an die URL gehängt wird
    zuckt es und rutscht doch wieder ohne das Offset nach oben.

  6. #6
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hier 2 Snippets aus meinem Fundus.

    Anchornav:
    PHP-Code:
    anchornav.find('a').on('click', function(ev) {
      
    ev.preventDefault();
      $(
    'html, body').animate({
        
    scrollTop: $($(this).prop('hash')).offset().top - $('header').outerHeight() - 30
      
    }, 400);
    }); 
    Das hier von j_accordion-extended.html5:
    PHP-Code:
    ...
    activate: function(eventui) {
      ...
      
    /** Scroll active accordion to top */
      
    if(ui.newHeader.length 0) {
        var
          
    previousTogglerHeight ui.newHeader.closest('.ce_accordion').prev('.ce_accordion').find('.toggler').outerHeight() || 0,
          
    previousAccordionMarginBottom parseInt(ui.newHeader.closest('.ce_accordion').prev('.ce_accordion').css('margin-bottom')) || 0
        
    ;

        if(
    previousTogglerHeight)
        {
          $(
    'html, body').animate({scrollTopui.newHeader.offset().top previousTogglerHeight previousAccordionMarginBottom 5}, 300);
        }
      }
      
    /** Scroll active accordion to top - END */
    }
    ... 
    Vielleicht kannst du dir da was abschauen. In der Konsole auch immer nach JS-Fehlern Ausschau halten.

    Das hier ist bestimmt falsch.
    PHP-Code:
    $(hash).offset().top
    console
    .log(hash); 
    Ich glaube in hash ist die Raute "#" nicht mit drin.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

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
  •