beatovich: window.matchMedia('(min-width: 40em)').matches

hallo

Ich experimentiere gerade mit

window.matchMedia('(min-width: 40em)').matches && ...

Ziel ist ein Hamburger-Popup-Navigation nur für mobiles.

Ich frage mich jetzt, wie ich den guten Umschaltpunkt festlege. Die obige Angabe ist etwas adhoc.

Im Effekt sollen Anwender meiner Klapper-Logic eine Horizontalnavigation zu einer Vertikalen Listennavigation umbauen können falls die Klasse mobileTrue vorliegt.

Wo/wie legt ihr selber Knackpunkte fest

Wie fange ich am besten Browser ab, die window.matchMedia nicht kennen?

if(window.matchMedia){
   ...
}

so?

--
Neu im Forum! Signaturen kann man ausblenden!
  1. @@beatovich

    Ziel ist ein Hamburger-Popup-Navigation nur für mobiles.

    Woher kommt dieser Wunsch, die Navigation auf Mobilgeräten unbedingt hinter einem Hamburger-Icon verstecken zu müssen?

    Ich frage mich jetzt, wie ich den guten Umschaltpunkt festlege.

    Der hängt vom Inhalt ab.

    Mit JavaScript hast du die Möglichkeit, die vom Menü benötigte Breite auszulesen und darauf zu reagieren, wenn diese die Viewport-Breite überschreitet.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. hallo

      @@beatovich

      Ziel ist ein Hamburger-Popup-Navigation nur für mobiles.

      Woher kommt dieser Wunsch, die Navigation auf Mobilgeräten unbedingt hinter einem Hamburger-Icon verstecken zu müssen?

      Frag das jene die das anwenden, und es sind viele. Tatsächlich möchte ich im Klapperwerk Wünschen nachkommen.

      Ich frage mich jetzt, wie ich den guten Umschaltpunkt festlege.

      Der hängt vom Inhalt ab.

      Das denke ich nicht. Hier gehts primär um das Setzen einer Klasse mobileTrue, auf die der CSS Autor dann seinerseits reagieren kann.

      Mit JavaScript hast du die Möglichkeit, die vom Menü benötigte Breite auszulesen und darauf zu reagieren, wenn diese die Viewport-Breite überschreitet.

      Ich kann den Platzbedarf von flexiblem Inhalt nicht auswerten. Ich erhalte durchgehend 0/undefined bei clientWidth oder getComputedStyle

      --
      Neu im Forum! Signaturen kann man ausblenden!
      1. @@beatovich

        Ich kann den Platzbedarf von flexiblem Inhalt nicht auswerten. Ich erhalte durchgehend 0/undefined bei clientWidth oder getComputedStyle

        offsetWidth sollte das richtige sein. Beispiel

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. hallo

          Ich kann den Platzbedarf von flexiblem Inhalt nicht auswerten. Ich erhalte durchgehend 0/undefined bei clientWidth oder getComputedStyle

          offsetWidth sollte das richtige sein. Beispiel

          Das Container-Element ist in meinem Fall ein Element mit display:flex, oder was immer der Anwender definiert. Ich kann mich nicht auf solch klare Fälle wie in deinem Beispiel verlassen, denn deines bedingt ja auch zuerst, dass du jegliches Umbrechen verhinderst.

          --
          Neu im Forum! Signaturen kann man ausblenden!
  2. Hallo Beat,

    warum machst du die Art der Navigation vom Gerätetyp abhängig. Ich würde da nur prüfen, ob die Navigation passt. Wenn du den Platzbedarfs kennst, verwende ihn, sonst musst du, wie Gunnar schon schrieb, den Platzbedarfs erst ermitteln.

    Die Unterscheidung zwischen Mobil- und anderem Gerät ist nicht nötig. Z.B. bleibt meine Navigation auf Tablets breit, kann aber auf dem Laptop bei kleinen Viewport eingeklappt sein.

    Da ich ein Freund von fixen Menüs bin, prüfe ich auch noch die Viewporthöhe.

    Gruß
    Jürgen

    1. hallo

      warum machst du die Art der Navigation vom Gerätetyp abhängig. Ich würde da nur prüfen, ob die Navigation passt. Wenn du den Platzbedarfs kennst, verwende ihn, sonst musst du, wie Gunnar schon schrieb, den Platzbedarfs erst ermitteln.

      Wie ich schon schrieb erhalte ich keine sinnvolle Angabe, weil tadaa, die enthaltenen Sachen schon flexibel sind.

      Die Unterscheidung zwischen Mobil- und anderem Gerät ist nicht nötig. Z.B. bleibt meine Navigation auf Tablets breit, kann aber auf dem Laptop bei kleinen Viewport eingeklappt sein.

      Es handelt sich nicht um eine Geräte-Unterscheidung sondern um eine Viewport-Unterscheidung.

      Habe die entsprechende Klasse auch schon zu ifSmallScreen umgeschreiben

      Es macht nun mal Sinn auf kleinen Bildschirmen bestimmte Dinge erst mal eingeklappt zu präsentieren. Da es diese Mechanismus auf grossen Bildschrirmen aber nicht braucht, muss automatisch eine JS Lösung her.

      Was der Inhalt der Box ist, ist erst mal egal. Es kann auch eine Navigation sein.

      Die Frage ist deshalb, wenn wir ziwschen kleinen und grossen Viewports unterscheiden sollen, was ist ein geeigneter Splitpunkt.

      Ich habe hier mal eine em Angabe gewählt.

      Ich werde später eine aktuelle Version der Klapper-Logik hochladen. Da wird's dann auch einen Usecase geben.

      --
      Neu im Forum! Signaturen kann man ausblenden!
      1. Hallo Beat,

        ich mache die Unterscheidung Groß/Klein vom Inhalt abhängig. Bei einer alten Version meiner Navigation habe ich sie per JS kurz aufgeklappt, vermessen, den Platzbedarf mit der Viewportgröße verglichen und dann entschieden, wie ich sie behandle.

        Gruß
        Jürgen

        1. hallo

          Ich habe mal meine Klapperlogic neu hochgeladen.

          https://beat-stoecklin.ch/klapperlogic.html

          Safari für iOS wird wohl nicht auf matchMedia ansprechen.

          Das CSS ist ziemlich stereotyp gehalten. Es geht ja darum, erst mal mit einem Minimum an Aufwand die Funktionalität zu demonstrieren.

          Den Breakpoint wird man dann individuell einstellen können, je nach Bedarf.

          --
          Neu im Forum! Signaturen kann man ausblenden!
          1. Hallo beatovich,

            https://beat-stoecklin.ch/klapperlogic.html

            Kommentare innerhalb von Tags sind nicht erlaubt. Aber ich wüsste auch nicht, wie man das sonst darstellen könnte.

            Bis demnächst
            Matthias

            --
            Rosen sind rot.
            1. hallo

              https://beat-stoecklin.ch/klapperlogic.html

              Kommentare innerhalb von Tags sind nicht erlaubt. Aber ich wüsste auch nicht, wie man das sonst darstellen könnte.

              Ich nehme an, du beziehst dich auf die allgemeine Syntax.

              Ja das ist schwierig und ich lasse mich da gerne beraten, wie man Code-Beispiele verständlicher strukturiert.

              --
              Neu im Forum! Signaturen kann man ausblenden!
              1. Hallo beatovich,

                https://beat-stoecklin.ch/klapperlogic.html

                Kommentare innerhalb von Tags sind nicht erlaubt. Aber ich wüsste auch nicht, wie man das sonst darstellen könnte.

                Ich nehme an, du beziehst dich auf die allgemeine Syntax.

                Genau.

                Ja das ist schwierig und ich lasse mich da gerne beraten, wie man Code-Beispiele verständlicher strukturiert.

                Ja, das ist schwierig.

                Bis demnächst
                Matthias

                --
                Rosen sind rot.