How to detect when the height of your page changes?

Question

I have a javascript heavy app which has widgets like autocomplete dropdowns and tabs and so forth. Sometimes when dropdowns appear and disappear, or when you switch between tabs, it changes the height of the document. This can cause annoyances if the scrollbar appears and disappears rapidly, because it shifts the page. I would like to detect when a page changes its height, so I can fix the height to the maximum so far, so that if the scrollbar appears it won't disappear only a second later. Any suggestions?

Update: onresize won't work because that's for changes in the size of the viewport/window - I want changes in the length of the document. I hadn't known about the watch function, looks like it will work at least for FF, but IE doesn't support it.

Answer 1

I think you can trap "onresize" events

here is a link to the w3schools.com description

Answer 2

You can try CSS overflow: scroll (or overflow-x with most browsers) to keep the scrollbar.

Or, you can use clientWidth and clientHeight with Eric's suggestion of onresize.

document.body.clientHeight
document.getElementById('divId').clientHeight

More info and other options at quirksmode.

Answer 3

One idea would be to use the watch() method on the clientHeight property:

document.body.watch("clientHeight", function(property, oldHeight, newHeight) {
  // what you want to do when the height changes
});

The function you specify will get executed whenever the specified property changes. At any point you can use the unwatch() method to get it to stop.

Answer 4

I could not get the watch() method to work. It doesn't seem to be supported in most browsers.