Simple State Manager: Responsive Web Design Made Easy

Media queries allow you to react to changes in width and height of the browser's display area. When the browser window is changed on desktop devices, or when a mobile device is changed from portrait to landscape mode, fitting stylesheets can be applied immediately with CSS and media queries. Control the behavior of the media queries via JavaScript using the JavaScript tool Simple State Manager. That's useful, as now and then, it is necessary to react to size changes of the display area via JavaScript. The JavaScript Simple State Manager by Jonathan Fielding from London was first presented in June 2013 and has experienced a rapid development since then. The Simple State Manager (SSM) doesn't have any other dependencies aside from JavaScript and is designed to be fully available with a simple link integration or via a browser.

Simple State Manager: Defining States

Assuming that you've correctly implemented the SSM in your document, this is how we continue. First, so-called "States" need to be defined. Within these states, the width of the display area to which the SSM should react to is determined. Here, define the minimum and maximum values. A reaction to the display area's height is unprovided for. However, most of the time, the width is a more important factor when it comes to responsive layouts anyway. In addition to that, we assign an ID as well as a function that is activated when the state's conditions are met, to each state.

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

In the example, a state with the ID "mobile" is created. The function defined within it is triggered once the maximum size of the browser window is larger than 320 pixels. In this case, the background color is altered. The unique thing about this is that the "Simple State Manager" doesn't only check once which states are appropriate for the current display area. Instead, it rechecks whenever the viewport changes. In the example, this means that the function is executed once the viewport's width is less than or equals 320 pixels. Aside from the option "onEnter" that always triggers a function when the state condition is met, there's the alternative "onResize". Here, the function is only called up when the size of the panel changes. When loading the page with "onResize", the state would not be considered.

Reacting to Multiple States With the SSM

Of course, it is possible to define multiple states to meet the requirements of different resolutions and mobile devices.

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();

In the example, two different states are defined. One that makes sure that the background is green for a window width of over 320 pixels and the other to turn the background red for a lower width.

SSM: Debugger as a Bookmarklet

The "Simple State Manager" scope of functions includes many other options that allow for an extensive reaction to different size situations. This way, it is possible to delete states or alter them at any time. Additionally, you can request the current state. There's a debugger that can be called up as a bookmarklet which allows you to test the states. It informs you about the amount of defined states, as well as all assigned settings and functions. This way, you gain a quick overview on whether everything is labeled correctly or not.

SSM: Browser Support and Plugins

The Simple State Manager runs on all standard browsers and doesn't require any other libraries like jQuery and co. However, the Internet Explorer is only supported from version 7 on up. Extend the scope of functions even further using plugins. For example, there's one that works together with the jQuery lightbox plugin "Colorbox". This enables you to control from which window size images should start being loaded via "Colorbox". The Simple State Manager is distributed under the MIT license and thus, is free to use for private and commercial purposes. Participation in the project is wished-for and organized via Github. (dpe)