Contao-Camp 2024
Ergebnis 1 bis 32 von 32

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.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    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 21: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
    22.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.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    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.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    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.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    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
    65

    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.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    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 15: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
    65

    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.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    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
    65

    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 18:08 Uhr)

  13. #13
    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

    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 22: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
    828

    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.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    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 18: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
    828

    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 15:01 Uhr)

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

    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.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    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.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    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 18: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
    828

    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.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    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

  23. #23
    Contao-Fan Avatar von Hoch-3
    Registriert seit
    16.11.2010.
    Ort
    Zürich
    Beiträge
    373
    Partner-ID
    7136

    Standard

    Grandios! Danke.

    Jetzt hab ich aber ein seltsames Problem


    --- das Problem hat sich gelöst, als ich die Seiten neu aufgebaut hatte. ---

    Aber ich hab eine andere Frage.


    Wenn der Inhalt nun nicht mehr unterhalb des Togglers angezeigt wird, wie kann ich verhindern, dass der ganze Browserinhalt hoch- und runterfährt?

    Die Akkordion Inhalte sind in einer linken Spalte, die Links um die einzelnen Akkordions zu öffnen in der rechten Spalte.

    Das Ziel ist, dass eben der Seiteninhalt sich nicht nach oben oder unten verschiebt, wenn man ein neues Akkordion anklickt.

    Also: Klick auf Link ? Die Seite geht ganz nach oben und ? öffnet danach das neue Akkordion ? und falls dieses länger ist, schiebt es die Inhalte darunter nach unten, bzw. umgekehrt, die Inhalte darunter schiebt es nach oben, wenn das neue Akkordion kürzer ist. Also, das dritte, wie gehabt. :-)

    http://gyn-xtra.hoch3.ch/cannabismedizin.html
    Geändert von Hoch-3 (16.10.2022 um 11:20 Uhr)

  24. #24
    Contao-Nutzer
    Registriert seit
    12.05.2015.
    Beiträge
    61

    Standard

    Hallo zusammen, das funktioniert wunderbar.
    Ich habe nur ein Problem. Wenn das Akkordeon von einer anderen Seite aus geöffnet werden soll, scrollt es nicht nach unten. Gibt es vielleicht eine Möglichkeit, dass dies funktioniert?

  25. #25
    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

    Das sollte eigentlich automatisch funktionieren. Zeige mir bitte die Seite, ich sehe mir dann an, warum es nicht funktioniert.

    Der Code-Block On page load sollte das machen.
    Geändert von Andreas (24.11.2022 um 20:54 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

  26. #26
    Contao-Nutzer
    Registriert seit
    12.05.2015.
    Beiträge
    61

    Standard

    Vielen Dank für die rasche Antwort, Andreas.
    Hier die Seite.

    Aufgeklappt wird das 1. Akkordion, nur scrollt es nicht runter..
    Ich habe testeshalber alle anderen javascripte rausgenommen. An dem lag es nicht..
    Ich habe Contao 4.13.12 installiert.

  27. #27
    Contao-Nutzer
    Registriert seit
    27.09.2016.
    Ort
    NRW
    Beiträge
    79

    Standard

    Ich habe das in meiner 5.2.7 Version auf meinem Test-Server eingebunden, bei dem Kunden funktioniert das unter 5.2.10 jedoch nicht wirklich.
    Da ich keine Fehlermeldung im Browser bekomme, bin ich leider auch etwas Ratlos, wie ich dem Problem auf den Grund gehen kann.

    HTML-Code:
    https://fbz-bochum.de/publikationen#TEST oder #2023
    sind die jeweiligen IDs.

    Hat jemand einen Vorschlag?

  28. #28
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Du solltest auf die letzte 5.3.* hochheben.
    Wird denn dein angepasstes Skript korrekt geladen? bzw. verwendest du die Legacy-Elemente? Accordeon wurde auf Nested-Content-Elements geändert und da greift dieses Skript wohl gar nicht mehr.
    Grüsse
    Bernhard


  29. #29
    Contao-Nutzer
    Registriert seit
    27.09.2016.
    Ort
    NRW
    Beiträge
    79

    Standard

    Wie finde ich das heraus, ob das korrekt und vollständig geladen wird?

    Was sind Legacy-Elemente? (in dem Fall vielleicht nicht?)

    Danke und Gruß

  30. #30
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von stomfohrde Beitrag anzeigen
    Wie finde ich das heraus, ob das korrekt und vollständig geladen wird?
    z.B. wenn dein angepasstes Template und deine Änderungen im Quellcode sichtbar sind.


    Zitat Zitat von stomfohrde Beitrag anzeigen
    Was sind Legacy-Elemente?
    Beim Erstellen der Inhaltselemente
    Entweder hast du Akkordeon aus 'Verschiedenes' gewählt oder Akkordeon-... aus 'Legacy-Elemente'
    Grüsse
    Bernhard


  31. #31
    Contao-Nutzer
    Registriert seit
    27.09.2016.
    Ort
    NRW
    Beiträge
    79

    Standard

    z.B. wenn dein angepasstes Template und deine Änderungen im Quellcode sichtbar sind.
    Manchmal sehe ich den Wald vor Bäumen nicht. Das Script war natürlich im Theme eingebunden, jedoch was ein anderes Theme der Seite zugewiesen. Danke für den Hinweis.
    Es klappt jetzt (unter 5.2.10. Update folgt dann in der kommende Woche)


    Beim Erstellen der Inhaltselemente
    Entweder hast du Akkordeon aus 'Verschiedenes' gewählt oder Akkordeon-... aus 'Legacy-Elemente'
    Ist das eine Veränderung von 5.3. oder ich verstehe dich falsch?
    Bei mir ist das Elementtyp "Einzelakkordeon" aus der Gruppe Akkordeon.

  32. #32
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von stomfohrde Beitrag anzeigen
    Ist das eine Veränderung von 5.3. oder ich verstehe dich falsch?
    Bei mir ist das Elementtyp "Einzelakkordeon" aus der Gruppe Akkordeon.
    Ja, mag sein, dass das in 5.2.x noch anders gruppiert ist. Ab 5.3 ist es so, wie ich oben beschrieben habe.
    Grüsse
    Bernhard


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
  •