Matthias Scharwies: JS + CSS: Use Case für clientWidth und getBoundingClientRect()

SELF-Forum

JS + CSS: Use Case für clientWidth und getBoundingClientRect()

Matthias Scharwies E-Mail-Adresse des Autors (Versionen)
– Informationen zu den Bewertungsregeln

Guten Morgen!

Wir haben ja schon einige Beispiele für die Ermittlung von Elementgrößen mit JS.

Aber alle - auch der Grundlagen-Artikel Determining the dimensions of elements stellen eigentlich nur vor, wie's geht, nicht, wann und wo man es einsetzen sollte.

Habt ihr ein Praxisbeispiel, wo man so etwas anwenden kann?

[EDIT] Evtl. in Verbindung mit Lazy Loading - Einschweben von Bildern[1] [/EDIT]

Und eines für matchMedia?

Vielen Dank im Voraus!

Herzliche Grüße

Matthias Scharwies

--
Die Signatur findet sich auf der Rückseite des Beitrags.

  1. https://toruskit.com/blog/how-to-get-element-bounds-without-reflow/ ↩︎

Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. JS + CSS: Use Case für clientWidth und getBoundingClientRect()

    JürgenB Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Matthias,

    ich messe bei meinem Navigationsmenü, ob es noch einzeilig auf die Seite passt, oder ob ich das Hamburgericon zeige.

    Gruß
    Jürgen

    Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. JS + CSS: Use Case für clientWidth und getBoundingClientRect()

      Matthias Scharwies E-Mail-Adresse des Autors
      – Informationen zu den Bewertungsregeln

      Servus!

      Hallo Matthias,

      ich messe bei meinem Navigationsmenü, ob es noch einzeilig auf die Seite passt, oder ob ich das Hamburgericon zeige.

      Danke, dass kann man ja vorher nicht messen und als magic number in die media query schreiben, da es von den Benutzereinstellungen (font und Schriftgröße) abhängt!

      Herzliche Grüße

      Matthias Scharwies

      --
      Die Signatur findet sich auf der Rückseite des Beitrags.
      Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. JS + CSS: Use Case für clientWidth und getBoundingClientRect()

        Rolf B
        – Informationen zu den Bewertungsregeln

        Hallo Matthias Scharwies,

        https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details#weicher_.C3.9Cbergang

        Rolf

        --
        sumpsi - posui - obstruxi
        Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. JS + CSS: Use Case für clientWidth und getBoundingClientRect()

        JürgenB Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo,

        ja, kann man, bzw. muss man, auch bei jeder Änderung, und immer so großzügig, das es auch bei beliebigem Zoomfaktor auf allen Browsern noch passt. Problem waren bei mir die Defaultmargins und -paddings, die ich immer mit berücksichtigen musste. Und was ist mit Userstyles?

        Gruß
        Jürgen

        Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. JS + CSS: Use Case für clientWidth und getBoundingClientRect()

      Matthias Scharwies E-Mail-Adresse des Autors
      – Informationen zu den Bewertungsregeln

      Servus!

      Hallo Matthias,

      ich messe bei meinem Navigationsmenü, ob es noch einzeilig auf die Seite passt, oder ob ich das Hamburgericon zeige.

      Ich hab' grad im Wiki noch ein Beispiel mit einem Hintergrundvideo gefunden!

      Was es nicht alles gibt! 😉

      Herzliche Grüße

      Matthias Scharwies

      --
      Die Signatur findet sich auf der Rückseite des Beitrags.
      Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. JS + CSS: Use Case für clientWidth und getBoundingClientRect()

    Gunnar Bittersmann E-Mail-Adresse des Autors Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Matthias Scharwies

    Wir haben ja schon einige Beispiele für die Ermittlung von Elementgrößen mit JS. […] Habt ihr ein Praxisbeispiel, wo man so etwas anwenden kann?

    Nicht „kann“, sondern eher „muss“: bei sticky headers, deren Höhe variiert.

    Kwakoni Yiquan

    --
    Ad astra per aspera
    Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. JS + CSS: Use Case für clientWidth und getBoundingClientRect()

      Matthias Scharwies E-Mail-Adresse des Autors
      – Informationen zu den Bewertungsregeln

      Servus!

      @@Matthias Scharwies

      Wir haben ja schon einige Beispiele für die Ermittlung von Elementgrößen mit JS. […] Habt ihr ein Praxisbeispiel, wo man so etwas anwenden kann?

      Nicht „kann“, sondern eher „muss“: bei sticky headers, deren Höhe variiert.

      Danke, gutes Beispiel!

      Herzliche Grüße

      Matthias Scharwies

      --
      Die Signatur findet sich auf der Rückseite des Beitrags.
      Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
      –
      Informationen zu den Bewertungsregeln