4

I have a floating div that initially has no content. I use jQuery to append a set of elements to the div, and then immediately call the height method of the original div. The elements I am adding have a defined min-height in the stylesheet, while the floating div does not. The problem is that when I call height on the original div, I get 0.

If I use setTimeout to delay the call for even 1 millisecond, I get the proper height. My theory is that when I call the height method, the browser has not yet finished rendering the change to the DOM, so it hasn't yet set the hei?ht of the top level element. This height will vary, so using a fixed height is out. Does anyone know what might be causing this problem?

Alexander
  • 23,432
  • 11
  • 63
  • 73
tabdulla
  • 505
  • 1
  • 5
  • 14

2 Answers2

0

This should depend on the size of dom. If its large there will be slight delays.

StevenzNPaul
  • 188
  • 12
  • But is there any event that I can bind to, so that I only call methods on the updated div after the DOM has been fully updated? I tried $(document).ready and $(window).load and it didn't help. – tabdulla Apr 05 '12 at 18:17
  • @tabdulla There is no event, however you can use a setTimeout with a very short delay, as you have found out. That's what I would go with. – Kevin B Apr 05 '12 at 18:23
  • Yeah, it just seems sort of hackish, but if that's the way, then I guess I can live with that. – tabdulla Apr 05 '12 at 18:26
0

If nothing works out then you may temporarily want to consider the deferred .then() function. Here s an example using jsFiddle: http://jsfiddle.net/yTTRq/

walmik
  • 1,440
  • 2
  • 13
  • 30
  • This fiddle is wrong, surely? The alert is called immediately. You need to wrap it in an anonymous function. – mxcl Feb 18 '13 at 19:34