SmartyShark: Menü aufklappen

Hallo Leute,

folgende Frage :

Es ist mir klar, das mit style="display:none", z.B. eine Tabelle invisible ist. Und dann kann man diese ändern auf style="display:block".

Ich würde aber gerne den Effekt haben, das die Untertabelle die auf "display:block" gesetzt wird, langsam aufgebaut wird. Also ich meine
nicht setTimeOut() für eine Verzögerung.

Sondern wirklich eine langsam aufbauende fließende Tabelle, die nach unten sich aufbaut. Ich habe mal sowas gesehen.

Ist das möglich mit CSS, oder war das Flash was ich gesehen habe.

Was glauben die Kenner hier ??

Gruss
SmartyShark

  1. Ist das möglich mit CSS, oder war das Flash was ich gesehen habe.

    Nein. CSS erlaubt kein zeitversetztes Anwenden von Regeln, sondern hat zeitlich gesehen "absolute" Gültigkeit (ich hoffe, man versteht, was ich sagen will).
    Vermutlich war das Javascript mit entsprechender timeout-Funktion.

    Gruß, Volker

    1. Ist das möglich mit CSS, oder war das Flash was ich gesehen habe.

      Nein. CSS erlaubt kein zeitversetztes Anwenden von Regeln, sondern hat zeitlich gesehen "absolute" Gültigkeit (ich hoffe, man versteht, was ich sagen will).
      Vermutlich war das Javascript mit entsprechender timeout-Funktion.

      Gruß, Volker

      Timeout würde heißen, der Prozess wartet eine Zeit ab und dann
      wird weiter gemacht.

      Also das was ich mal gesehen habe im Internet, war eine Untertabelle
      die fließend (Smooth) also sich fortlaufend nach unten aufgebaut hatte.

      Das ist irgendein Effekt.

      Weiß keiner bescheid ?

      Gruss
      Smartyshark

      1. hi,

        Timeout würde heißen, der Prozess wartet eine Zeit ab und dann
        wird weiter gemacht.

        Gut erkannt.

        Also das was ich mal gesehen habe im Internet, war eine Untertabelle
        die fließend (Smooth) also sich fortlaufend nach unten aufgebaut hatte.

        Das ist irgendein Effekt.

        Ja, es könnte eine per Javascript zeitverzögert geänderte CSS-Eigenschaft sein - bspw. die Höhe oder Position.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Hallo wahsaga,

          Das ist irgendein Effekt.

          Ja, es könnte eine per Javascript zeitverzögert geänderte CSS-Eigenschaft sein - bspw. die Höhe oder Position.

          Eher unwahrscheinlich: das geht doch einfacher mit CSS: Dass eine Tabelle erst dann sichtbar wird, wenn sie vollständig geladen ist, ist ja nur der Fall, wenn man ihr nicht die CSS-Eigenschaft table-layout:fixed gibt. Ansonsten baut sie sich Zelle für Zelle auf, da, wenn man die Breiten der Spalten vordefiniert, es ja auch nicht mehr vom Inhalt deren einzelner Zellen abhängt, wie breit sie werden, was der Browser ansonsten erst nach der letzten Tabellenzelle berechnen könnte.

          Gruß Gernot

          1. Hallo an alle,

            danke soweit für alle Antworten...

            Es ist ja so bei table-layout :
            --------------------------------

            auto
            ----
            Der Inhalt der Zellen beeinflußt die Breite der Zellen und somit der Tabellen. Deshalb muß die Tabelle zunächst vollständig eingelesen werden, so daß der Aufbau der Tabelle langsamer ist als bei table-layout:fixed;. Dafür wird die Tabelle verbreitert, wenn der Inhalt nicht in die Zelle paßt.

            fixed
            -----
            Das Layout der Tabelle wird aus den Werten der Tabellen-, Spalten-, und Rahmenbreiten sowie den Zellabständen errechnet. Da die Breite bereits in der ersten Zeile festgelegt ist, wird die Tabelle vom Browser schneller gerendert als bei table-layout:auto; und der Zelleninhalt wird evtl. abgeschnitten, wenn er nicht in die angegebene Breite passt.

            QUELLE [www.css4you.de]

            Das bedeuted mit "auto" wird die Tabelle tatsächlich langsamer aufgebaut. Man lernt nie aus :-)
            Dennoch suche ich nach einer Art z.B. table-layout:1500ms;.
            Die Tabelle soll schön aufbauend fließend nach unten aufgebaut werden, aber nicht abgehackt!!!! Also es soll nicht so sein, das
            z.B. nach 50ms die erste Tabellenzeile aufgebaut ist. Sondern innerhalb dieser 50ms soll jeder pixelzeile aufgebaut werden. Also wie gesagt fließend, sieht am Ende dann wie eine Animation aus.

            Ideen ?

            Gruss
            SmartyShark

            1. Hallo SmartyShark,

              Die Tabelle soll schön aufbauend fließend nach unten aufgebaut werden, aber nicht abgehackt!!!! Also es soll nicht so sein, das
              z.B. nach 50ms die erste Tabellenzeile aufgebaut ist. Sondern innerhalb dieser 50ms soll jeder pixelzeile aufgebaut werden. Also wie gesagt fließend, sieht am Ende dann wie eine Animation aus.

              Ideen ?

              Klar, lass die Tabelle mit table-layout:auto (brauchst du nicht anzugeben, ist ja Default) in einem DIV-Element overflow:hidden laden und starte direkt hinter diesem DIV-Element in einem SCRIPT-Bereich im Quellcode eine Javascript-Funktion, das dieses DIV-Element zuerst auf height:1px setzt und setze dann in einer sich in einem Timeout immer wieder selbst aufrufenden Funktion die Height solange stückweise herauf, bis sie der offsetHeight des enthaltenen TABLE-Kindelements entspricht.

              Gruß Gernot

              1. Hallo nochmal,

                ich hatte da mal ein Beispiel mit aufklappbaren Tabellen gebastelt, die sich allerdings nicht von selbst öffnen; dazu muss man erst auf den Link in der jeweils obersten Zeile klicken:

                http://www.lernspielwiese.de/klapptabelle/klapp.html

                Gruß Gernot

                1. Hallo Gernot!

                  http://www.lernspielwiese.de/klapptabelle/klapp.html

                  Mir zittern noch die Augen. Nein, nicht wegen der Tabellen, sondern wegen der Farbwahl...

                  "Hier" rot auf grünem Balken... iiih ;)

                  Viele Grüße aus Frankfurt/Main,
                  Patrick

                  --

                  _ - jenseits vom delirium - _
                  <hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>
                  Nichts ist unmöglich? Doch!
                  1. Hallo Patrick,

                    http://www.lernspielwiese.de/klapptabelle/klapp.html

                    Mir zittern noch die Augen. Nein, nicht wegen der Tabellen, sondern wegen der Farbwahl...

                    "Hier" rot auf grünem Balken... iiih ;)

                    Hier habe ich diese dégoûtante Farbkombination mal umgedreht.

                    Gruß Gernot

                    1. Hallo Gernot!

                      Hier habe ich diese dégoûtante Farbkombination mal umgedreht.

                      Hatte ich auch gesehen, grün auf rot schockiert meine Augen allerdings nicht so sehr, wie rot auf grün.

                      Magst Du solche Farbkombinationen? ;)

                      Viele Grüße aus Frankfurt/Main,
                      Patrick

                      --

                      _ - jenseits vom delirium - _
                      <hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>
                      Nichts ist unmöglich? Doch!
                      1. Hallo Patrick,

                        Hier habe ich diese dégoûtante Farbkombination mal umgedreht.

                        Hatte ich auch gesehen, grün auf rot schockiert meine Augen allerdings nicht so sehr, wie rot auf grün.

                        Magst Du solche Farbkombinationen? ;)

                        Bei dem ersten Beispiel (Klapptabelle) habe ich mir darum gar keine großen Gedanken gemacht, bei dem zweiten (Menü) wollte ich etwas Fleischiges mit etwas Grünem garnieren, der Vollwertigkeit wegen.

                        Gruß Gernot