Listen for event when web page height is changed?

Question

Is there a way to run some code every time the web page height is changed via JavaScript? (The web page height itself, not the browser height.) I would prefer not to use jQuery if at all possible. If that's not possible, would there be another way to accomplish the following?

I am animating the height change of a div located at the bottom of the page, triggered by the user clicking a button. I want the page to remain scrolled to the bottom of the page while this is occurring. I figured I could listen for a height change event and update the scroll position each time, then it would be smooth. My current approach is to wait until the animation is completed and then scroll to the bottom, but this has no animation effects and is obviously delayed until after the entire height is updated.

Current code:
JS:

var myDiv = document.querySelector("#myDiv");
var activeClass = "activeDiv";
if (myDiv.className == activeClass) {
    myDiv.className = "";
}
else {
    myDiv.className = activeClass;
    setTimeout("window.scrollTo(0,document.body.scrollHeight)", 150);
 }

CSS:

#myDiv {
    max-height: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.activeDiv {
    max-height: 500px !important;
}

do you have some code? also what affects the height of the div (if not browser height change)? A response of AJAX call? — Ejaz, May 07 '14 at 18:16
In general, events are not triggered when changes are made by Javascript, only when they're made by user interaction. — Barmar, May 07 '14 at 18:17
You can use `setInterval` to check the height periodically, and see if it has changed. — Barmar, May 07 '14 at 18:17
Check this http://stackoverflow.com/questions/14866775/detect-document-height-change if manual checking is acceptable after every x seconds — hgazibara, May 07 '14 at 18:18
you could subscribe to dom mutation events, and check height after each firing if you didn't want to poll or patch each content entry point. — dandavis, May 07 '14 at 18:23
Added code @Ejay. Running code every x seconds is not preferred. I'd rather have no animation than run code extremely frequently (to make it smooth). — Jordan H, May 07 '14 at 18:24
I think you should not use CSS and javascript animation to achieve a single effect (in this context). You could use javascript setInterval/requestAnimationFrame to increase height of the div (if you know the final height) and in the mean time keep scrolling to bottom — Ejaz, May 07 '14 at 18:29
Can you recreate your problem with [JSFIDDLE](http://jsfiddle.net/)? — Givi, May 07 '14 at 18:31
@Ejay it is more complex since height will be dynamic - that's the reason I change max-height instead of just height. — Jordan H, May 07 '14 at 18:31
Play with [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries) & [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver), and if you can't achieve desired result, then edit existing question or ask another. — Givi, May 07 '14 at 18:44

score 0 · Answer 1 · edited May 23 '17 at 12:20

You may want to check out this previous post: Detect Document Height Change

I see 2 solutions in there for you. The accepted answer shows you how to check the document height. This can be called every time that you have make an ajax call that would cause the document height to change. The other option on that post is to use setInterval(). And basically you could use the same/similar function and just have it checked every x seconds.

score 0 · Accepted Answer · answered May 07 '14 at 18:47

I was overthinking it. I implemented the desired behavior by simply updating the scroll position very frequently while the animation was occurring, then stopped updating once it completes. It's not the cleanest code nor is the animation buttery smooth (notably smoother on Safari than Chrome), but it's much better than no animation.

I simply replaced the code in the else statement with this:

legal.className = activeClass;
var timer = setInterval(function() { window.scrollTo(0,document.body.scrollHeight) }, 5);
setTimeout(function() { clearInterval(timer) }, 500);

Listen for event when web page height is changed?

2 Answers2