Responsive Framework, um Media Queries mit JavaScript zu kombinieren

28. Mär 2013

Über die im CSS definierten Media Queries können nun direkt JavaScript-Funktionen aufgerufen werden.

Über die im CSS definierten Media Queries lassen sich nun direkt JavaScript-Funktionen aufrufen, ohne dass diese selbst abgefragt werden müssen.

Media Queries ermöglichen es, CSS-Definitionen abhängig von sichtbare Breiten, Bildschirmgrößen, Auflösungen, Ausrichtung und weiteren Eigenschaften festzulegen. In vielen Fällen genügen diese, um eine Seite responsive zu optimieren.

Sollen weitergehende Anpassungen vorgenommen werden, kann es notwendig sein, hierfür JavaScript zu nutzen. Ein Beispiel ist das Verschieben von Elementen über jQuery. Um nun auf exakt die gleichen Muster, wie sie über CSS3 Media Queries definiert werden zu prüfen, nutzt Weblication eben diese zu Feuern von JavaScript Ereignissen.

Die Vorteile des integrierten Responsive JavaScript Frameworks sind:

  • Keine Anpassung im CSS notwendig, wenn Media Queries über @wCssFragment ausgezeichnet wurden.
  • Media Queries passen immer exakt und müssen nicht in Javascript nachgebildet werden.
  • Die Funktionen werden nicht bei jedem Resize, sondern nur beim Laden der Seite bzw. beim Ändern einer Media Query ausgeführt. 

Im CSS definierte Media Query

/*@wCssFragment{class:mediaquerySize;variant:max540;caption:wenn die Fensterbreite kleiner gleich 540 Pixel ist;caption-en:if window width is equal or less 540 pixel} */
@media only screen and (max-width: 540px){
  ...

Beim Aktivieren bzw. Deaktivieren von Media Queries auszuführende JavaScript Funktionen in der design.js

mediaquery_max540_onactivate = function(){ 
  jQuery('#navigationMeta').insertBefore("#blockBottomInner");
};

mediaquery_max540_ondeactivate = function(){
  jQuery('#navigationMeta').insertBefore("#navigationMain");
};

Wirkt die im Beispiel als Variante max540 ausgezeichnete Media Query über CSS, so wird automatisch die entsprechende Funktion mediaquery_max540_onactivate aufgerufen. Die Variante kann beliebig umbenannt werden, wenn die entsprechende Funktion ebenfalls umbenannt wird.

Wird eine Media Query durch Größenänderung des Fensters oder durch Drehen eines Smartphones nicht mehr aktiv, ruft Weblication die Funktion mediaquery_VARIANT_ondeactivate auf. 

Im obige Beispiel wird die Metanavigation per jQuery in den Fußbereich verschoben, falls der Bildschirm maximal 540 Pixel breit ist. Ändert sich die Breite z.B. durch Drehen eines Pads auf über 540 Pixel, wird die Metanavigation wieder in den Kopfbereich verschoben.

Über dieses Prinzip lassen sich CSS Definitionen um beliebige JavaScript Funktionen erweitern und die responsive Darstellung weiter optimieren.