resizilla

resizilla

A Better Window Resize

Why?

• When the user resizes a range of events are fired when using: window.onresize & window.addEventListener(). Resizilla reduces the frequency of calls using a debounce algorithm for better performance.
• Supports orientation change.
• Built in destroy method that removes eventListeners.
• full control

---

How?

via npm

npm i resizilla --save

yarn add resizilla

---

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)

also

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

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

---

Tested browsers:

• Chrome 14+
• Safari 5.1+
• Firefox 4+
• Opera 10.6+
• IE9+
• Edge
• 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

    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?

To detect changes that occur with elements checkout getComputedStyle, transitionEnd & MutationObserver.

(Original ASCII art by Mozilla, of course)

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

MIT License

Copyright (c) 2017 Julien Etienne