2

I am appending div1 into div2 and then getting the height() of div2. If I wait 50ms before calling height() I get a different height. It seems like I am getting the height before the browser finishes rendering div1. Anyone have an idea as to how I can fix this. I am adding quite a few elements and need to check the height after every one, so having a delay between each seems like it could add up to quite the delay.

$(div2).append(div1);
console.log(div2.height()) // 295

where as...

$(div2).append(div1);
window.setTimeout(function(){
    console.log(div2.height()) // 245
},50)
jfriend00
  • 683,504
  • 96
  • 985
  • 979
Andrew Sellenrick
  • 996
  • 1
  • 6
  • 8
  • Possible duplicate of http://stackoverflow.com/questions/19737762/how-to-determine-when-a-browser-has-finished-painting-an-inserted-element – Stephen Thomas Jan 22 '14 at 16:58
  • i have the same issue with a game, you need to put a delay on load/documentready. – ZiTAL Jan 22 '14 at 16:58
  • You need to wait for the elements to finish loading, OR you need to find why their height is not determined beforehand. In the case of font rendering (like Typekit or Google Fonts) not much can be done but wait. In the case of your content, you can set height values to and other elements so the browser knows their dimensions before painting the dom. – Patrick Moore Jan 22 '14 at 16:59
  • These elements are being added after the document.ready – Andrew Sellenrick Jan 22 '14 at 16:59
  • The delay works but it seems to be a "magic" number. Anything under 50ms wont work. I'm afraid that on other machines the number may be even larger. – Andrew Sellenrick Jan 22 '14 at 17:01
  • As an example, what type of content fills div1? – Patrick Moore Jan 22 '14 at 17:01
  • It depends on the complexity of your pages, but I did a lot of experimentation based on the duplicate question cited in the first comment. In some cases I found the required delay to be over a second! See if you can add some innocuous style to the elements you're inserting and then poll for that style. – Stephen Thomas Jan 22 '14 at 17:03
  • Are there images in these elements ? – adeneo Jan 22 '14 at 17:04
  • @SetSailMedia this is the element.
    Menu Item5.99

    Menu item description. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.

     – Andrew Sellenrick Jan 22 '14 at 17:07
  • @StephenThomas - how does it help to cite a possible duplicate question that has no good answer associated with it? – jfriend00 Jan 22 '14 at 17:10
  • because there is a lot of discussion on the duplicate question. no need to repeat it here – Stephen Thomas Jan 22 '14 at 17:11

2 Answers2

1

There are certain properties you can request that will force a layout. For example, if you request any of these properties:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight
  • scrollTop/Left/Width/Height
  • clientTop/Left/Width/Height

the browser will layout that element before returning the value. If you have a complicated layout, you may need to request properties on more than one object to get proper layout of several items.

See this answer and this article for more details and working demos of the concept.

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
0

put your code inside 

$( document ).ready(function() {
 // your code
});

it will work

mm-user
  • 36
  • 2