StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow can I run a function as soon as an element has finished rendering?
text
Body
copied!<p>I need to set the height of an element based on the height of another element. Let's say that when that element is finished rendering, it's 490px tall. </p> <p>If I query that other element's height at the beginning of my function inside <code>$(document).ready()</code>, it returns 432px.</p> <p>If I query that other element's height inside a <code>setTimeout(function, 100)</code>, it returns about 475px.</p> <p>If I bump the <code>setTimeout</code> up to 150 or so, the element is finished rendering and I get 190. But obviously I can't count on this.</p> <p>I don't want to wait for the entire page to finish loading, if possible; I want to wait only on this element.</p> <p>It seems like the <code>load</code> event is supposed to work on arbitrary elements, but as far as I can tell that's unimplemented in browsers, or at least in Chrome.</p> <p><strong>EDIT</strong>: The element is not an image and (almost certainly) no images will ever be inside the element. It's just a <code><div></code> with some other <code><div></code>s and <code><p></code>s and things in it. The height is apparently getting queried in the middle of the CSS being applied or something. Code samples forthcoming.</p> <p><strong>EDIT 2</strong>: <a href="http://jsfiddle.net/75th/YsQrd/" rel="nofollow">Here's a fiddle</a> hacked out of my site. (Please forgive the horrid markup; I haven't cleaned up Drupal's output yet.) The fiddle doesn't exhibit the bad behavior I'm trying to correct, though, because the whole snippet gets rendered before the relevant part of the Javascript is run.</p> <p>Is there a way to do this, or am I stuck with <code>window.onload</code>?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload