Ergebnis 1 bis 22 von 22

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

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

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

    Update 16.08.2022
    Slashes '/' in Hashes '#' werden jetzt maskiert. Post#18
    Contao 3 Template entfernt.

    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 4.9 und 4.13
    HTML-Code:
    <!-- Contao 4.9 und 4.13 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.replace(/\//gi, '\\/')).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').replace(/\//gi, '\\/');
    
          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 Leider gibt es keinen passenden Syntax-Highlighter hier im Forum. Mit nem guten Highlighting ist das Template übersichtlicher. Deswegen hier nochmal ne einzelne Auflistung zur besseren Analyse.

    Originales Template:
    PHP-Code:
    <!-- Contao 4.9 und 4.13 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):
    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.replace(/\//gi, '\\/')).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').replace(/\//gi, '\\/');

          
    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:
      });
    </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. im kompletten Template, dort ist Matomo deaktiviert.
    Geändert von Andreas (16.08.2022 um 20:05 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

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

    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.679
    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.679
    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.679
    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.679
    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.679
    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.679
    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

  14. #14
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    775

    Standard

    Seit einem Update auf Contao 4.13.6 funktioniert der Teil mit dem Link hash nicht mehr, also dieses
    HTML-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 */
    In der Browserkonsole steht als Fehler:
    HTML-Code:
    Uncaught Error: Syntax error, unrecognized expression: #/basic/login

    Was ist zu tun??

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

    Standard

    Sorry für spät. Schaue ich mir an.

    Gerade getestet. Funktioniert bei mir.

    Bist du dir sicher, dass deine ID '/basic/login' heißt und eine gültige ID ist?

    edit: Slashes / in der ID scheinen valide zu sein.
    Geändert von Andreas (07.08.2022 um 17:37 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

  16. #16
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    775

    Standard

    Nein diese ID gibt es nicht, es geht darum, dass ich das Script eingebunden habe und auch dieser Teil immer dabei war, also nicht auskommentiert oder gelöscht.
    Bei Bedarf konnte ich dann dem Akkordeon eine ID geben und den Link dorthin entsprechend um den hash erweitern .

    Der Fehler ist unter 4.9 nie aufgetaucht und es hat funktioniert.

    Mir ist auch nicht klar wo dies #/basic/login herkommt

    Ah, sorry, ich sehe jetzt wo der Link herkommt, das ist ein externer Link auf der Website wo das auftrat und tatsächlich so endet - warum das allerdings ein Problem macht weiß ich nicht
    Geändert von Bennie (01.08.2022 um 14:01 Uhr)

  17. #17
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    775

    Standard

    Es liegt aber u.a. bei mir ein Missverständnis vor bzgl der Funktion.
    Ich dachte es würde auch funktionieren wenn der Link von einer anderen Seite kommt, aber das funktioniert nur wenn Link und Akkordeon auf einer Seite sind - ok das klappt bei mir auch.

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

    Standard

    Zitat Zitat von Bennie Beitrag anzeigen
    Ah, sorry, ich sehe jetzt wo der Link herkommt, das ist ein externer Link auf der Website wo das auftrat und tatsächlich so endet - warum das allerdings ein Problem macht weiß ich nicht
    Sorry, mir ist schon wieder was dazwischen gekommen.

    jQuery findet das Element mit so einer ID nicht mehr (oder noch nie?).
    PHP-Code:
    hash '/foo/bar';
    myElement = $(hash); // error 
    Wenn ich den Slash / escape, dann geht's. Habe ich oben noch nicht verändert.
    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

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

    Standard

    Zitat Zitat von Bennie Beitrag anzeigen
    Es liegt aber u.a. bei mir ein Missverständnis vor bzgl der Funktion.
    Ich dachte es würde auch funktionieren wenn der Link von einer anderen Seite kommt, aber das funktioniert nur wenn Link und Akkordeon auf einer Seite sind - ok das klappt bei mir auch.
    Wo der Link herkommt (referrer) ist egal. Wenn eine deiner Seiten aufgerufen wird und der Hash in der URL einer ID innerhalb deines Akkordeons enspricht, dann sollte es funktionieren.

    edit: Mit den Devtools (F12) kannst du im DOM nach einere ID suchen. Gebe "#meineID" ein und Enter.
    Geändert von Andreas (07.08.2022 um 17:41 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

  20. #20
    Contao-Nutzer Avatar von scater61
    Registriert seit
    29.03.2012.
    Ort
    94072 Bad Füssing
    Beiträge
    11

    Lachendes Gesicht Vielen Dank für Hilfe!

    Zitat Zitat von Andreas Beitrag anzeigen
    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.


    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.
    Auch der längste Weg fängt mit dem ersten Schritt an.

  21. #21
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    775

    Standard

    @Andreas
    Danke für Deine Hilfe
    es funktioniert jetzt alles, da war wohl noch ein Fehler im Script bzw. zu viel auskommentiert von mir

    Die Fehlermeldung bekomme ich aber nicht weg, solange der besagte Link auf der Seite ist. Kannst Du das bitte nochmal erklären?

    Was soll da gemacht werden ?

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

    Standard

    Ich habe es jetzt im Template eingefügt. Einmal bei 'On page load' und einmal bei 'On link click'. Mit replace(...) maskiert.
    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: 2 (Registrierte Benutzer: 0, Gäste: 2)

Lesezeichen

Lesezeichen

Berechtigungen

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