Javascript – How to detect when the height of your page changes

csshtmljavascript

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.

Best Solution

I belive this question has already been answered on stackoverflow here: Detect Document Height Change

Basically you have to store the current document height and keep checking for a change via a timeoutcall

The element to watch here is document.body.clientHeight (or in jquery $(document).height() )