Question

I have a JavaScript code that adds new XHTML to already existing page (DOM tree).
My page elements are dynamic, so adding new elements causes changes in other elements size. I have a custom scroll bar implementation that depends on those sizes and needs to be reset every time they change.

I call the reset method shortly after the statement that inserts the new XHTML. But it seems that this is too soon. Sometimes the scrollbar does not adjust properly. If I add some delay before reset, it is OK, but I consider it too crude and unreliable solution.

I need to either:

Detect when given DOM element completes change of size

or

Detect when the entire DOM change finishes along with the re-layout.

So far I could not find nothing. I know the situation is too complex for most people, but I hope somebody will be able to help. Thanks!

Answer 1

How about some polling where you check the state of the dom? This is with jQuery and will call resetMyScrollbar whenever the html in the page body updates with a maximum half second delay.

var lastDom = "";
function checkDomHash() {
  var newDom = $("body").html();
  if (newDom != lastDom) {
    resetMyScrollbar();
  }
  window.setTimeout(checkDomHash, 500);
}

In real life I’d use a hash function and compare hashes as comparing huge strings is wasteful.

var lastDomHash = "";
...
  var newDomHash = md5OrWhatever($("body").html());
  ...

Edit

Or you could check the height of whatever the scroll bar is for.

var lastHeight = 0;
...
  var newHeight = $("#my_element_id").outerHeight();
  ...