Windows® 8.1 Apps with HTML5 and JavaScript Unleashed

Using the window resize Event

As an alternative to using media queries to detect changes in app width or orientation, you can use JavaScript to detect these changes. The window resize event is raised whenever the size or the orientation of your app changes.

For example, the JavaScript file in Listing 11.4 displays a DIV element named sidebar whenever the width of the app is greater than 600 pixels or the app is in landscape orientation.

LISTING 11.4 Handling the window resize Event (resize\resize.js)

Click here to view code image

(function () {    "use strict";    function resize() {        var width = document.documentElement.offsetWidth;        var isLandscape = window.innerWidth > window.innerHeight;        if (isLandscape && width > 600) ...