jQuery: When to query new outer height after CSS change?

Question

If I do

var theHeight;
element.css('min-height', h);
theHeight = element.outerHeight();

in Chrome I get the old outer height.

I have to do

var theHeight;
element.css('min-height', h);
setTimeout(function() {
  theHeight = element.outerHeight();
}, 1);

instead (or, of course, anything which produces a similar effect) to make outerHeight report the "correct" height (which I expect to be the persisting real height we can see after changing min-height).

Unfortunately, setTimeout is not an option for me. What can I use instead? It should work in all major browsers (current versions).

Answer 1

setTimeout is NOT your best option.

What you want to do is apply some javascript after the DOM has loaded (CSS is applied before document.ready).

You can do easily with JQuery.

$(document).ready(function(){
  modifySomeDomElement();
});

docs here.

I hope this helps,

Rhys