nicht angemeldet
DIV Inhalt oben abschneiden
Matthias Apsel
Gunnar BittersmannIch habe folgendes Problem. Bei einem Layout soll ein DIV sich per Javascript (Scriptaculous) auf 0px Höhe zusammen schieben. Dazu hat das DIV ein overflow:hidden erhalten. Soweit funktioniert das auch tadellos. Nur soll der Inhalt nicht oben stehen bleibt, sondern beim zusammen schieben des DIV am unteren DIV Rand "kleben" bleibt und sich nach oben zusammen schieben.
Dazu finde ich einfach keine Lösung. Hat jemand eine Idee, wie das gelöst werden könnte?
-
Om nah hoo pez nyeetz, David!
Nur soll der Inhalt nicht oben stehen bleibt, sondern beim zusammen schieben des DIV am unteren DIV Rand "kleben" bleibt und sich nach oben zusammen schieben.
Ist irgendwie komisch deutsch.
Du willst also festlegen, welcher Teil des Inhalts während der Animation zu sehen ist?
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, David!
Nur soll der Inhalt nicht oben stehen bleibt, sondern beim zusammen schieben des DIV am unteren DIV Rand "kleben" bleibt und sich nach oben zusammen schieben.
Ist irgendwie komisch deutsch.
Du willst also festlegen, welcher Teil des Inhalts während der Animation zu sehen ist?
Matthias
Sozusagen ja.
Es soll nachher so aussehen, als würde der Inhalt noch oben in ein "Behälter" eingezogen werden. Problem dabei ist, das sich der Inhalt im DIV ja nach unten ausbreitet. Entsprechend bewirkt das overflow, das alles was während der Animation (die Höhe des DIV wird verringert bis es eine Höhe von 0px hat) zu viel ist unten abgeschnitten wird. Ohne Animation wäre das auch völlig egal. Nur mit Animation ist das ganze dann etwas realitätsfremd.Hoffe das es etwas deutlicher geworden ist.
-
Om nah hoo pez nyeetz, David!
Es soll nachher so aussehen, als würde der Inhalt noch oben in ein "Behälter" eingezogen werden.
Hast du versucht, ein negatives margin-top zu animieren?
Matthias
--
1/z ist kein Blatt Papier.
-
Ok. Das war etwas schwer zu verstehen.
Ist das ein Ansatz:
<!DOCTYPE html>
<html>
<head>
<title>toggle</title>
<style type="text/css">div#dasIsses div.derWrapper {
height:0px;
overflow:hidden;
transition:height 2s;
-moz-transition:height 2s; /* Firefox 4 */
-webkit-transition:height 2s; /* Safari and Chrome */
-o-transition:height 2s; /* Opera */
}div#dasIsses:hover div.derWrapper {
height:11.5em;
}</style>
</head>
<body><div style="position:absolute;top:0;height:200px;left:100px;width:600px;background-color:#0000ff;z-index:99"> </div>
<div id="dasIsses" style="position:absolute; top:200px; left:100px; width:600px;background-color:#ddf; border:1 px solid black">
<div class="derWrapper">
<div style="position:absolute; bottom:1.3em;overflow:hidden">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div style="font-weight:bold">
Lari Fari Fidebus!
</div>
</div>
</body>
</html>Muss natürlich noch verfeinert werden...
-
@ Jörg Reinholz
Die Animation ist nicht das Problem. Das Problem ist die Verhaltensweise des Inhalts beim Zusammenschieben.
@Matthias Apsel
negatives margin-top bewirkt zwar das der Inhalt in dem DIV unten kleben bleibt, allerdinsg nur solange sich die Höhe nicht ändert. Dadurch wandert der DIV nur nach oben. Er muss sich aber zwingend in der Höhe zusammen schieben, da er sich sonst über andere Inhalte schiebt und diese verdeckt.
Die Animation an sich läuft mit diesem Javascript Abschnitt:
new Effect.Parallel([ new Effect.Morph($("content_scroll"), { sync: true, style: 'height:0px;' }) /* weitere Effekte für andere Bereiche der Seite*/ ], { duration: 1.0, delay: 0.0 });Der DIV ist wie folgt formatiert:
margin:0 20px 0 20px; padding:10px; overflow:hidden;Soweit alles sehr einfach gehalten und funktionsfähig (wenn Scriptaculous verwendet wird).
Der DIV ist ganz normal in anderen DIVs verschachtelt ohne dabei eine absolute oder relative Position zu erhalten.Danke für eure Hilfe. Wie ich finde ist das eine ordentliche Nuss die es zu kancken gibt (wenn technisch möglich).
-
Om nah hoo pez nyeetz, David!
Er muss sich aber zwingend in der Höhe zusammen schieben, da er sich sonst über andere Inhalte schiebt und diese verdeckt.
Sorg dafür, dass das entsprechende Div-Element _unter_ den anderen ist (z-index). z-index wirkt nur auf Elemente, deren position-Wert verschieden von static ist.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, David!
Er muss sich aber zwingend in der Höhe zusammen schieben, da er sich sonst über andere Inhalte schiebt und diese verdeckt.
Sorg dafür, dass das entsprechende Div-Element _unter_ den anderen ist (z-index). z-index wirkt nur auf Elemente, deren position-Wert verschieden von static ist.
Matthias
Ist leider nicht möglich. Die Elemente wo sich das DIV drunter schieben müsste, sind halbtransparent. Sonst wäre das eine funktionierende Lösung.
-
Om nah hoo pez nyeetz, David!
Ist leider nicht möglich. Die Elemente wo sich das DIV drunter schieben müsste, sind halbtransparent. Sonst wäre das eine funktionierende Lösung.
animiere zusätzlich opacity.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, David!
Ist leider nicht möglich. Die Elemente wo sich das DIV drunter schieben müsste, sind halbtransparent. Sonst wäre das eine funktionierende Lösung.
animiere zusätzlich opacity.
Matthias
Das wirkt leider nicht, wenn der DIV transparent wird, während er sich unter die halbtransparenten Inhalte der andern Container schiebt.
-
Om nah hoo pez nyeetz, David!
<div>
<div a>
<div b>
</div>Animiere die Höhe oder margin-top von div b.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, David!
<div>
<div a>
<div b>
</div>Animiere die Höhe oder margin-top von div b.
Matthias
Was war ich wieder blind. Die Lösung ist so einfach, wenn man sich Scriptaculous näher ansieht.
Der Effect SlideUp (den ich schon mal probiert habe) macht genau das was ich suche, wenn man ihn richtig anwendet. Die Lösung siht jetzt wie folgt aus:Javascript:
new Effect.Parallel([ new Effect.SlideDown($("content_scroll"), { sync: true }) ], { duration: 1.0, delay: 0.0 });CSS ist so geblieben:
margin:0 20px 0 20px; padding:10px; overflow:hidden;Wichtig, damit der Inhalt nach oben geschoben wird ist, das um den Inhalt ein weiterer DIV gelegt wird (innerhalb des DIV, welches den Effect zugewiesen wird).
Ich danke euch für eurer Bemühungen. Das hat mir trotzdem geholfen.
-
@@David:
nuqneH
Was war ich wieder blind. Die Lösung ist so einfach, wenn man sich Scriptaculous näher ansieht.
Der Effect SlideUp […]Am Ende ist dann doch die Katze tot. Schade eigentlich.
Mit JavaScript gebastelete Transitions können ruckeln, CSS-Transitions flutschen.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@David:
nuqneH
Was war ich wieder blind. Die Lösung ist so einfach, wenn man sich Scriptaculous näher ansieht.
Der Effect SlideUp […]Am Ende ist dann doch die Katze tot. Schade eigentlich.
Mit JavaScript gebastelete Transitions können ruckeln, CSS-Transitions flutschen.
Qapla'
Das stimmt. Das kann und wird Ruckeln (je nach PC und Auslastung dessen).
Da ich keine Ahnung habe, wie ich bei Klick auf einen Button oder Link per CSS die Formatierung veränder, muss es erst mal so bleiben. Hover etc. fällt dabei ja aus. Aber eventuell hast du da ja einen Denkansatz für mich.
Das was Scriptaculous da schafft, müsste dann ja auch noch rein mit CSS gelöst werden können.-
Om nah hoo pez nyeetz, David!
Da ich keine Ahnung habe, wie ich bei Klick auf einen Button oder Link per CSS die Formatierung veränder, muss es erst mal so bleiben. Hover etc. fällt dabei ja aus. Aber eventuell hast du da ja einen Denkansatz für mich.
Ändere mit JS die Klassenzugehörigkeit des entsprechenden Elementes.
Das was Scriptaculous da schafft, müsste dann ja auch noch rein mit CSS gelöst werden können.
Dafür hast du mehrere zielführende Ansätze bekommen.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Dazu finde ich einfach keine Lösung. Hat jemand eine Idee, wie das gelöst werden könnte?
Ja, doof kann man sein. Ideen muss man haben.
<!DOCTYPE html> <html> <head> <title>toggle</title> <style type="text/css"> div#dasIsses div.derWrapper { display:none; } div#dasIsses:hover div.derWrapper { display:block; } </style> </head> <body> <div id="dasIsses" style="position:absolute; top:200px; left:100px; width:600px;background-color:#ddf; border:1 px solid black"> <div class="derWrapper" > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et e rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div> <div style="font-weight:bold"> Lari Fari Fidebus! </div> </div> </body> </html>-
<!DOCTYPE html> <html> <head> <title>toggle</title> <style type="text/css"> div#dasIsses div.derWrapper { height:0px; overflow:hidden; transition:height .2s; -moz-transition:height .2s; /* Firefox 4 */ -webkit-transition:height .2s; /* Safari and Chrome */ -o-transition:height .2s; /* Opera */ } div#dasIsses:hover div.derWrapper { height:11em; //auto geht leider nicht } </style> </head> <body> <div id="dasIsses" style="position:absolute; top:200px; left:100px; width:600px;background-color:#ddf; border:1 px solid black"> <div class="derWrapper" > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div> <div style="font-weight:bold"> Lari Fari Fidebus! </div> </div> </body> </html>-
@@Jörg Reinholz:
nuqneH
transition:height .2s;
-moz-transition:height .2s; /* Firefox 4 */
-webkit-transition:height .2s; /* Safari and Chrome */
-o-transition:height .2s; /* Opera */Die präfixfreie Eigenschaft sollte immer zuletzt stehen, damit diese wirkt, wenn ein Browser das Feature mit und ohne Präfix unterstützt. Aus demselben Grund sollte -webkit- zuerst stehen, damit die Eigenschaft mit dem richtigen browserspezifischen Präfix wirkt, wenn ein Nicht-Webkit den -webkit-Präfix und seinen eigenen unterstützt.
Firefox 4?? Prust. Firefox unterstützt transition seit 16.0 präfixfrei; also kaum ein Grund, -moz- noch zu verwenden.
Das sollte also eher so aussehen:
{ -webkit-transition: height .2s; -o-transition: height .2s; transition: height .2s; }height:11em; //auto geht leider nicht
Deshalb bietet es an, transition nicht auf height, sondern auf max-height anzuwenden. Das Zuklappen ist etwas problematischer als das Aufklappen. http://forum.de.selfhtml.org/archiv/2012/7/t210463/#m1434719 ff.
<div id="dasIsses" style="position:absolute; top:200px; left:100px; width:600px;background-color:#ddf; border:1 px solid black">
Was bitte soll das denn?? Ab ins Stylesheet mit den Angaben, nicht inline.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-