Resize events

The Resize events script polls for changes to window size or text size and fires custom events that other scripts can listen for and respond to.

The standard ‘resize’ event fires as the window resize handle is being dragged in some browsers but only as the user drops the resize handle in other browsers. Resize events however, fires the custom events more predictably (as the window resize handle is being dragged) across most browser implementations.

This script is based on the text resize detection work of Lawrence Carvalho. Resize events takes this work further by standardising the custom event names, including support for detecting window resizing consistently between browsers, and introducing the concept of emPixels.

The following events are fired by this script:

• x-initial-size fires as soon as the script is initialised (on DOMReady by default, but can be initialised manually sooner if necessary)
• x-text-resize is fired when the text size changes
• x-window-resize is fired when the window size changes

When the custom events are fired, they are sent along with three parameters:

1. The current window width in emPixels.
2. The current text height in pixels.
3. The current window width in pixels.

Custom unit emPixels (empx)

emPixels is an invented unit of measurement for use on web pages that is independent of text size and zoom level.

This value can be used in making decisions around liquid and elastic layouts, because no matter what the text size or zoom level, an emPixels screen width will always fit a set number of ems.

Note: 1em is not equal to 1empx, but the ratio between them will be consistent independent of text size and zoom level, and this ratio should be roughly consistent between browsers.

Working example

A complete demonstration of the Resize events script is available.

Also, see this script at work controlling Transformer Layout 2.0 (a window and text size aware layout).