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-width-resize is fired when the window width changes
  • x-window-height-resize is fired when the window height changes
  • x-window-resize is fired when the window size changes in either or both dimensions

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

  1. The current event object.
  2. The current window width in emPixels.
  3. The current text height in pixels.
  4. The current window width in pixels.
  5. The current window height 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.

Known issues

  • All events fire soon after load (only initial-sizes event should fire).This issue resolved in version 0.7

Changelog

  • Version 0.5: Added API bind() function to make it easier to add listeners.
  • Version 0.6: Added support for window height changes
  • Version 0.7: Clean up outstanding bugs (duplicate event firing) and refactor.

Working example

A complete demonstration of the Resize events script is available.

Also, see this script at work powering the Transformer Layout plugin to create a window and text size aware layout.

Download

Resize events is licensed under the The GNU General Public License (GPL), by downloading and/or using it you are agreeing to abide by the terms of that license.

Package

Download the complete Resize events 0.7 example package (.zip)

Individual files

Posted in

Leave a reply