Ergebnis 1 bis 7 von 7

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.664
    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 15: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
    22.06.2009.
    Ort
    Ammersbek
    Beiträge
    350

    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.664
    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.664
    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 21:43 Uhr)

  7. #7
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.664
    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

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
  •