0

Could someone tell me how could I create a function which would initate after outer height has changed?

$("#some_id").bind("outerHeight().change", function () {
   do something
});

or 

$("#someid").outerHeight().change(call some function);

Thank you.

Novice
  • 145
  • 2
  • 2
  • 9
  • When the outerHeight is getting changed? Is it on page load or someother page action/event? Based on that only you can trigger a function. Else need to use setInterval to monitor the change in value. – mohamedrias Apr 15 '15 at 14:42
  • I don't think there's anything you can bind to that will know when the height changes. You likely want to add the function to whatever is changing the height. So if you're adding more content, after add check height, or if you're resizing with resizable plugin, use the callback. – Syon Apr 15 '15 at 14:43
  • It gets changed during someother event, not on page load. – Novice Apr 15 '15 at 14:45

1 Answers1

0

Custom events are the only i that i know of that can achieve this. can get a little messy though.

https://jsfiddle.net/1rnjkrdk/1/

$('div').on('resize', function(){
    if( $('div').outerHeight() >= 70  ){
        $('div').addClass('blueBorder');
    }
});

setTimeout(function(){
    $('div').animate({
        height:  '75px'
    },{
        duration: 1000,
        complete: function(){
            $('div').trigger('resize');
        }
    });
}, 3000);

Have you target listening to a particular event, then trigger said event on the target when you are ready.