JS | Div ausfahren lassen

Grevas

Hoi.

Ich bin hier schon am verzweifeln. Ich hab einmal einen div mit einer Überschrift und daruner ein Div mit einem Text aus einer DB.

Der Text soll beim anklicken der Überschrift ausgefahren werden, nur wie ich das jetzt realisieren soll, komm da überhaupt nicht vorran.

Die Empfehlung war die YUI Klasse zu nehmen ( http://developer.yahoo.com/yui/examples/animation/basic.html ) allerdings scheint es damit einfach nicht möglich zu sein, weil die Funktion mit der höhe des Divs arbeiten würde, aber wie soll ich bei eine Einheitliche Funktion schreiben wenn der Text unterschiedlich lang ist?

Es ohne Animation zu realisieren wäre ja kein Problem, da könnte ich einfach display umstellen, ein FadeIn wäre auch noch machbar.

Habe bereits mit % Werten rumprobiert, aber das kann ja auch nicht funktionieren, da die Werte dann % zum elterndiv sind und dieser auch keine Feste größe (höhe) haben darf

Andere Überlegung: Seitlich rausfahren lassen - bringt mir aber leider auch nichts. Da wenn ich ein Div mit width: 0px; mach, ist das ein riesen platzhalter der alles verschieben würde.

Kennt jemand vielleicht ein Script das für mein Ziel was taugen würde?
Oder zumindest eine Idee wie man so ein Roll-out effekt bewerkstelligen soll, ohne dabei auf die Größe zuzugreifen? Zuklappen wär ja kein Problem, da ich da 0 eingeben kann, die höhe die gebraucht wird ist aber unbekannt.

Ich überlege auch schon ob man das nicht mit Zeilenzählen bewerkstelligen könnte und die höhe dadurch errechnen könnte - aber das geht meineswissens auch nur wenn der Zeilenumbruch manuell eingetippt wird, was nicht gerade toll wäre.

jojo87

jQuery#toggle

Grevas

Das könnte ich ja genauso gut mit nem display switch erreichen, das Problem ist die Animation

Hab hier ein Beispiel gefunden: http://www.draftfcb.de/main.php
Die Navi auf der Seite triffts fast, nur das die Untermenüs ruhig offen bleiben können, hab jetzt auch da mal reingeschaut aber irgendwie blick ich da nicht durch ^^"

Dachte ich wäre jetzt auf die eine Lösung gekommen, indem ich den Inhalt einfach drunter verstecke, damit hätte ich die höhe, aber leider hätte das einen ruckel-effekt beim austauschenzwischen kurz- und langversion. Text unter Text verstecken geht nicht, z-index hab ich eingestellt - aber der Inhalt scheint trotz backgrounds durch. War also nichts, und wäre auch nicht wirklich schön gewesen.

Wenn ich nur an die höhe rankommen könnte... Aber bei display:none; kriegt man offsetHeight logischerweise immer 0 und da style.height garnicht erst gesetzt werden kann, weiß ich grad immer noch nicht weiter.

/P.S: WAAH, sry, hab den letzten toggle übersehen, der hat ja n Effekt + kann keine parameter sehen, danke ich werds ausprobiern.

/ ok ich gebs für heute auf, sonst platzt mir der Schädel. Beim Toggle seh ich leider keine Möglichkeit an dem Effekt was einzustellen die Breite des ganzen sollte nämlich Fix sein - seufz, ich hasse JS

/ jQuery scheint da aber doch noch was zu bieten. z.B. slideDown triffts doch schon ganz gut, muss man den kurztext eben seperat eingeben - sollte aber denk ich mal noch in ordnung sein.

synaptic

also ich poste jetzt mal nur das script... war von emeinem directorychecker in php-version...

Code

$(document).ready(function(){
        $("#domains").click(function(){
                $("#domainwrapper").slideToggle(1000, function(){
                });    
        })
 })

ich denke du kommst damit klar
da kannse einiges einstellen

Grevas

So ein <zensiert> effekt kann einen echt die nerven kosten... Vorallem wenn das einem erst spät gesagt wird. Neben dem Div ist noch ein anderer div, da beide unten sind sollte sich das div rechts auch in der höhe erweitern.
Dafür hatte ich schon eine simple Funktion geschrieben, aber da war die Animation noch nicht berücksichtigt.

Aber das krieg ich jetzt auch noch hin, nur find ich das be********* .

Aufjedenfall noma danke, die Animation selbst funzt jetzt

Tags