Resizer

Detect element resize event like any other event

This script uses a technique based on a Back Alley Coder strategy. It uses a hidden object to detect the resize event.

Installing and importing

Install:

bower install alefwmm/Resizer --save

Import (you may import the script twice, no problems at all):

<script type=”text/javascript” src=”path/to/bower_components/Resizer/dist/Resizer.min.js”></script>

Using HTML Import:

<link rel=”import” src=”path/to/bower_components/Resizer/Resizer.html” />

See the demo.

Adding resize event callbacks

Simple as follow:

<div id=”box” class=”box red”></div>

.box {
    width: 200px;
    height: 200px;
}

.box:HOVER {
    width: 300px;
    height: 300px;
}

.red-box {
    background: #F00;
}

.blue-box: {
    background: #00F;
}

var box = document.getElementById(“box”);

//Adding anonymous callback
Resizer.add(box, function () {
    box.className = “blue-box”;
});

Same functions do not get attached twice.

Removing callbacks

Using the previous code:

var box = document.getElementById(“box”);

var f = function () {
    box.className = ”blue-box”;
}
// Adding
Resizer.add(box, f);

//Removing
Resizer.rm(box, f);

Other details

Shadow DOM support: currently experimental