Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to detect when the height of your page changes?

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.

like image 433
airportyh Avatar asked Dec 11 '08 00:12

airportyh


2 Answers

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() )

like image 161
mikesp Avatar answered Oct 05 '22 15:10

mikesp


I think you can trap "onresize" events

here is a link to the w3schools.com description

like image 27
Eric Avatar answered Oct 05 '22 14:10

Eric