Ergebnis 1 bis 13 von 13

Thema: Accordion: 4 Feature für Contao 3 und 4 - scroll, open, track

  1. #1
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.673
    User beschenken
    Wunschliste

    HTML Accordion: 4 Feature für Contao 3 und 4 - scroll, open, track

    Update 11.10.2021
    Contao 4.4 angehoben auf 4.9.21.

    Hier mal ein Template für's jQuery Accordion mit diesen 4 Features.

    1. Tracking des Öffnens eines Accordions mit Matomo (Piwik). (deaktiviert)

    2. Scrolle das geöffnete Accordion nach oben. Der Abstand von oben kann noch justiert werden, wenn man z.B. einen fixierten Header hat. Die Höhe eines einzelnen geschlossenen Accordions ist schon mit dazugegeben, sodass nicht ganz nach oben gescrollt wird, sondern ein geschlossenes Accordion darüber noch angezeigt wird.
    Code:
    ...$('html, body').animate({scrollTop: ui.newHeader.offset().top - previousTogglerHeight - previousAccordionMarginBottom - 5}, 300);...
    Zusätzlich die Höhe eines Headers abziehen ginge in etwa so
    Code:
    ...
      var
        ...,
        headerHeight = $('#header').height() || 0
      ;
        ... previousAccordionMarginBottom - 5 - headerHeight}, 300);
        ...
    3. Öffnen eines Accordions wenn die Seite geladen wird. Wenn ein Accordion selber (SECTION) oder ein Child eine ID besitzt, welche dem Hash der URL entspricht, wird dieses Accordion geöffnet und nach oben gescrollt.
    Code:
    Example URL:
    https://example.org/foo.html#idWithinAccordion
    4. Suche nach Links auf der Seite, welche ein bestimmtes Accordion öffnen können. Funktioniert so wie bei Punkt 3.
    HTML-Code:
    <a href="foo.html#idWithinAccordion">Open accordion with ID "idWithinAccordion"</a>
    Die Feature sind einzelne Blöcke, welche ins originale Template an den entsprechenden Stellen eingefügt wurden (siehe Kommentare im Template).

    Contao 3.5
    HTML-Code:
    <!-- Contao 3.5.35 j_accordion.html5 -->
    <script src="<?= TL_ASSETS_URL ?>assets/jquery/ui/<?= $GLOBALS['TL_ASSETS']['JQUERY_UI'] ?>/jquery-ui.min.js"></script>
    <script>
      (function($) {
        $(document).ready(function() {
          $(document).accordion({
            // Put custom options here
            heightStyle: 'content',
            header: 'div.toggler',
            collapsible: true,
            create: function(event, ui) {
              ui.header.addClass('active');
              $('div.toggler').attr('tabindex', 0);
            },
            activate: function(event, ui) {
              ui.newHeader.addClass('active');
              ui.oldHeader.removeClass('active');
              $('div.toggler').attr('tabindex', 0);
    
    
              /** Matomo (Piwik) accordion tracking *
              //console.debug('trigger matomo with "%s"', ui.newHeader[0].innerText);
              if(ui.newHeader.length > 0) {
                _paq.push(['trackEvent', 'Akkordeon', ui.newHeader[0].innerText]);
              }
              /** Matomo (Piwik) accordion tracking - END */
    
    
              /** 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({scrollTop: ui.newHeader.offset().top - previousTogglerHeight - previousAccordionMarginBottom - 5}, 300);
                }
              }
              /** Scroll active accordion to top - END */  
            }
          });
    
    
          /**
           * On page load
           *
           * Scroll to an accordion and open it if URL hash matches an ID within an accordion
           */
          var targetToggler = $(document.location.hash).closest('.ce_accordion').find('.toggler');
    
          if(targetToggler.length) {
            $(document).accordion('option', 'active', $('.toggler').index(targetToggler));
          }
          /** On page load - END */
    
    
          /**
           * On link click
           *
           * Scroll to an accordion and open it if a link hash matches an ID within an accordion
           */
          $('a').each(function() {
            var hash = $(this).prop('hash');
    
            if(hash) {
              var targetToggler = $(hash).closest('.ce_accordion').find('.toggler');
    
              if(targetToggler.length) {
                $(this).click(function() {
                  $(document).accordion('option', 'active', $('.toggler').index(targetToggler));
                });
              }
            }
          });
          /** On link click - END */
        });
      })(jQuery);
    </script>
    ps Leider sind die Syntax-Highlighter hier im Forum sehr mies. Mit nem anständigen Highlighting ist das Template übersichtlicher. Deswegen hier nochmal ne einzelne Auflistung zur besseren Analyse.

    Originales Template:
    PHP-Code:
    <!-- Contao 3.5.35 j_accordion.html5 -->
    <script src="<?= TL_ASSETS_URL ?>assets/jquery/ui/<?= $GLOBALS['TL_ASSETS']['JQUERY_UI'?>/jquery-ui.min.js"></script>
    <script>
      (function($) {
        $(document).ready(function() {
          $(document).accordion({
            // Put custom options here
            heightStyle: 'content',
            header: 'div.toggler',
            collapsible: true,
            create: function(event, ui) {
              ui.header.addClass('active');
              $('div.toggler').attr('tabindex', 0);
            },
            activate: function(event, ui) {
              ui.newHeader.addClass('active');
              ui.oldHeader.removeClass('active');
              $('div.toggler').attr('tabindex', 0);
    Matomo (Piwik):
    PHP-Code:
              /** Matomo (Piwik) accordion tracking */
              //console.debug('trigger matomo with "%s"', ui.newHeader[0].innerText);
              
    if(ui.newHeader.length 0) {
                
    _paq.push(['trackEvent''Akkordeon'ui.newHeader[0].innerText]);
              }
              
    /** Matomo (Piwik) accordion tracking - END */ 
    Scroll:
    PHP-Code:
              /** 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 */ 
    Originales Template:
    PHP-Code:
            }
          }); 
    Page load:
    PHP-Code:
          /**
           * On page load
           *
           * Scroll to an accordion and open it if URL hash matches an ID within an accordion
           */
          
    var targetToggler = $(document.location.hash).closest('.ce_accordion').find('.toggler');

          if(
    targetToggler.length) {
            $(
    document).accordion('option''active', $('.toggler').index(targetToggler));
          }
          
    /** On page load - END */ 
    On link click:
    PHP-Code:
          /**
           * On link click
           *
           * Scroll to an accordion and open it if a link hash matches an ID within an accordion
           */
          
    $('a').each(function() {
            var 
    hash = $(this).prop('hash');

            if(
    hash) {
              var 
    targetToggler = $(hash).closest('.ce_accordion').find('.toggler');

              if(
    targetToggler.length) {
                $(
    this).click(function() {
                  $(
    document).accordion('option''active', $('.toggler').index(targetToggler));
                });
              }
            }
          });
          
    /** On link click - END */ 
    Originales Template:
    PHP-Code:
        });
      })(
    jQuery);
    </script> 
    Contao 4.9.21
    HTML-Code:
    <!-- Contao 4.9.21 j_accordion.html5 -->
    <script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
    <script>
      jQuery(function($) {
        $(document).accordion({
          // Put custom options here
          heightStyle: 'content',
          header: '.toggler',
          collapsible: true,
          create: function(event, ui) {
            ui.header.addClass('active');
            $('.toggler').attr('tabindex', 0);
          },
          activate: function(event, ui) {
            ui.newHeader.addClass('active');
            ui.oldHeader.removeClass('active');
            $('.toggler').attr('tabindex', 0);
    
    
            /** Matomo (Piwik) accordion tracking *
            //console.debug('trigger matomo with "%s"', ui.newHeader[0].innerText);
            if(ui.newHeader.length > 0) {
              _paq.push(['trackEvent', 'Akkordeon', ui.newHeader[0].innerText]);
            }
            /** Matomo (Piwik) accordion tracking - END */
    
    
              /** 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({scrollTop: ui.newHeader.offset().top - previousTogglerHeight - previousAccordionMarginBottom - 5}, 300);
                }
              }
              /** Scroll active accordion to top - END */  
          }
        });
    
    
        /**
         * On page load
         *
         * Scroll to an accordion and open it if URL hash matches an ID within an accordion
         */
        var targetToggler = $(document.location.hash).closest('.ce_accordion').find('.toggler');
    
        if(targetToggler.length) {
          $(document).accordion('option', 'active', $('.toggler').index(targetToggler));
        }
        /** On page load - END */
    
    
        /**
         * On link click
         *
         * Scroll to an accordion and open it if a link hash matches an ID within an accordion
         */
        $('a').each(function() {
          var hash = $(this).prop('hash');
    
          if(hash) {
            var targetToggler = $(hash).closest('.ce_accordion').find('.toggler');
    
            if(targetToggler.length) {
              $(this).click(function() {
                $(document).accordion('option', 'active', $('.toggler').index(targetToggler));
              });
            }
          }
        });
        /** On link click - END */
      });
    </script>
    ps Wenn ihr alle 4 Blöcke in euer Template einfügt, könnt ihr die einzelnen Blöcke auch deaktivieren indem ihr jeweils im ersten Kommentar-Block den letzten Slash entfernt. Siehe z.B. erstes komplettes Template für Contao 3.5, dort ist Matomo deaktiviert.
    Geändert von Andreas (11.10.2021 um 14:54 Uhr) Grund: Example for fixed header
    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

  2. #2
    Contao-Fan Avatar von Doro
    Registriert seit
    21.06.2009.
    Ort
    Ammersbek
    Beiträge
    357

    Daumen hoch KLASSE

    Zitat Zitat von Andreas Beitrag anzeigen
    Hier mal ein Template für's jQuery Accordion mit diesen 4 Features.

    <!-- Contao 4.4.18 j_accordion.html5 -->
    wie cool ist das denn, tausend DANK! you made my day!!!

  3. #3
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.673
    User beschenken
    Wunschliste

    Standard

    My pleasure
    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

  4. #4
    Contao-Nutzer
    Registriert seit
    08.10.2018.
    Beiträge
    12

    HTML

    Hallo Andreas,

    vielen Dank für diese sehr nützliche Sammlung.

    Ich habe einen Anpassungsvorschlag, den ich selbst so nutze, evtl. auch nur als optionales Feature:

    Anstatt nur bei Togglern mit vorherigem Toggler zu scrollen...:
    Code:
    if(previousTogglerHeight) {
        $('html, body').animate({scrollTop: ui.newHeader.offset().top - previousTogglerHeight - previousAccordionMarginBottom - 5}, 300);
    }
    ...soll auch beim ersten Toggler dorthin gescrollt werden:
    Code:
    if(previousTogglerHeight) {
        $('html, body').animate({scrollTop: ui.newHeader.offset().top - previousTogglerHeight - previousAccordionMarginBottom - 5}, 300);
    } else {
        $('html, body').animate({scrollTop: ui.newHeader.offset().top - 5}, 300);
    }
    Ist nur ein Vorschlag, ist mMn erwartetes Verhalten vom Endnutzer.

    MfG
    Mathis

  5. #5
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.673
    User beschenken
    Wunschliste

    Standard

    Hallo Mathis,

    vielen Dank für den Vorschlag.

    Ich hatte dies am Anfang mit eingebaut, fand es aber für den Besucher eher störend. Der Besucher hat die besuchte Seite entweder noch nicht gescrollt, oder bereits gescrollt. Je nachdem wo er dann ein zugeklapptes Akkordeon sieht und er es öffnen will, könnte dies zu Irritationen führen, da man auch nicht erwartet, dass etwas scrollt.

    Sagen wir mal, der Besucher kommt auf die Seite und sieht oben zugeklappte Akkordeons und er will mal eben zum Öffnen auf das oberste klicken, dann könnte dies dazu führen, dass die Seite bereits scrollt und jenachdem was das für ne Seite ist, könnte dies dazu führen, dass z.B. das Menü aus dem Blick verschwindet.

    Aber du hast es für deine Bedürfnisse ja gut anpassen können

    Gruß Andreas
    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

  6. #6
    Contao-Fan Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    436

    Standard

    Hallo Andreas,

    wie bekommt man es hin, daß das Accordion beim zuklappen auch smooth zugeht und nicht so zuschnappt?
    Gelöst: ein animate: 500, hülft ungemein.

    ToM
    Geändert von Nightwing (30.08.2021 um 20:43 Uhr)

  7. #7
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.673
    User beschenken
    Wunschliste

    Standard

    Ist aber bereits animiert, auch wenn animate nicht gesetzt ist. Dann wird die hide() Methode benutzt mit default 400ms. Oder liegt es an deinem Gerät und/oder deinem Browser?

    ps Habe gerade auf Contao 4.9.21 upgedatet.
    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

  8. #8
    Contao-Nutzer
    Registriert seit
    10.08.2009.
    Beiträge
    48

    Standard

    Hallo,

    habe gerade den Code 4.9.21 in mein Template 4.9.24 reinkopiert, in der Hoffnung dass sich das zwischenzeitlich nichts geändert hat.
    Das File liegt in .../templates/custom/j_accordion.html5.

    In einem Testsystem habe ich ein Accordion erstellt.
    https://test.hscf.de/testseite.html

    Laut Anleitung sollte sich jeweils das entsprechende Accordion öffnen ...
    https://test.hscf.de/testseite.html#1 -> in diesem Falll das Zweite.

    Bei mir sehe ich keine Aktion oder Fehlermeldung. Es ist immer das erste offen. Hatte es auch mit der ID Nummer des betreffenden Accordion probiert.
    Muss ich, um dieses Feature zu nutzen, sonst nach was im System aktivieren?

  9. #9
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.673
    User beschenken
    Wunschliste

    Standard

    Moment, schaue ich mir mal an.

    Es funktioniert bei mir
    https://test.hscf.de/testseite.html#ui-id-3
    öffnet das 2. Element mit der ID ui-id-3.

    Ein Element #1 ist nicht vorhanden.

    Zitat Zitat von hpt Beitrag anzeigen
    Laut Anleitung sollte sich jeweils das entsprechende Accordion öffnen ...
    https://test.hscf.de/testseite.html#1 -> in diesem Falll das Zweite.
    In meiner Anleitung? Wo genau? Kannst du zitieren?
    Geändert von Andreas (05.01.2022 um 14:09 Uhr)
    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

  10. #10
    Contao-Nutzer
    Registriert seit
    10.08.2009.
    Beiträge
    48

    Standard

    Hallo Andreas,

    sehe leider erst jetzt, dass Du mir geantwortet hast ...

    Habe die ID in Deiner Codebeschreibung falsch verstanden ..
    Code:
    <a href="foo.html#idWithinAccordion">Open accordion with ID "idWithinAccordion"</a>
    Ich dachte die ID ist die Stelle (Zeile) im jeweiligen Accordion.
    Wie komme ich zu der richtigen ID "ui-id-3" aus meinem Beispiel?

    Im Echtsystem habe ich ein großes Accordion mit 11 verschiedenen Einträgen.

    https://www.hscf.de/kursangebot.html

    Viele Grüße
    Hanspeter

  11. #11
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.673
    User beschenken
    Wunschliste

    Standard

    Nein, gemeint ist die ID eines HTML-Elements
    HTML-Code:
    <p id="eindeutigeID">lorem</p>
    Ich verstehe deine Frage evtl. nicht richtig, aber du kannst den Akkordeon-Elementen IDs mitgeben, welche aussagekräftiger sind als die von Contao automatisch erstellten, z.B. sks, sss, src... anstatt ui-id-1, ui-id-2...

    Den Links in deinem Tabellen-Element musst du diesen Hash (#sks) dann manuell hinzufügen, wie du es ja auch richtig gemacht hast. Dies zu automatisieren wäre IMO zu aufwendig.
    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

  12. #12
    Contao-Nutzer
    Registriert seit
    10.08.2009.
    Beiträge
    48

    Standard

    Hallo Andreas,

    vielen Dank für Deine bisherigen Info's ...
    Ich musste erst mal verstehen verstehen, wie die richtigen Linkerweiterungen im Contao funktionieren ....

    Link_Seite_Akkordeon#ui-id-1 -> Link auf Toggler (Einstieg auf das Akkordeon Element 1, inkl. Haeder)
    Link_Seite_Akkordeon#ui-id-2 -> Link auf Acc (Direkteinstieg auf das Akkordeon 1)
    Link_Seite_Akkordeon#ui-id-3 -> Link auf Toggler (Einstieg auf das Akkordeon Element 2, inkl. Header)
    Link_Seite_Akkordeon#ui-id-4 -> Link auf Acc (Direkteinstieg auf das Akkordeon 2)
    Link_Seite_Akkordeon#ui-id-5 -> Link auf Toggler (Einstieg auf das Akkordeon Element 3, inkl. Haeder)
    Link_Seite_Akkordeon#ui-id-6 -> Link auf Acc (Direkteinstieg auf das Akkordeon 3)
    .....

    So habe ich es bisher gelöst ...
    Links der Kurse aus den Tabellen
    https://www.hscf.de/kurse.html

    Beispiel Sprung auf das zweite Akkodeon
    https://www.hscf.de/kursangebot.html#ui-id-3

    Funktioniert einwandfrei. Große Klasse!

    Nun meine Frage, wie kann ich im Backend am jeweiligen Akkordeon eine eindeutige ID als Sprungadresse definieren, wo und wie ?
    Der große Vorteil wäre bei einer Erweiterung des Akkordeons nicht alle Contao Sprungadressen zu aktualisieren uu müssen, falls ein neues Akkordeon innerhalb hinzukommt.
    Geändert von hpt (31.01.2022 um 17:08 Uhr)

  13. #13
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.673
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von hpt Beitrag anzeigen
    Link_Seite_Akkordeon#ui-id-1 -> Link auf Toggler (Einstieg auf das Akkordeon Element 1, inkl. Haeder)
    Link_Seite_Akkordeon#ui-id-2 -> Link auf Acc (Direkteinstieg auf das Akkordeon 1)
    Link_Seite_Akkordeon#ui-id-3 -> Link auf Toggler (Einstieg auf das Akkordeon Element 2, inkl. Header)
    Link_Seite_Akkordeon#ui-id-4 -> Link auf Acc (Direkteinstieg auf das Akkordeon 2)
    Link_Seite_Akkordeon#ui-id-5 -> Link auf Toggler (Einstieg auf das Akkordeon Element 3, inkl. Haeder)
    Link_Seite_Akkordeon#ui-id-6 -> Link auf Acc (Direkteinstieg auf das Akkordeon 3)
    Das habe ich wieder nicht verstanden, aber egal. Wo in einem Accordion sich die ID befindet ist egal, im SECTION, im header oder im Inhalt.

    Die ID kannst du direkt im Inhaltselement eintragen. Am besten einfach mal die Augen aufmachen, sorry
    Bildschirmfoto am 2022-01-31 um 21.01.38.png
    Geändert von Andreas (31.01.2022 um 21:30 Uhr)
    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
  •