11

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.

airportyh
  • 21,948
  • 13
  • 58
  • 72
  • 2
    Possible duplicate of [Detect Document Height Change](http://stackoverflow.com/questions/14866775/detect-document-height-change) – Aziz Mar 07 '16 at 14:33

4 Answers4

2

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

Community
  • 1
  • 1
mikesp
  • 159
  • 6
1

I think you can trap "onresize" events

here is a link to the w3schools.com description

Eric
  • 19,525
  • 19
  • 84
  • 147
  • 7
    That detects change of the viewport, or window size. What I want is the height, or length of the document. – airportyh Dec 11 '08 at 00:17
-1

You can user resize event to trap the change of the size of window using jquery as follows:

$(window).resize(function(){
   // your code to check sizes and take action
  }
);

Alternately you can track the change in document (not tested)

$(document).resize(function(){
   // your code to check sizes and take action
  }
);
-2

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.

ng.mangine
  • 2,947
  • 1
  • 17
  • 7
  • 6
    See the [big red warning here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch)? **"Generally you should avoid using watch() and unwatch() when possible. These two methods are implemented only in Gecko, and they're intended primarily for debugging use. In addition, using watchpoints has a serious negative impact on performance"** – Tomas Jan 18 '14 at 14:27