jQuery animate in Verbindung mit min-height

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo,

ich habe einen div (contenteditable), der im Prinzip die Funktion einer Textarea erfüllt. Jetzt ist alles so programmiert, dass der Div im Normalzustand eine min-height von 20px hat. Wenn der Div focus bekommt, wächst er über .animate auf eine minheight von 75px. Wenn jetzt aber ein Button „Abbrechen“ gedürckt wird, soll der Textinhalt gelöscht werden und der Div schrumpft wieder. Zweiteres tut er aber nicht …

div.html("").animate(„min-height“, „“);
^quasi val("") ^habe auch schon 20px probiert

#2

Hi!

div.html("").animate(„min-height“, „“);
^quasi val("") ^habe auch schon 20px probiert

Keine Ahnung, ich hätte es auch so probiert.

#3

nun meine erste vermutung: min-height ist der logik nach auch bei 75 px erfuellt (es sind ja MINDESTENS 20)
also einfach mal statt min-height auf height 20px animieren.
gruß
philipp

#4

Hallo,
das könnte an der Syntax liegen. Folgende Funktion funktioniert jedenfalls bei mir - zumindest in FF + Chrome; IE kann ich momentan nicht testen:

$(„div“).animate({„min-height“: „75px“}); //wenn Focus
$(„div“).html("").animate({„min-height“: „20px“}); //wenn Abbruch

Viele Grüsse
thom23

#5

Hey,

sorry aber dafür fällt mir auch keine andere Lösung ein als diese. Schau mal ob der richtige Selektor ausgewählt ist und teste an einem anderen Div mal, ob min-height auch in den negativen bereich zurückfallen kann oder ob du dann auch die height selbst anpassen musst. Kann mir vorstellen dann der Browser die min-height erstmal als height festsetzt.

Für eine bessere Diagnose bräuchte ich schon etwas mehr Code :smile:

#6

ich habe einen div (contenteditable), der im Prinzip die Funktion einer Textarea erfüllt. Jetzt ist alles so programmiert,
dass der Div im Normalzustand eine min-height von 20px hat. Wenn der Div focus bekommt, wächst er über .animate auf eine minheight von 75px. Wenn jetzt aber ein Button „Abbrechen“ gedürckt wird, soll der Textinhalt gelöscht werden und der Div schrumpft wieder. Zweiteres tut er aber nicht …

Schätze Du musst auch max-height ändern

#7

Hallo,

ich denke die DIV schrumpft nicht, weil du die Mindesthöhe setzen möchtest. Aber die Mindesthöhe ist nicht die aktuelle Höhe. Wenn du die min-height von 75px runter auf 25px setzt und die Box war schon über 25px hoch, dann wird sie nicht runterschrumpfen - verstehst du? Die min-height sagt doch aus, dass die Box mindestens 25px hoch ist und bei Bedarf nach oben wachsen kann. Aber es gibt keinen Bedarf nach unten zu wachsen - nämlich von 75px auf 25px. Schwierig zu erklären!
Du musst schon die tatsächliche Höhe (height) auf 25px setzen, dann bewegt sich die DIV auch.

Viele Grüße

Alex

#8

Hi Hast du mal geschaut ob jQery vieleicht beim Animate auch eine „height“ attribute für das element setzt?

ich würde mal folgendes probieren:
$("#container").animate(„height“,20).css({„height“:„auto“,„min-height“:„20“})

gruss chris

#9

Rein logisch betrachtet ist der div beim Abbruch ja schon mindestens 20px hoch, um genau zu sein mindestens 75px, weswegen sich da vermutlich wenig tun wird. :wink:
Einfach das height Attribut zusätzlich anpassen nachdem der Text gelöscht wurde…?

Gruß