Databases
StackOverflow2013
Postsdbo
POMeasure width() with jQuery after DOM refresh
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMeasure width() with jQuery after DOM refresh
    text
    copied!<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>
 

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