-moz-resize event

Question

I have an element that is using -moz-resize CSS style. This style enables resizing of an element with the mouse.

Are there any events that fire when I am resizing an element?

Answer 1

I recently posted an answer on a question that called for the same solution:

Detect if an element has been resized via javascript?

To use the method below for your case, just pass in the element you want to listen for resizes events on and the function you want to call when it happens. It doesn't matter whether or not the element has the CSS resize property on it, this works for any DOM element. One caveat: the element must be able to contain children, else you need to wrap the element in question - like an input or img - and set the listener on that.

WARNING: This is a lot of content for one SO answer, you can read the full post on my blog: http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/

---

HTML

The following HTML block is auto-appended to any element you attach a resize event to. You can only attach resize events to elements that allow children – basically, no elements declared with self-closing tags.

<div class="resize-sensor">
    <div class="resize-overflow"><div></div></div>
    <div class="resize-underflow"><div></div></div>
</div>

CSS

.resize-sensor, .resize-sensor > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

JavaScript Code/Methods

The following is the JavaScript you’ll need to enable resize event listening. The first two functions are prerequisites that are used in the main addResizeListener and removeResizeListener methods. (further details on the addFlowListener method are available in the overflow/underflow event post, as previous mentioned)

function addFlowListener(element, type, fn){
    var flow = type == 'over';
    element.addEventListener('OverflowEvent' in window ? 'overflowchanged' : type + 'flow', function(e){
        if (e.type == (type + 'flow') ||
        ((e.orient == 0 && e.horizontalOverflow == flow) ||
        (e.orient == 1 && e.verticalOverflow == flow) ||
        (e.orient == 2 && e.horizontalOverflow == flow && e.verticalOverflow == flow))) {
            e.flow = type;
            return fn.call(this, e);
        }
    }, false);
};

function fireEvent(element, type, data, options){
    var options = options || {},
        event = document.createEvent('Event');
    event.initEvent(type, 'bubbles' in options ? options.bubbles : true, 'cancelable' in options ? options.cancelable : true);
    for (var z in data) event[z] = data[z];
    element.dispatchEvent(event);
};

function addResizeListener(element, fn){
    var resize = 'onresize' in element;
    if (!resize && !element._resizeSensor) {
        var sensor = element._resizeSensor = document.createElement('div');
            sensor.className = 'resize-sensor';
            sensor.innerHTML = '<div class="resize-overflow"><div></div></div><div class="resize-underflow"><div></div></div>';

        var x = 0, y = 0,
            first = sensor.firstElementChild.firstChild,
            last = sensor.lastElementChild.firstChild,
            matchFlow = function(event){
                var change = false,
                width = element.offsetWidth;
                if (x != width) {
                    first.style.width = width - 1 + 'px';      
                    last.style.width = width + 1 + 'px';
                    change = true;
                    x = width;
                }
                var height = element.offsetHeight;
                if (y != height) {
                    first.style.height = height - 1 + 'px';
                    last.style.height = height + 1 + 'px';      
                    change = true;
                    y = height;
                }
                if (change && event.currentTarget != element) fireEvent(element, 'resize');
            };

        if (getComputedStyle(element).position == 'static'){
            element.style.position = 'relative';
            element._resizeSensor._resetPosition = true;
        }
        addFlowListener(sensor, 'over', matchFlow);
        addFlowListener(sensor, 'under', matchFlow);
        addFlowListener(sensor.firstElementChild, 'over', matchFlow);
        addFlowListener(sensor.lastElementChild, 'under', matchFlow);  
        element.appendChild(sensor);
        matchFlow({});
    }
        var events = element._flowEvents || (element._flowEvents = []);
        if (events.indexOf(fn) == -1) events.push(fn);
        if (!resize) element.addEventListener('resize', fn, false);
        element.onresize = function(e){
            events.forEach(function(fn){
                fn.call(element, e);
            });
        };
};

function removeResizeListener(element, fn){
    var index = element._flowEvents.indexOf(fn);
    if (index > -1) element._flowEvents.splice(index, 1);
    if (!element._flowEvents.length) {
        var sensor = element._resizeSensor;
        if (sensor) {
            element.removeChild(sensor);
            if (sensor._resetPosition) element.style.position = 'static';
            delete element._resizeSensor;
        }
        if ('onresize' in element) element.onresize = null;
        delete element._flowEvents;
    }
    element.removeEventListener('resize', fn);
};

Usage

Here’s a pseudo code usage of this solution:

var myElement = document.getElementById('my_element'),
    myResizeFn = function(){
        /* do something on resize */
    };
addResizeListener(myElement, myResizeFn);
removeResizeListener(myElement, myResizeFn);

Answer 2

https://developer.mozilla.org/en/DOM/element.onresize

Only the window object has an onresize event.

Idea: You could give the item some onClick / onmouseup event, which stores and checks local element width / height. So you could trigger / fire some other events / functions

http://www.w3schools.com/jsref/dom_obj_event.asp