Search code examples
javascriptjqueryhtmlcssmootools

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


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.


Solution

  • 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/