resizilla

   *** Important API Changes***

For:

• resizilla.js
• resizilla.es.js

version 0.7+ requires the Request-frame or an alternative requestAnimationFrame & cancelAnimationFrame polyfill.

If you need to use both Request-frame and Resizilla check out [4d](https://github.com/envidia/4d) which includes both libraries and weighs under 2kB gzipped.

• 4d

• requestFrame

  For:

  • resizilla.polyfilljs
  • resizilla.polyfill.es.js

These distributions include the Request-frame polyfill.

resizilla

A Better Window Resize

Why?

• When the user resizes a range of events are fired when using: window.onresize & window.addEventListener(). Resizilla allows you to reduce and control the frequency of calls using a debounce algorithm. TLDR It performs better.
• Resizilla uses the next available animation frame ( requestAnimationFrame ) rather than setTimeout for better optimization.
• Support for orientation change.
• AMD compliant.
• Built in destroy method.

---

How?

via npm

npm i resizilla --save

via bower

bower i resizilla

via src

---

Usage:

resizilla(handler, delay, incept);

• handler: Function to execute on resize
• delay: Delay of the function call in ms on resize
• incept: If true the function call at the beginning of the detection period, if false the call will be at the end of the detection period (false by default)

or

resizilla({ handler: Function, delay: Milliseconds, incept: Boolean, orientationChange: Boolean, useCapture: Boolean });

• useCapture: Register the event handler for the capturing/ bubbling phase.
• orientationChange: See below...

For general use, use a moderate delay e.g. incept: 200

---

Tested browsers:

Chrome 14+	Safari 5.1+	Firefox 4+	Opera 10.6+	IE9+	Edge	IE8
✓	✓	✓	✓	✓	✓	✗

| iPhone 3GS+| iPad 2+ | Android 2.2+ | Windows Phone 8.1+ | |:-----------|:------------|:------------|:------------|:------------|:------------|:------------| |✓ |✓|✓|✓|

---

Mobile:

By default, resizilla calls the handler when the "orientationchange" event is fired. This can be disabled using

resizilla({ handler: () => { // do something }, delay: 250, incept: true, orientationChange: false });

---

Destroy:

Remove the event listener by using the below:

resizilla.destroy(event);

• Leave empty or use "all" to destroy both events,
• Pass "resize" or "orientationchange" to kill those specific events.

---

The example:

The current example only needs to reveal the transition of the debounce to satisfy as working.

So no element resize support?

Nope, and with good reason. Elements resize detection is a different paradigm, to detect changes that occur with elements checkout getComputedStyle, transitionEnd & MutationObserver.

(Original ASCII art by Mozilla)

Big thanks to BrowsreStack for sponsoring this project via cross browser testing.

MIT License

Copyright (c) 2015 Julien Etienne