netsurfer: jQuery addClass - neue Elementabmessungen

Beitrag lesen

@@netsurfer

Gewinnen tue ich dadurch, dass die Höhe des inneren Elements vom Inhalt her dann an die Höhe des äußeren Containers angepasst wird (also kein overflow-y mehr). Die Spaltenbreit entspricht der Breite des äußeren Containers (abzgl. margins). Also anstatt quasi ein "Fenster im Fenster" mit vertikaler Scrollleiste zu haben (das ist die Variante für ohne JS), wird das innere stattdessen in der Höhe angepasst und dafür entsprechend breiter.

Ich verstehe nicht, warum du da mit JavaScript was umschalten willst.

Weil ich das Multicolumn-Layout ja nur dann haben will, wenn

  1. der Inhalt "zu groß" ist, als dass er ohne Überlauf in das äußere Fenster passt
  2. JS aktiviert ist

Du kannst doch einfach Multicolumn-Layout verwenden, indem du column-width setzt, aber nicht column-count. Damit machst du die Spalten so breit wie du sie haben willst und deren Anzahl richtet sich nach dem Inhalt (kann also bei wenig Inhalt auch eine Spalte sein).

Das mache ich ja bereits - nur halt unter den o.g. Voraussetzungen. Denn ohne JS soll das innere Fenster eine vertikale Scrollbar haben.

Beispiel

Gut, ich könnte dann dem inneren Fenster pauschal ein Multicolumn-Layout zuweisen. Per CSS dann als Default mit column-count: 1. Aber was bringt mir das?

Sinn und Zweck ist u.a. keine Scrollbar zu haben, sondern "pagination".

Das überlasse ich dann mal wieder dir.

Danke, nett von dir! ;-) Ich kann das aber auch kurz erklären: Es handelt sich ja quasi um eine "Fenster im Fenster" Geschichte, die möglichst unter allen Anzeigebedingungen/ -konstellationen so benutzerfreundlich wie möglich sein soll. In Desktop Browsern, die eine Scrollbar anzeigen und der Benutzer eine Maus mit Rad verwendet, kann er dann ja (i.d.R.) per Mausrad vertikal scrollen. Problem ist nur, wenn das innere Fenster am oberen oder unteren Rand angekommen ist, scrollt anschließend das gesamte Element im Viewport => sehr unschön. In Mobile Browsern ist meist gar nicht zu erkennen, dass ein Element gescrollt werden kann. In beiden Fällen ist es auch "lästig/ umständlich" den Inhalt genau an die gewünschte Stelle zu scrollen.

Also "übernehme" ich das Scrollen per JS. Und eine Anzeige à la "Seite x/y" sollte auch hinreichend darauf aufmerksam machen, dass es noch mehr Inhalt gibt.

Und eigentlich finde ich das Multicolumn-Layout für diesen Zweck ideal, verteilt es doch automatisch den Inhalt quasi auf die benötigte Anzahl von Seiten (Spalten).

Was "stört" dich denn an dem Ansatz, bzw. anderer Vorschlag?

Die Position des inneren Fensters wird natürlich über left: -xy px (und nicht margin-left) gesteuert (wobei beides "funktioniert") - das noch als Nachtrag zu meinen vorherigen Postings.

Gruß Gunther

PS: Irgendwie verstehe ich die Textformatierung hier nicht. Habe mir die Formatierungshilfe angesehen - nutzt aber auch nichts ...

0 48

jQuery addClass - neue Elementabmessungen

netsurfer
  • css
  • javascript
  • jquery
  1. 0
    Camping_RIDER
    1. 1
      1unitedpower
      1. 0
        netsurfer
        1. 0
          1unitedpower
          1. 0
            netsurfer
            1. 0
              Matthias Apsel
              1. 0
                Gunnar Bittersmann
            2. 0
              Gunnar Bittersmann
              1. 0
                netsurfer
                1. 1
                  Gunnar Bittersmann
                  1. 0
                    netsurfer
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        Gunnar Bittersmann
                      2. 0
                        netsurfer
                        1. 0
                          Gunnar Bittersmann
                          1. 0
                            netsurfer
                          2. 0
                            Gunnar Bittersmann
                            1. 0
                              netsurfer
                            2. 0
                              Gunnar Bittersmann
                              1. 0
                                netsurfer
                                1. 0
                                  Gunnar Bittersmann
                                  1. 0
                                    netsurfer
                                    1. 0
                                      Gunnar Bittersmann
                                      1. 0
                                        netsurfer
                                        1. 0
                                          Gunnar Bittersmann
            3. 0
              1unitedpower
              1. 0
                netsurfer
                1. 0
                  1unitedpower
                  1. 0
                    netsurfer
                    1. 1
                      Camping_RIDER
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          Camping_RIDER
                          1. 0
                            Gunnar Bittersmann
                            1. 0
                              Camping_RIDER
                              1. 0
                                netsurfer
          2. 0
            netsurfer
            1. 0
              Camping_RIDER
              1. 0
                netsurfer
                1. 0
                  1unitedpower
                2. 0
                  unknown
                  1. 0
                    unknown
                    1. 0
                      netsurfer
  2. 0
    Mitleser
  3. 0

    Fiddle jQuery addClass - neue Elementabmessungen

    netsurfer
  4. 0

    [Erledigt] jQuery addClass - neue Elementabmessungen

    netsurfer
    1. 0
      Camping_RIDER
    2. 0
      unknown