At the heart of the digitopia.js responsive framework is a simple scheme for attaching javascript controllers to html elements.

In all cases, you will need to include the following JavaScript code to attache and initialize the digitopia.js controller framework. In later examples you will see how to specify configuration options to this call.


The entire framework is now at your disposal.

  1. Define a controller object.
  2. Associate the controller with an html element by specifying the data-jsclass to be the object class hello.

    Once a page is loaded, the framework looks for all elements that have data-jsclass defined and creates an instance of the controller class specified, in this case hello. Once the javascript object is instantiated, the framework calls the start() method which starts the controller's behavior. In this case all we do is move the child element around.

    It is also possible to associate the controller in javascript as a jQuery plugin $(element).hello() but normally this is done in the markup for reasons that will become clear in the HIJAX section.

  3. Working example:
    Hello World
  1. Adding options w/defaults and overrides (code sample)
  2. Associate the controller passing the option via a data tag, like in data-selector=".hello-world"
  3. Working example:
    Hello World

The responsive controller triggers the following events in response to environment changes:

  • DigitopiaDidScroll: Page has scrolled
  • DigitopiaDidResize: Window has changed size

The start() function is called by the framework on completion of the page load. There is also a stop() function which is called just before the page is unloaded. If the element that the controller is associated with is about to go away when the page is unloaded, it allows you the ability to gracefully unhook everything.

  • Listening for events that have been generated using jQuery .on() in the start() method of the controller.

    IMPORTANT Note the definition of the stop() method to allow the controller to clean up after itself before a page change.

    This must be done to allow garbage collection of unused routines and to prevent event handlers that are no longer in scope not to be called once we have moved on to another page.

  • Working example (you can scroll and resize the screen to see it in action)
    Hello World