Contao-Camp 2024
Seite 2 von 2 ErsteErste 12
Ergebnis 41 bis 61 von 61

Thema: Accordion direkt anspringen und aufklappen (j_accordion)

  1. #41
    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 snarosy Beitrag anzeigen
    Ein kleiner Schönheitsfehler ist noch, ...
    Ich verstehe deine Beschreibung nicht. Vielleicht mal einen Link zur Seite zeigen und erklären was wann passieren soll und nicht funktioniert.
    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. #42
    Contao-Nutzer
    Registriert seit
    29.03.2012.
    Beiträge
    62

    Standard

    Ich stand vor dem gleichen Problem und habe folgende Lösungen gefunden:
    (Contao 3.5.6)

    Für Verlinkungen in einem Accordion-Text auf ein anderes Accordion auf derselben Seite:
    1. Dem Ziel-Accordion eine ID zuweisen (z.B. meinZiel)
    2. dem Link den Zusatz #meinZiel geben
    3. Javascript einbinden

    Code:
    jQuery(document).ready(function(){
        $('.ui-accordion-content a').click(function() {
        
        var clickedHref = $(this).attr('href');
        var hash = clickedHref.split('#')[1];
    
        if (typeof hash !='undefined') {
            $('div.toggler').each(function(el, index){
                console.log(index);
                if (hash == $(index).parent().attr('id') && el > 0)
                {
                    index.click(); 
    
                }
            }); 
            };            
        });
    });
    Für Verlinkungen von einer Seite auf ein konkretes Accordion auf einer anderen Seite:
    1. Dem Ziel-Accordion eine ID zuweisen (z.B. meinZiel)
    2. dem Link den Zusatz #meinZiel geben
    3. das Template j_accordion.html5 anpassen (Ergänzung ist hervorgehoben):

    Code:
    <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
            active: false, // alle Akkordions sind am Anfang eingeklappt
            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);
            }
          });
    
          // Über Anker-ID direkt anspringen
          $('div.toggler').each(function() { 
    	 if (document.location.hash === '#' + $(this).parent().attr('id') && !$(this).hasClass('active')) { 
    	    $(this).click(); 
    	  } 
    	}); 
    
        });
      })(jQuery);
    </script>
    Ich hoffe, das hilft auch anderen.
    Geändert von nano (06.03.2016 um 16:07 Uhr)

  3. #43
    Contao-Fan
    Registriert seit
    05.05.2011.
    Beiträge
    860

    Standard

    Auch bei mir funktioniert das automatische Öffnen eines Accordions nur wenn ich dieses von einer anderen Seite aus anspringe mit
    HTML-Code:
    meine-seite/html#meine-accordion-id
    , verwende ich diesen Link auf der gleichen Seite, auf der auch das Accordion liegt, wird es zwar angesprungen, aber nicht automatisch geöffnet, geöffnet wird das Accordion erst, wenn ich diese Seite mit der URL dann nochmal aufrufe, was mache ich falsch? Das steht in meiner j_accordion.html5
    PHP-Code:
    <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)
            }
          });

          // Über Anker-ID direkt anspringen
          $('div.toggler').each(function() { 
         if (document.location.hash === '#' + $(this).parent().attr('id') && !$(this).hasClass('active')) { 
            $(this).click(); 
          } 
        }); 

        });
      })(jQuery);
    </script>
    Contao 3.5.15 ohne Erweiterungen. Danke für Tipps und Hinweise.
    Geändert von 3dr (24.08.2016 um 19:33 Uhr)

  4. #44
    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

    PHP-Code:
    $('div.toggler').each(function() { 
    Wird ja nur einmal ausgeführt, nachdem die Seite (genauer: der DOM) geladen ist.

    Damit etwas passieren soll, wenn du innerhalb einer Seite auf einen Link mit einem Hash klickst, musst du auf diese Links einen click-Event aufsetzen und genau beschreiben was dann passieren soll.

    Beispiel:
    PHP-Code:
    /* JavaScript (jQuery) */

    var myAccordions = $('.toggler');

    // alle Links
    $('a').each(function() {
      var 
    hash = $(this).prop('hash');

      
    // Alle Links mit Hash
      
    if(hash) {

        
    // Accordion mit id=hash oder mit enthaltenem Element mit id=hash suchen
        
    var closestAccordion = $(hash).closest('.ce_accordion').find('.toggler');

        
    // alle Links mit Hash, und Ziel gleich oder innerhalb eines Accordions
        
    if(closestAccordion.length) {
          $(
    this).click(function() {
            
    // entsprechendes Accordion öffnen
            
    $(document).accordion('option''active'myAccordions.index(closestAccordion));
          });
        }
      }
    }); 
    Siehe auch meinen Post von oben #35
    Geändert von Andreas (25.08.2016 um 00:01 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

  5. #45
    Contao-Fan
    Registriert seit
    05.05.2011.
    Beiträge
    860

    Standard

    €Andreas,
    vielen Dank für deine Hilfe und den erstellten Code. Damit öffnet sich das Accordion nachdem ich diesen Code so in das Template j_accordion.html5 hinzugefügt habe:
    PHP-Code:
    <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)
            }
          });

          // Über Anker-ID direkt anspringen
          $('div.toggler').each(function() { 
         if (document.location.hash === '#' + $(this).parent().attr('id') && !$(this).hasClass('active')) { 
            $(this).click(); 
          } 
        }); 

        });
      })(jQuery);
    </script>
    <script>
    // ueber Link auf gleicher Seite Accordion direkt öffnen
      var myAccordions = $('.toggler'); 

    // alle Links 
    $('a').each(function() { 
      var hash = $(this).prop('hash'); 

      // Alle Links mit Hash 
      if(hash) { 

        // Accordion mit id=hash oder mit enthaltenem Element mit id=hash suchen 
        var closestAccordion = $(hash).closest('.ce_accordion').find('.toggler'); 

        // alle Links mit Hash, und Ziel gleich oder innerhalb eines Accordions 
        if(closestAccordion.length) { 
          $(this).click(function() { 
            // entsprechendes Accordion öffnen 
            $(document).accordion('option', 'active', myAccordions.index(closestAccordion)); 
          }); 
        } 
      } 
    }); 
    </script>
    Ist das so korrekt oder sollte man das anders machen?
    (Deinen Hinweis unter #35 habe ich leider nicht verstanden)

  6. #46
    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

    Ja, du kannst das in dein angepasstest j_accordion_mod reinschreiben und dieses im Layout dann auswählen anstelle von j_accordion.

    Es sollte allerdings alles zwischen den domready Event und das SCRIPT brauchst du natürlich nur einmal zu öffnen.

    j_accordion_mod: (mittlerer Teil in PHP-Highlighter, damit es schön bunt ist)
    HTML-Code:
    <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);
            }
          });
    // original j_accordion Contao 3.5.15 above
    PHP-Code:

          
    /**
           * open appropriate accordion if link hash target matches an accordion ID
           * or an element ID within an accordion
           */
          
    var
            
    myAccordions = $('.toggler'),
            
    closestAccordion = $(document.location.hash).closest('.ce_accordion').find('.toggler')
          ;

          
    // open appropriate accordion if hash is in page URL and hash matches ID
          
    if(closestAccordion.length) {
            $(
    document).accordion('option''active'myAccordions.index(closestAccordion));
          }

          
    // all anchors
          
    $('a').each(function() {
            var 
    hash = $(this).prop('hash');

            
    // all anchors with a hash
            
    if(hash) {
              
    // search for an accordion with id=hash or including an element with id=hash
              
    var closestAccordion = $(hash).closest('.ce_accordion').find('.toggler');

              
    // click event for all affected anchors
              
    if(closestAccordion.length) {
                $(
    this).click(function() {
                  
    // open the appropriate accordion
                  
    $(document).accordion('option''active'myAccordions.index(closestAccordion));
                });
              }
            }
          }); 
    HTML-Code:
    // original j_accordion Contao 3.5.15 below
        });
      })(jQuery);
    </script>
    Ich habe das Aufklappen beim Aufrufen der Seite mit Hash in der URL jetzt mit dazu gepackt.

    Hier ein paar Links zum Testen in nem CE-Text:
    HTML-Code:
    <p><a href="{{env::request}}#ui-id-1">Acc 1 toggler</a></p>
    <p><a href="{{env::request}}#ui-id-4">Acc 2 accordion</a></p>
    <p><a href="{{env::request}}#ui-id-5">Acc 3 toggler</a></p>
    <p><a href="{{env::request}}#testId">in Acc 3</a></p>
    <p><a href="{{env::request}}#foobar">no match</a></p>
    In #35 hatte ich erklärt, dass man die jQuery-Accordions so aufklappt:
    PHP-Code:
    $(document).accordion('option''active'0); 
    Nehmen wir mal an, du hast Accordions auf einer Seite, z.B. 8 Toggler um diese aufzuklappen, dann hat jedes Accordion (Toggler) einen Index. Das erste hat den Index 0 und das letzte 7. Möchtest du jetzt zum Beispiel das 8. (letzte) aufklappen, dann brauchst du nur diesen Code auszuführen.
    PHP-Code:
    $(document).accordion('option''active'7); 
    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

  7. #47
    Contao-Fan
    Registriert seit
    05.05.2011.
    Beiträge
    860

    Standard

    @Andreas,
    vielen Dank für die ausführliche Anleitung und den Beispielcode!

  8. #48
    Contao-Fan
    Registriert seit
    12.04.2011.
    Ort
    Hamburg
    Beiträge
    489

    Standard Umgang mit "sticky header"

    Hallo zusammen,

    ich habe in einer Conto 3.5er-Installation nanos Ansatz von weiter oben in diesem Thread angewendet, und zwar zum Springen von außen in ein Accordeon, und das funktioniert auch soweit super.

    Jetzt habe ich das spezielle Problem, dass ich einen "sticky header" in der Website verwende, also ein per Position:fixed oben im Layout fixiertes Element habe, das die ganz oben liegenden Elemente im Content-Bereich überlappt. Beim Sprung in ein Akkordeon-Element sind daher der Toggler sowie die ersten Zeilen des Inhalts verdeckt.

    Habt Ihr dafür einen Lösungsansatz?
    Kann ich beispielsweise dem Sprung platt gesagt etwas Spiel mitgeben und irgendwo +100px hinzurechnen?
    Wenn ja, wie geht das?

    Hier nochmal der Code, der für den Sprung im j_accordeon.html5 hinzugefügt wurde:

    HTML-Code:
    // Über Anker-ID direkt anspringen 
          $('div.toggler').each(function() {  
         if (document.location.hash === '#' + $(this).parent().attr('id') && !$(this).hasClass('active')) {  
            $(this).click();  
          }  
        });  
    Danke!

  9. #49
    Contao-Fan Avatar von Stefko
    Registriert seit
    25.10.2012.
    Ort
    Karlsruhe
    Beiträge
    771
    User beschenken
    Wunschliste

    Standard

    Ahoi,

    das müsste man mit der Pseudoklasse :target lösen können:

    Code:
    :target:before {
    	content: "";
    	display: block;
    	height: 100px; /* Höhe des Headers */
    	margin: -100px 0 0; /* negativeHeaderhöhe */
    }
    Grüße, Stefko

  10. #50
    Contao-Fan
    Registriert seit
    12.04.2011.
    Ort
    Hamburg
    Beiträge
    489

    Standard

    Danke Stefko.

    Verstehe ich den Ansatz richtig - ich würde also irgendwas in das Script einbauen, dass der Seite eine Klasse vergibt (via addclass) und dann den Header per CSS verschieben?

    Das wäre ein interessanter Ansatz, insbesondere weil ich dann nur im Fall des Sprungs das Layout verändern würde, ansonsten aber keine Eingriffe machen müsste.

    Oder meinst Du es anders?

    Edit: Ahhh... :target greift nur bei Verwendung eines Ziels, das via #meinziel angesprungen wird...? Ist das korrekt?

    Kannte ich noch gar nicht... Das probier ich gleich mal aus. Das wäre ja der Hammer ;-)
    Geändert von pipkin (16.02.2018 um 14:47 Uhr)

  11. #51
    Contao-Fan Avatar von Stefko
    Registriert seit
    25.10.2012.
    Ort
    Karlsruhe
    Beiträge
    771
    User beschenken
    Wunschliste

    Standard

    Eigentlich sollte es reichen, wenn Du obiges in Dein CSS-File einfügst.
    Bsp.: https://codepen.io/Lobsterlounge/pen/gvXZYb
    Grüße, Stefko

  12. #52
    Contao-Fan
    Registriert seit
    12.04.2011.
    Ort
    Hamburg
    Beiträge
    489

    Standard

    Hmmm ....
    Beim Sprung innerhalb der Seite greift das CSS, nicht aber beim Jump von außen in die Seite. ...

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

    Schau mal hier, ich habe gerade meine Accordion-Templates aufgeräumt
    https://community.contao.org/de/show...oll-open-track
    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. #54
    Contao-Nutzer
    Registriert seit
    21.03.2018.
    Beiträge
    6

    Standard Was muss man umstellen dass es über die Nachrichten auch geht?

    Hallo Community,
    Erstmals vielen herzlichen Dank an Andreas für die geniale Umsetzung des direkt Anspringen der Accordion.
    Bei normalen Accordions funktioniert dies wunderbar.
    Ich habe nun die Hürde, dass ich für die "News" Accordions eingebaut habe. Mit der verlinkung springen diese zwar zum gewünschten Akkordeon, geöffnet werden diese aber nicht.
    ich nehme an, dass dies an der Struktur der Nachrichten liegt, welche ich mit Modulen (nachrichtenloser, nachrichtenarchive etc. )zusammen gebaut habe.
    Weiss jemand wie und wo man bei den Nachrichten das Accordion via hash link auch zum öffnen bringen kann. Ich habe schon ziemlich einiges ausgetestet, leider erfolglos.

    Testseite:
    http://marinobeleffi.ch/index.php/login.html
    User: Max
    PW: miraqulix

    http://marinobeleffi.ch/index.php/aktuelles.html
    Im zweiten Accordion habe ich einen Testlink eingesetzt.

    Das news_full.html5 template habe ich folgend zu Accordions umgebaut.
    PHP-Code:
    <div class="toggler"<?php if ($this->headlineStyle): ?> style="<?php echo $this->headlineStyle?>"<?php endif; ?>>
    <p class="info"><?php echo $this->date?> <?php echo $this->author?> <?php echo $this->commentCount?></p>
        
        <?php if ($this->hasMetaFields): ?>
            
        <?php endif; ?>    <h5><?php echo $this->headline?></h5>
    </div>
    <div class="layout_latest block<?php echo $this->class?>"><div class="accordion">
        
        <?php if ($this->addImage): ?>
            <div class="image_container<?php echo $this->floatClass?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin $this->float); ?>"<?php endif; ?>>
            <?php if ($this->href): ?>
                <a href="<?php echo $this->href?>"<?php echo $this->attributes?> title="<?php echo $this->alt?>">
                    <?php endif; ?>
                        <img src="<?php echo $this->src?>"<?php echo $this->imgSize?> alt="<?php echo $this->alt?>" />
                    <?php if ($this->href): ?>
                </a>
            <?php endif; ?>
            <?php if ($this->caption): ?>
                <div class="caption"><?php echo $this->caption?></div>
                <?php endif; ?>
                </div>
                <?php endif; ?>
                <p class="teaser"><?php echo $this->teaser?></p>
                <?php if ($this->text): ?>
                    <p class="more"><?php echo $this->more?></p>
                <?php endif; ?>
                </div>
            <div>
        </div>
    </div>
    Ich hoffe jemand kann mir dabei weiterhelfen.

  15. #55
    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

    Schau dir in einem Tab ein "normales" Acccordion an, wobei das JavaScript im Browser deaktiviert ist.
    In einem anderen Tab schaust du dir deine News-Accordions an - auch ohne JS.

    Jetzt modifiziere deine Newstemplates so, dass die HTML-Struktur genauso aussieht, wie in einem normalen Accordion, dann sollte es funktionieren.

    Tipps: Korrigiere die Fehler auf der Seite
    Code:
    Info: 48 Fehler / 0 Warnungen
    
    Info: W3c Online Validation
    
    line 20 column 38 - Info:  The “type” attribute for the “style” element is not needed and should be omitted.
    line 39 column 68 - Fehler: Attribute “titel” not allowed on element “a” at this point.
    line 81 column 14 - Fehler: Duplicate ID “main”.
    line 35 column 37 - Info: The first occurrence of ID “main” was here.
    line 83 column 109 - Fehler: Attribute “titel” not allowed on element “a” at this point.
    line 86 column 113 - Fehler: Attribute “titel” not allowed on element “a” at this point.
    line 100 column 58 - Fehler: Element “div” not allowed as child of element “span” in this context. (Suppressing further errors from this subtree.)
    line 151 column 760 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 165 column 89 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 178 column 679 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 191 column 552 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 204 column 750 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 217 column 709 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 230 column 714 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 243 column 807 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 256 column 679 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 269 column 1201 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 282 column 563 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 295 column 629 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 308 column 361 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 322 column 999 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 335 column 485 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 349 column 207 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 362 column 434 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 375 column 745 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 388 column 813 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 401 column 942 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 414 column 152 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 427 column 459 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 440 column 457 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 453 column 425 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 466 column 469 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 480 column 581 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 494 column 251 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 507 column 377 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 520 column 743 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 533 column 274 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 546 column 553 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 559 column 488 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 572 column 345 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 585 column 461 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 599 column 579 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 612 column 787 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 625 column 634 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 638 column 687 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 651 column 719 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 664 column 583 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 677 column 369 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 690 column 255 - Fehler: No “p” element in scope but a “p” end tag seen.
    line 703 column 342 - Fehler: No “p” element in scope but a “p” end tag seen.
    Binde jQuery lokal ein ohne Fallbacklösung.

    Wähle im Layout nur jQuery-Templates, welche du auch wirklich benötigst. (medialement brauchst du normalerweise nicht, auch wenn im BE manchmal ein Hilfetext auftaucht, der dies sagt).

    Bei dem Scroll-To-Top Feature hast du nur noch einen Teil des Kommentars drin, nicht mehr mehr das Feature selbst. Ist dir dies bewusst?
    Code:
    /** Scroll active accordion to top - END */
    Edit: Quelle für den Code sollte dieser Thread hier sein https://community.contao.org/de/show...oll-open-track. Ich hatte das Scrollen letztens verbessert und jetzt dort eingetragen.
    Geändert von Andreas (08.11.2018 um 15:36 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. #56
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Zitat Zitat von Andreas Beitrag anzeigen
    Schau mal hier, ich habe gerade meine Accordion-Templates aufgeräumt
    https://community.contao.org/de/show...oll-open-track
    Hi Andreas,
    habe eben Dein Accordion für Contao 4.4 in eine 4.7.6 Installation eingebaut und es funktioniert auf Anhieb! Vielen Dank dafür!
    Wie kann ich das "nach oben scrollen" noch feinjustieren? Stichwort: "Sticky Header", ich brauche da noch ein paar Pixel Platz.

    Liebe Grüße aus Ludwigsburg

    Jochen Kubik
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  17. #57
    Alter Contao-Hase
    Registriert seit
    12.10.2010.
    Beiträge
    1.016

    Standard Contao 4.10 über einen LINK Accordion direkt anspringen und aufklappen (j_accordion)

    Hi Leute,

    auf einer Unterseite "domain.de/unterseite" sind mehrer Accordions.

    Auf der Startseite "domain.de" sind mehrere Links, die auf der Unterseite entsprechende Accordions direkt ansprechen und öffnen sollen.

    Wie lässt sich das Ganze in Contao 4.10 aktuell umsetzen?

    Mein aktuelles Template j_accordion.html5:

    HTML-Code:
    <script src="<?= TL_ASSETS_URL ?>assets/jquery-ui/js/jquery-ui.min.js"></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);
          }
        });
      });
    </script>
    Die Navigation auf der Startseite:

    HTML-Code:
    <nav class="card_nav">
    <ul>
    <li><a href="{{link_url::155}}#lrv_1361">Accordion 1</a></li>
    <li><a href="{{link_url::155}}#lrv_1450">Accordion 2</a></li>
    <li><a href="{{link_url::155}}#lrv_1456">Accordion 3</a></li>
    <li><a href="{{link_url::155}}#lrv_1459">Accordion 4</a></li>
    <li><a href="{{link_url::155}}#lrv_1462">Accordion 5</a></li>
    </ul>
    </nav>

  18. #58
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.464
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Das habe ich erst diese Woche gesucht, versucht und damit klappt das dann .
    Version ist 4.9.

    Code:
    <script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
    
    <script>
      (function($) {
        $(document).ready(function() {
          $(document).accordion({
            // Put custom options here
            active: false, // alle Akkordions sind am Anfang eingeklappt
            heightStyle: 'content',
            header: 'div.toggler',
            collapsible: true,
            active: false,
            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);
            }
          });
    
          // Über Anker-ID direkt anspringen
          $('div.toggler').each(function() { 
         if (document.location.hash === '#' + $(this).parent().attr('id') && !$(this).hasClass('active')) { 
            $(this).click(); 
          } 
        }); 
    
        });
      })(jQuery);
    </script>
    Und den Namen des Ankers / ID in das Feld CSS-ID eintragen.
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

  19. #59
    Alter Contao-Hase
    Registriert seit
    12.10.2010.
    Beiträge
    1.016

    Standard

    Super, Danke, das hat geklappt

  20. #60
    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 verlinke hier nochmal auf meinen Thread mit dem Template für Contao 3 und 4. Es enthält mehrere Feature, welche oben erklärt werden.
    https://community.contao.org/de/show...ate-08-11-2018
    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

  21. #61
    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 kubjo Beitrag anzeigen
    Hi Andreas,
    habe eben Dein Accordion für Contao 4.4 in eine 4.7.6 Installation eingebaut und es funktioniert auf Anhieb! Vielen Dank dafür!
    Wie kann ich das "nach oben scrollen" noch feinjustieren? Stichwort: "Sticky Header", ich brauche da noch ein paar Pixel Platz.

    Liebe Grüße aus Ludwigsburg

    Jochen Kubik
    Sorry, hatte diesen Beitrag übersehen. Die Anpassung der Höhe ist dort auch erklärt.
    https://community.contao.org/de/show...ate-08-11-2018
    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
  •