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-sizefires as soon as the script is initialised (on DOMReady by default, but can be initialised manually sooner if necessary)
x-text-resizeis fired when the text size changes
x-window-width-resizeis fired when the window width changes
x-window-height-resizeis fired when the window height changes
x-window-resizeis fired when the window size changes in either or both dimensions
When the custom events are fired, they are sent along with three parameters:
- The current event object.
- The current window width in emPixels.
- The current text height in pixels.
- The current window width in pixels.
- 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.
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.
All events fire soon after load (only
initial-sizesevent should fire).
- 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.
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.
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.
Download the complete Resize events 0.7 example package (.zip)