Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 3. Juli 2014

Responsives Webdesign: Per JavaScript auf die Veränderung der Fenstergröße reagieren

Mit Media Queries ist es möglich, dynamisch auf Änderungen von Breite und Höhe des Anzeigebereichs des Browsers zu reagieren. Wird bei Desktopgeräten das Browserfenster verändert oder bei Mobilgeräten zwischen Portrait- und Landscape-Modus gewechselt, können per CSS und Media Queries direkt passende Stylesheets angewendet werden. Mit dem JavaScript-Tool Simple State Manager lässt sich das Verhalten der Media Queries auch per JavaScript regeln. Denn hin und wieder ist es erforderlich, per JavaScript auf Größenänderungen des Anzeigebereichs zu reagieren.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren

simplestatemanager

Anzeige

Das JavaScript Simple State Manager von Jonathan Fielding aus London wurde im Juni 2013 erstmals vorgestellt und kann sich seither einer rasanten Entwicklung erfreuen. In der letzten Woche wurde bereits die Version 2.2.6 des kostenlosen Tools für responsives Webdesign erreicht. Der Simple State Manager (SSM) weist außer JavaScript keine weiteren Abhängigkeiten auf und ist so konzipiert, dass er per einfacher Link-Einbindung oder via Bower voll funktional zur Verfügung steht. Wir zeigen Ihnen die ersten Schritte im praktischen Einsatz.

Simple State Manager: Zustände (States) definieren

Gehen wir davon aus, dass Sie den SSM korrekt in Ihr Dokument eingebunden haben, geht es wie folgt weiter. Zunächst einmal müssen sogenannte „States“ definiert werden. Darin wird die Breite des Anzeigebereichs festgelegt, auf die reagiert werden soll. Hier können Mindest- und Höchstwerte definiert werden. Eine Reaktion auf die Höhe des Anzeigebereichs ist nicht vorgesehen. Allerdings ist die Breite in den meisten Fällen ohnehin die wichtigere Größe, auf die bei responsiven Layouts reagiert wird. Jedem „State“ übergeben wir zudem eine ID sowie eine Funktion, die dann ausgelöst wird, wenn die Bedingungen des „States“ zutreffen.

sssm.addState({
  id: "mobil",
  maxWidth: 320,
  onEnter: function() {
    document.getElementsByTagName("body")[0].style.backgroundColor = "red";
  }
}).ready();

Im Beispiel wird ein „State“ mit der ID „mobil“ erstellt. Die darin definierte Funktion wird dann ausgelöst, wenn die maximale Breite des Browserfensters gößer als 320 Pixel ist. Es wird in diesem Fall die Hintergrundfarbe geändert. Das Besondere ist, dass der „Simple State Manager“ nicht nur beim Laden der Seite einmalig prüft, welche „States“ für den aktuellen Anzeigebereich in Frage kommen. Stattdessen prüft der „Simple State Manager“ stets erneut, wenn sich die Größe des Anzeigebereichs ändert. Im Beispiel bedeutet dies, dass die Funktion immer dann ausgeführt wird, wenn die Breite des Anzeigebereichs kleiner gleich 320 Pixel ist.

Neben der Option „onEnter“, die eine Funktion immer dann auslöst, wenn die „State“-Bedingung erfüllt ist, gibt es als Alternative „onResize“. Hierbei wird die hinterlegte Funktion nur dann aufgerufen, wenn sich die Größe des Anzeigebereichs ändert. Beim Laden der Seite würde mit „onResize“ daher keine Berücksichtigung des „States“ erfolgen.

Mit dem SSM auf mehrere Zustände (States) reagieren

Natürlich ist es möglich, mehrere „States“ zu definieren, um den einzelnen Anforderungen unterschiedlicher Auflösungen und Mobilgeräten gerecht zu werden.

ssm.addStates([
  {
    id: "mobil",
    maxWidth: 320,
    onEnter: function() {
      document.getElementsByTagName("body")[0].style.backgroundColor = "red";
    }
  },
  {
    id: "desktop",
    minWidth: 321,
    onEnter: function() {
      document.getElementsByTagName("body")[0].style.backgroundColor = "green";
    }
  }
]).ready();

Im Beispiel werden zwei verschiedene „States“ definiert, die dafür sorgen, dass bei einer Fensterbreite von mehr als 320 Pixel der Hintergrund grün, bei kleinerer Breite rot eingefärbt wird.

SSM: Debugger als Bookmarklet

Der Funktionsumfang des „Simple State Managers“ beinhaltet weitere Einstellungsmöglichkeiten, die ein umfangreiches Reagieren auf verschiedene Größenzustände ermöglichen. So ist es möglich, „States“ zu löschen und nachträglich zu verändern. Außerdem lässt sich der aktuelle „State“ abfragen.

Um die „States“ testen zu können, gibt es einen eigenen Debugger, der als Bookmarklet aufgerufen werden kann. Er gibt Auskunft über die Anzahl der gesetzten „States“ und alle zugeordneteten Einstellungen und Funktionen. Auf diese Weise erhält man schnell einen Überblick, ob alles korrekt ausgewiesen ist.

SSM: Browsersupport und Plugins

Der Simple State Manager läuft in allen gängigen Browsern und erfordert keine weiteren Bibliotheken wie jQuery oder andere. Der Internet Explorer wird jedoch erst ab Version 7 unterstützt.

Mit Plugins lässt sich der Funktionsumfang noch erweitern. So gibt es beispielsweise eines, das mit dem jQuery-Lightbox-Plugin „Colorbox“ zusammenarbeitet. Dadurch ist es dann möglich, zu steuern, ab welcher Fenstergröße Bilder per „Colorbox“ geladen werden sollen. Der Simple State Manager steht unter der MIT-Lizenz und kann entsprechend kostenlos für private und kommerzielle Zwecke eingesetzt werden. Projektbeteiligung ist erwünscht und wird via Github organisiert.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

6 Kommentare

  1. Mittlerweile gibt es ja auch einige Tools die einen das Arbeiten mit „Responsive JavaScript“ vereinfachen. Ich nutze gerne Require.js und habe das kürzlich in einem Blog-Post kurz vorgestellt: http://www.joocom.de/blog/enquire-js-javascript-per-media-queries-triggern/

  2. Warum sollte man sowas einbinden? Welche Vorteile bringt mir das im Gegensatz zu Media Queries? Bin bisher ohne auch gut ausgekommen.

    Sollte man das Script zusätzlich zu oder anstatt den Media Queries einbinden?

    Danke!

  3. By the way:
    Es gibt auch das adapt.js
    Damit kann man direkt Stylesheets(-Datein!) ab einer bestimmten Browserbreite anzeigen lassen.

    Für manche Projekte (denke ich) sehr gut angebracht.

  4. Hallo,
    Euer Beispiel ist leider nicht ganz glücklich gewählt.
    Von Style/Layout-Dingen sollte man JS so weit es möglich ist raus lassen. Dafür sollten dann doch besser MediaQueries eingesetzt werden.

    Ein sinnvollen Einsatz möchte ich dem Script aber auch nicht absprechen. Um je nach Viewport bestimmte Funktionen und Aktionen in Javascript abzufeuern ist diese Script schon sehr gut zu gebrauchen.

    Gruß
    Jonas

    • Wenn man – warum auch immer – den IE8 noch unterstützen möchte (muss), hat man gar keine andere Wahl, als auf JS zu setzen!
      http://caniuse.com/css-mediaqueries

      • Das man in dem Fall nicht ohne JS auskommt, habe ich so nie behauptet. Meine Aussage war klar auf die Trennung von Layout/Style und Javascript bezogen.

        Sollte der bestimmte Fall eintreten, dass ein Kunde doch mal noch mal für den IE8 optimiert haben möchte, setze ich lieber Lösungen wie Respond.js ein, um dem Browser die Media-Queries „beizubringen“.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.