title: Measure width() with jQuery after DOM refresh
body: <p>My script dynamically creates a <code>&lt;ul&gt;</code> width left-floating <code>&lt;li&gt;</code>s inside: it's a paginator. Afterwards, the script measures width of all <code>&lt;li&gt;</code>s and summs them up.</p>
  
  <p>The problem is that after the nodes are injected into the document — the browser refreshed DOM and applies CSS styles which takes a while. It has a negative effect on my script: when these operations are not complete before I measure the width — my script gets a wrong value. If I perform the measure in a second — everything is ok.</p>
  
  <p>The thing I'm looking for is a way to detect the moment when the <code>&lt;ul&gt;</code> is fully drawn, styles applied and the width has stabilizes. Or at least a way to detect every dimensions changes. Of course I can use <code>setTimeout(..., 100)</code> but it's ugly and I guess — not a solution at all.</p>
  
  <p>If there's a way to detect width stabilization — I would do the measuring right after it to get the correct values.</p>
  
  <p><strong>HTML code generated by the DOM</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="..."&gt;1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="..."&gt;2&lt;/a&gt;&lt;/li&gt;
          ....
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>P.S. Why I need this.</strong> My paginator's left-floating <code>&lt;li&gt;</code> items tend to move to the next line when the <code>&lt;ul&gt;</code> tries to become wider than the page itself. Even though most of <code>&lt;li&gt;</code>s are invisible because of parent <code>&lt;div&gt;</code>'s width restriction:</p>
  
  <pre><code>div { width: 500px; overflow: hidden; }
  div ul { width: 100%; white-space: nowrap; }
  div ul li { display: block; float: left; }
  </code></pre>
  
  <p>they still go down unless I specify the actual summed width of the <code>&lt;ul&gt;</code> with the script.</p>