Mootools: Div-Box mit Animation vergrößern und verkleinern

sturmi2 · #1 (**permalink**) 17.06.2009, 14:58

Hallo zusammen,

ich suche nach einer Möglichkeit, wie ich mit Mootools per Klick auf einen Link eine einzelne Box vergrößern und verkleinern kann. Ich stelle mir das ganze so vor: Beim betreten der Seite ist dieses Div 200 Pixel hoch und unten habe ich einen Link mit der Aufschrift "Bildbereich maximieren". Klicke ich nun auf den Link, soll das Div mit einer Animation (z.B. Schiebeeffekt o.ä.) auf 600 Pixel Höhe erweitert werden.

Hat da jemand eine Idee? Ich bin reiner PHP-Programmierer und kenne mich mit den Clientseitigen Sprache nur bedingt aus und mit den Framework Mootools noch weniger und daher bin ich für jede Hilfe wirklich sehr dankbar.

Mit besten Grüßen

Andre

inta · #2 (**permalink**) 17.06.2009, 15:32

Ich nehme mal an, dass du grundsätzlich mit Mootools umgehen kannst.

Wenn du nur CSS-Eigenschaften animieren möchtest, dann ist Fx.Tween dafür ausreichend.

sturmi2 · #3 (**permalink**) 17.06.2009, 15:39

Hallo,

vielen Dank für Deine Antwort. Also, ich habe bis gestern mit JQUERY gearbeitet und damit kenne ich mich aus. Allerdings möchte ich mich jetzt mit Mootools erstmal vertraut machen, da JQUERY ein Problem manchmal mit den IE6 hat. Die Syntax ist ja immerhin schon fast ähnlich. Ich werde mir mal die Seite anschauen. Danke!

sturmi2 · #4 (**permalink**) 17.06.2009, 15:58

OK ... Danke nochmals .... folgender Einzeiler löste mein Problem

$('div_id').tween('height', '597');

Das ist aber doch nichts dieses genannte Fx.Tween, oder doch?

Noch eine bzw. zwei kleine Fragen am Rande:

1.) Wie kann ich z.B. von einem Element die ID oder Klasse austauschen bzw. ändern?

2.) Wie kann ich ein Bild gegen ein anderes per Klick austauschen? (In Jquery gab es dieses attr, um beispielsweise auf den Source eines Image zugreifen zu können)

Ich bedanke mich doch gleich nochmals herzlich im vorraus.

inta · #5 (**permalink**) 17.06.2009, 16:25

Zitat:

Zitat von sturmi2

$('div_id').tween('height', '597');

Das ist aber doch nichts dieses genannte Fx.Tween, oder doch?

Doch, das ist ein Shortcut, den findest du auch auf der von mir verlinkten Seite der Dokumentation:
MooTools Docs - Fx/Fx.Tween

Zitat:

Zitat von sturmi2

1.) Wie kann ich z.B. von einem Element die ID oder Klasse austauschen bzw. ändern?

Ids würde ich nicht ändern, die sollen ein Element ja eindeutig identifizieren. Möglich wäre das aber zum Beispiel mit set(). Für Klassen gibt es spezielle Funktionen, auch die findest du in der Doku unter hasClass() ff.

Zitat:

Zitat von sturmi2

2.) Wie kann ich ein Bild gegen ein anderes per Klick austauschen? (In Jquery gab es dieses attr, um beispielsweise auf den Source eines Image zugreifen zu können)

Bei Mootools kannst du das mit setProperty() lösen. Wie du Events nutzt, findest du jetzt bestimmt selbst heraus - die Doku ist doch eigentlich recht gut und logisch aufgebaut.

sturmi2 · #6 (**permalink**) 17.06.2009, 17:18

OK ...

Eine Frage habe ich aber trotzdem noch ... Ich möchte ganz gerne diesen tween-Effekt benutzen und die Größe eines Bildes ändern. Es muss einfach nur die Höhe des Bildes beim Klick auf einen Link angepasst werden. Wie kann ich das am besten Lösen? Am besten wäre es, wenn das height-Attribut direkt im Image geändert wird und nichts das CSS, was auch irgendwie nicht so ganz funktioniert.

sturmi2 · #7 (**permalink**) 17.06.2009, 18:03

OK ... hat sich erledigt ... habe es einfach irgendwie mit overflow geschafft. Viel wichtiger ist mir jetzt aber, wie kann ich die derzeit gesamte Dokumenten Höhe ermitteln? Ich habe ein Div, wodrin alle anderen Divs sich befinden. Wenn ich sage das die Höhe 100% sein soll, beziehen sich die 100 % ja nur auf den Viewport des Browser. Ist der Inhalt mal länger, funktionierts nicht mehr. In Jquery hatte ich mal folgendes:

function fix_outerwrap_bug() {
$(#'all')
.css('height', $(document).height());
}

Damit wurde den Div mit der ID 'all' automatisch die Höhe des gesamten Bereiches im Browser gegeben. Und mit folgenden Code:

$(window).resize(function() { fix_outerwrap_bug();});

habe ich die Funktion erneut aufrufen lassen, wenn die Größe des Browserfensters geändert wurde.

Gibt es so was auch bei Mootools?

inta · #8 (**permalink**) 17.06.2009, 19:01

Ich habe noch nie versucht die höhe des gesamten Dokuments zu ermitteln, aber das sollte mit getSize() möglich sein, wenn du das auf „document“ oder „body“ anwendest.

sturmi2 · #9 (**permalink**) 18.06.2009, 11:29

Hallo,

ich möchte jetzt bei ein paar Div-Container die CSS-Werte wie folgt ändern:

Code:

$('top_background').tween('height', '568');
$('gallery_img').tween('height', '387');
$('button_header_left').tween('top', '537');
$('left').tween('top', '569');
$('right').tween('top', '574');
$('content_all').tween('top', '580');
$('footer').tween('margin-top', -217);
$('footer').tween('margin-bottom', -217);
$('all').tween('height', hoch.y+187);

Ich möchte aber das dies nur ausgelöst wird, wenn auf den Link geklickt wird mit der ID "klick".

Ich habe es wie folgt probiert , jedoch erfolglos:

Code:

$('klick').addEvent('click', function() {

$('top_background').tween('height', '568');
$('gallery_img').tween('height', '387');
$('button_header_left').tween('top', '537');
$('left').tween('top', '569');
$('right').tween('top', '574');
$('content_all').tween('top', '580');
$('footer').tween('margin-top', -217);
$('footer').tween('margin-bottom', -217);
$('all').tween('height', hoch.y+187);

});

Was ist an diesem Snippet falsch?

Vielen Dank!

inta · #10 (**permalink**) 18.06.2009, 12:08

Was funktioniert denn nicht?
Kannst du bitte einen Link zu deinem Versuch bereitstellen?

Ist das DOM schon aufgebaut, wenn du versuchst das Event anzuhängen? (Nutzt du das von Mootools bereitgestellte „domready“?)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Header entfernen	tripple	CSS	17	15.06.2010 15:41
#boxes a:hover.info: 2.posting mit css !!!	marioN	CSS	5	25.01.2004 17:04
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac,	marioN	CSS	2	19.01.2004 17:17