Resizing events

Window resize event

Listening to window.resize events can be cumbersome, because it is trigerred many times when resizing the window, which results in a huge work load for the website. Some older browsers even trigger this event multiple times for each resizing...

To make working with this event easier, the template does all the work of listening and smoothing the event, and send 2 custom events:

normalized-preresize

This is mostly an internal event, designed for respond.js. It fires before the template does all the work required in case of window resizing.

normalized-resize

This is the event you should use when listening to window.resize. It is sent once every 40ms each time the window is resized, and only once media queries have been applied.

These events are also trigerred when the user tilts a mobile device (event 'orientationchange').

To use them, listen on the window element:

$(window).on('normalized-resize', function(event) { ... });

Element resize event

Aside from window resizing, the template also provides a way to watch an element and send custom events when its size changes. Several element size events are available:

sizechange

This event is fired each time one or both dimensions of an element change

widthchange

This event is fired each time the width of an element changes

heightchange

This event is fired each time the height of an element changes

scrollsizechange

This event is fired each time one or both scroll sizes of an element change (listen to scrollWidth and scrollHeight)

To use them, you may either use jQuery bind methods:

$(selector).on('sizechange', function(event) { ... });

Or use the helper methods (there is one for each event type):

$(selector).sizechange(function(event) { ... });