Mootools: Fx.Slide in Fx.Slide

Veröffentlicht am 5. September 2008

Achtung: dieser Beitrag ist alt! Es kann gut sein, dass seine Inhalte nicht mehr aktuell sind.

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.

Kommentare (9)

muhli ¶

5. September 2008, 20:19 Uhr

Na, da muss man aber auch erstmal drauf kommen. Ich find ja mootools klasse, schon alleine des Namens wegen ;) Aber jQuery auch; Das ist etwas leichter, wenn man mit der JS-Welt nicht allzu gut vertraut ist -- wie ich :/
Gibt's zu mootools eigentlich empfehlenswerte Lektüre?
Peter ¶

5. September 2008, 20:24 Uhr

Das Mootorial soll gut sein. Kann ich allerdings selbst nicht beurteilen.
muhli ¶

5. September 2008, 20:46 Uhr

Ach, natürlich, Du hast Recht. Das hätte ich mir im Juli sogar fast bestellt, da war's hier nur noch nicht erhältlich :& Steht jetzt aber wieder auf der Liste für die nächste Bestellung. Hab dann auch doch lieber was zum anfassen, auch wenn die Suchfunktion manchmal fehlt.
Peter ¶

5. September 2008, 20:51 Uhr

Ich hab mich damals einfach anhand der Demos und der Dokumentation in die Sache reingekämpft … das geht auch ganz gut.
Bernhard ¶

6. September 2008, 11:18 Uhr

Die Dokumentation von mootools ist wirklich exzellent, durch Ausprobieren kommt man auch mit wenigen JavaScript-Kenntnissen sehr weit.
Das ist auch der Hauptgrund, weshalb ich bei mootools gelandet und geblieben bin. – Ich habe nämlich keine Lust erst noch zu lernen, wie ich mit der Dokumentation umzugehen habe, bevor ich überhaupt loslegen kann.
John Wrana ¶

6. September 2008, 12:01 Uhr

"Und heute mal ein Blogpost über eine Sache, die so gerade mal gar kein Schwein interessiert."

Aber sicher interessiert das! =)

Danke dafür, bin immer für neue MooTools-Tricks zu haben, zumal Version 2.0 mit Sicherheit eines der besten JS-Frameworks überhaupt ist. Man muß nur richtig in die Materie einsteigen.
Jörn ¶

11. September 2008, 14:50 Uhr

Yo,
danke für den Tip!!! Hat mir ne menge Arbeit und gesuche erspart!!! aber in MT 1.2 ist das onStart ohne die ' ' drum...

Merci,
Jörn

Chris ¶

11. Juni 2009, 16:24 Uhr

Hallo,

habe nun viel probiert und verstehe das Problem nicht.
Hier der Auszug:

var SL5_Slide = new Fx.Slide('SL5').hide();
var SL53_Slide = new Fx.Slide('SL53', {'onStart': function() {SL5_Slide.getParent().setStyle('height','auto');} }).hide();
...
$('SL53_toggle').addEvent('click', function(e){
		e.stop();
		SL53_Slide.toggle();
});

Das togglen an sich funktioniert schon, aber das übergeordnete DIV (-> getParent) bleibt statisch.

Ich wäre für ein Beispiel sehr dankbar!!!
Grüße

Peter ¶

11. Juni 2009, 16:44 Uhr
Du brauchst nicht das parent des anderen Slide-Effekts, sondern das des anderen Elements – in deinem Fall von SL53. So sollte es gehen:
```
var SL53_Slide = new Fx.Slide('SL53', {'onStart': function() {$('SL5').getParent().setStyle('height','auto');} }).hide();
```