how to detect document size change in jquery

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

Here is the solution.

// ajdust margins when page size changes (ie rotate mobile device)
$(window).resize(function() {
  // Do something more useful
  console.log('doc height is ' + $(window).height());
});

Answer 2

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?

Answer 3

You could try a percentage scrolled event like this one: http://www.jquery4u.com/snippets/jquery-detect-scrolled-page/

You might need to add a check to see whether the vertical scrollbar is present:

var hasVScroll = document.body.scrollHeight > document.body.clientHeight;