Question

so suppose that clicking something would lead to a new content being loaded to the screen hence the height of document changes and whereas previously there are no scroll bars, now there actually are scrollbars…

how do I detect something like that happening using jquery

binding resize event onto window only detects window resize whereas binding it into document doesn’t work

Answer 1

Update:
Please don’t use the DOMSubtreeModified event. It is old, deprecated and not well-supported by browsers. In 99,9 % of the cases, there is a different event you can listen on. Most likely you are one of those people using jQuery and doing some AJAX stuff, so please take a look at their AJAX docs.

---

These are all available events. You would have to detect $(document).bind('DOMSubtreeModified', function() { ... }); and check for a dimension change to the previous firing.

var height = $(this).height(),
    width  = $(this).width();
$(document).bind('DOMSubtreeModified', function() {
    if($(this).height() != height || $(this).width() != width) {
        recalibrate();
    }
});

This event is firing every time anything is done to the DOM. Therefore it will slowdown your browser.

We should get a better alternative. Could you please give us more information to your scenario?