Rollo ausfahren - ähnlich drop down

[Kalle_B]

Hallöle,

möchte einen Text und / oder Bild durch Klick aus- und wieder einrollen. Also wie ein Rollo, das man herunterzieht und dann sehen kann, was draufsteht.

------------------------   ------------------------
( Thema 1                ) ( Thema 2                )
 ------------------------   ------------------------
                           | Hier Text, nachdem auf |
                           | die Überschrift ge-    |
                           | klickt wurde.          |
                           |                        |
                           | Dieser Text kann höher |
                           | sein als das Window.   |

Eine Lösung mit CSS in Form eines Drop- Down Menüs habe ich schon verworfen. Erstens ist das Menue SOFORT da und rollt nicht aus, zweitens ist es sofort wieder weg, wenn die Maus benutzt wird um die Anzeige zu scrollen.

Idee:
Ich stelle das div sichtbar dar. Ohne Javascript sind alle Texte und Bilder zu sehen. Mit Javascript wird ein CSS- Eintrag mit negativem margin-top erzeugt, das Rollo ist eingerollt.

Bei Klick wird der negative margin-top nach und nach auf 0 (Null) gefahren. Das div fährt aus.

Problem:
Das eingerollte div ist in seinem Versteck sichtbar. Ein display:none hilft auch nicht, dann kann es ja beim Ausrollen nicht gesehen werden.

Hat jemand eine Idee oder Link auf ein Muster?

Lieben Gruss, Kalle

[wahsaga]

hi,

Ich stelle das div sichtbar dar. Ohne Javascript sind alle Texte und Bilder zu sehen. Mit Javascript wird ein CSS- Eintrag mit negativem margin-top erzeugt, das Rollo ist eingerollt.

Bei Klick wird der negative margin-top nach und nach auf 0 (Null) gefahren. Das div fährt aus.

Problem:
Das eingerollte div ist in seinem Versteck sichtbar. Ein display:none hilft auch nicht, dann kann es ja beim Ausrollen nicht gesehen werden.

Packe den Inhalt in eine weiteres Element, welchem du height:0 und overflow:hidden verpasst - und erhöhe dann die Höhe dieses Elements schrittweise. Wie weit du gehen musst, sagt dir die offsetHeight-Eigenschaft des inneren Containers.

So wird aber der obere Teil des Inhaltes zuerst sichtbar, und dann "größer". Wenn der untere Bereich zuerst sichtbar sein soll, dann positioniere den inneren Container absolute am bottom des äußeren.

gruß,
wahsaga

[Gernot Back]

Hallo wahsaga,

So wird aber der obere Teil des Inhaltes zuerst sichtbar, und dann "größer". Wenn der untere Bereich zuerst sichtbar sein soll, dann positioniere den inneren Container absolute am bottom des äußeren.

Wegen irgend eines irren Browsers (Netscape7?) hatte ich diesen Ansatz verworfen und bin dann doch zu absoluter Positionierung von Top aus übergegangen:

http://www.sprachlernspiele.de/selftests/klapptabelle/klapp.html

Gruß Gernot

[Richard]

Hallo Kalle_B,

Problem:
Das eingerollte div ist in seinem Versteck sichtbar. Ein display:none hilft auch nicht, dann kann es ja beim Ausrollen nicht gesehen werden.

Dann machst du es beim Ausrollen eben sichtbar. Oder verstehe ich da was falsch?

Beste Grüße
Richard

[Kalle_B]

Hallo Richard,

Dann machst du es beim Ausrollen eben sichtbar. Oder verstehe ich da was falsch?

Wann? Wenn es halb ausgerollt ist, wird die obere Hälfte auch sichtbar, die eigentlich noch "auf der Rolle", also im Versteck ist.

Kalle

[Richard]

Hallo Kalle_B,

Wann? Wenn es halb ausgerollt ist, wird die obere Hälfte auch sichtbar, die eigentlich noch "auf der Rolle", also im Versteck ist.

Dann musst du, wie von wahsaga vorgeschlagen, die Höhe nach und nach verändern.

Beste Grüße
Richard