HTML5 Tutorial:
When producing content for responsive web design it may be useful to switch content to a different layout or use different resources for different screen sizes rather than simply let the same content resize. For example, on some screen widths text might become too small (or too large) to read comfortably, or an image may not be clear enough.
Opus lets you set different page sizes for different chapters and you can use different maximum and minimum sizes for each chapter. This allows you to design specific content for different devices as long as you know what device your content is being shown on. This section of the tutorial provides one example of how you can use javascript to update variables in your publication
There are a number of ways to establish what device is viewing your HTML page but many designers use the width of the screen or the current widht of the browser window to give them an indication of the device being used. This has the additional advantage of resizing content when the browser is resized even if it is being viewed on a desktop. You can monitor the width of the current browser by accessing the property of the browser window.innerWidth. A simple javascript function can store this in a variable which can then be used to update a variable in your Opus publication in the example below we have added the variable ScreenWidth to our Opus publication and the javascript function updates this. Note that we need to use _DWPub. at the beginning to tell the javscript that the variable is a property of an Opus publication.
To ensure the javascript function gets called each time the window is resized we add an event listener to the HTML page as well as our javascript function. As the name suggest, an event listener listens for an event and then triggers an action when that event occurs. In our example we add an eventListener to the window which looks for the resize event and then call our DW_getDevice function.
The width of the screen can be taken to be an indication of the device being used to view it - mobile, tablet or desktop and our function includes a test to see if the screen width is
Furthermore, we have added a variable to our Opus publication called userDevice which the javascript function updates with a device category according to the screen width.
All we need to do now is setup an action in our Opus publication which uses a timer trigger to check whether the userDevice variable has changed and Show and Hide different pages (from different chapters and therefore different sizes) as appropriate. Note that the Variable Changed trigger does not work in HTML5 so we use timer trigger to poll for changes to the variable.
We have provided this script and a sample publication as a free download and you can find the files, and additional instructions on our Opus Xtras page.
creating responsive content in Opus Creator and Opus Pro