netsurfer: jQuery addClass - neue Elementabmessungen

Beitrag lesen

@@netsurfer

Wenn jetzt die Höhe des äußeren Containers (Annahme: 100vh) nicht ausreicht, damit der innere Container (variabele Höhe - abhängig vom Inhalt) vollständig ohne Überlauf aufzunehmen, dann weise ich dem inneren Container per JS eine zusätzliche Klasse im Attribut zu. Dadurch kommt ein Multi-Column Style zur Anwendung, welches den Inhalt halt "automatisch" auf die benötigte Anzahl von Spalten aufteilt.

Was gewinnst du dadurch? Wie breit sind denn die einzelnen Spalten?

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.

(weil overflow: hidden damit keine Scollbar da ist - geblättert wird per margin-left).

Das verstehe ich nicht (vollständig). Das hört sich aber nicht gut an.

Sinn und Zweck ist u.a. keine Scrollbar zu haben, sondern "pagination". Da das ja nur dann zum Einsatz kommt, wenn JS aktiviert ist. Unter dem Fenster gibt es dann entsprechende Buttons zum Blättern ( < Seite 1/3 > ). Tatsächlich "verschoben/ positioniert" wird das innere Fenster dann durch einen entsprechenden Wert für margin-left.

Davon mal abgesehen "funktioniert" das einwandfrei. Nur halt die Geschichte mit der neuen Fenster-/ Containerbreite, wenn der multi-column Style angewendet wird.

Gruß Gunther

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