UPDATE

Vor einer Weile gab es mal eine Javascript-Nachfrage im Contao.de-IRC. Dort habe ich für jemanden die Funktion eingebaut das nicht nur beim Klick das darunterliegende Text-Element aufklappt, sondern danach sich dieses Element nach oben an den Browserrand korrigiert. Ähnlich wie ein Anker-Scroller. Da ich es jetzt auch selbst auf meiner mobilen-Version von www.sr-tag.de also m.sr-tag.de einsetzen wollte, hab ich gedacht das könnte eventuell auch jemand anderen interessieren.

Also folgeden Aufruf ans Ende der Website kopieren oder bei Contao im Theme-Seitenlayout-Einstellungen in der textarea von "". Es ist natürlich die Mootools-Bibliothek erforderlich.

<script type="text/javascript">
<!--//--><![CDATA[//><!--
var Accord = {
    init: function(){
    var Toggler = $$('div.toggler');
    var Accordeon = $$('div.accordion');
   
    this.accordion = new Accordion(Toggler, Accordeon, {
    display: -1,
    alwaysHide: true,
    opacity: 0.1,
    duration: 1000,
    transition: Fx.Transitions.Sine.easeInOut,

    onBackground: function(toggler,i) {
        toggler.removeClass('active');
       },
   
    onActive: function(toggler, i)
        {
        toggler.addClass('active');
        },
    onComplete: function(){

        request = this.previous;
        if(request >=0){
            var open = this.togglers[request].getStyle('margin-top').toInt();
            if(open >= 0) new Fx.Scroll(window,{duration: this.options.duration}).toElement(this.togglers[request]);
        }
    }
  });

}
}
window.addEvent('domready', Accord.init.bind(Accord));
//--><!]]>
</script>

die Elemente "Toogler" und "Accordeon" müssen natürlich bei Abweichung im eigenen HTML-Code angepasst, und die Optionen können nach Belieben verändert werden.

Viel Glück und hier ein etwas angepasstes funktionierendes Beispiel.

UPDATE: das alte Script funktionierte in neueren Contao-Versionen (getestet mit Contao 3.2.x) nicht mehr. Daher habe ich das orginale moo_accordion.html5 template angepasst und kann hier runtergeladen werden.

Zurück


Kommentare

Maren Lange

Danke für Deine Lösung. Hatte ziemlich lange nach so einer Lösung gesucht.
Trotz mangelhafter Kenntnisse in javascript bzw. mootools ist es mir sogar gelungen, das script auf meine Bedürfnisse anzupassen.
Mich interessiert allerdings folgendes:
Welche Bedeutung hat die folgender Codezeile bzw. was bewirkt diese genau?

var open = this.togglers[request].getStyle('margin-top').toInt();

Bei ersten Test habe ich festgestellt, das es ohne diese Zeile augenscheinlich genauso funktioniert (Test nur im Firefox 20 unter Windows 7)
Außerdem komme ich mit dem Argument: {duration:this.options.duration} nicht so richtig zurecht. Auch dort ergibt sich beim Weglassen augenscheinlich keine Änderung bzw. ich weiss nicht wozu ich das benötige. Eine explizite Dauer gebe ich dort ja nicht an. Was habe ich mit meinen stümperhaften Kenntnissen übersehen?

Gruß Maren


hinterlasse ein Kommentar