Und heute mal ein Blogpost über eine Sache, die so gerade mal gar kein Schwein interessiert. Es geht um Mootools und zu diesem Problem habe ich mir (erfolglos) einen Wolf gegooglet, bis ich selbst auf die (einfache) Lösung gekommen bin. Damit der nächste Mootooler das nicht auch machen muss, gibt es hier die Antwort auf die Frage: Was mache ich, wenn ich verschachtelte Fx.Slide-Effekte habe?

Man hat ein Element A, das ein Element B enthält. Beide haben ein Fx.Slide. Das Problem ist, dass das äußere Element A nicht auf das reagiert, was mit Element B im Inneren passiert. Wird das Fx.Slide von Element B aktiviert, ändern sich Höhe oder Breite von Element A nicht, was am Ende ganz schön bescheiden aussieht.

Die Lösung: Im Fx.Slide Element B folgendes in das Options Object packen:

// Im Fx.Slide des Effekts für ElementB
'onStart': function() {
	ElementA.getParent().setStyle('height','auto');
}

Die Begründung ist ganz einfach. Fx.Slide platziert um das zu „slidende“ Element ein Container-Div, dessen Höhe (oder Breite) passend zum Effekt modifiziert wird. Wenn diese Höhe feststeht, kann sie sich natürlich nicht dem anpassen, was im inneren geschieht. Deswegen setzt man sie zum Start des inneren Effekts auf auto und schon passt sie sich automatisch und flüssig an.

Das gleiche Mittelchen kann man auch vermutlich auch anwenden, wenn man ein Accordion in einem Slide hat. Habe ich aber jetzt nicht getestet.