how to call a function whenever the div increases or decreases in mootools

Question

I have a div(A) which is fixed.The functionality of div is just like post in facebook.If I click on the post the div size increases and show the menu for add link,add photo....If i click on add photo it will upload a pic and the div size again increases.According to my requirement whenever the div(A) height increases then respective margin top of div(B) should increases.I searched for this but i got resize() method in jquery.I should purely use only mootools.Can I get the tuts or snippets example or fiddle for this.Hope i have given clear description.

Answer 1

Here is an example Element resize event you can add in MooTools, quite basic as you only care about height:

Element.Events.resize = {
    onAdd: function(){
        var self = this,
            oh = this.offsetHeight,
            timer;

        timer = setInterval(function(){
            var noh = self.offsetHeight
            if(noh != oh){
                self.fireEvent('resize', oh = noh);
            }
        }, 500);
        this.store('ohtimer', timer);
    },

    onRemove: function(){
        clearTimeout(this.retrieve('ohtimer'));
        this.eliminate('ohtimer');
    }
};

usage in code:

var foo = document.getElement('div.foo');

foo.addEvent('resize', function(offsetHeight){
    console.log('hi', offsetHeight);    
});

setInterval(function(){
    foo.innerHTML += 'hi<br/>there</br/>';
}, 1000);

This is set to check the change every half a second - once again, VERY cpu intensive, causing a reflow, would not recommend using this in production. The fact that you can do it just irrelevant.

http://jsfiddle.net/96SYJ/1/ - this simple demo thing of the above uses 10% cpu of a quad core i7 mac book at 500ms checks, doing 100ms checks causes 35% cpu use (FF 27)

find a different way to lay out your DOM so that the margin between the two divs is constant and flowed by virtue of CSS, not javascript.

a more complex solution and description of the problem by Mozilla's Daniel Buchner: http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/