Measure width() with jQuery after DOM refresh
- by o_O Tync
My script dynamically creates a <ul> width left-floating <li>s inside: it's a paginator. Afterwards, the script measures width of all <li>s and summs them up.
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.
The thing I'm looking for is a way to detect the moment when the <ul> 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 setTimeout(..., 100) but it's ugly and I guess — not a solution at all.
If there's a way to detect width stabilization — I would do the measuring right after it to get the correct values.
HTML code generated by the DOM
<div>
<ul>
<li><a href="...">1</a></li>
<li><a href="...">2</a></li>
....
</ul>
</div>
P.S. Why I need this. My paginator's left-floating <li> items tend to move to the next line when the <ul> tries to become wider than the page itself. Even though most of <li>s are invisible because of parent <div>'s width restriction:
div { width: 500px; overflow: hidden; }
div ul { width: 100%; white-space: nowrap; }
div ul li { display: block; float: left; }
they still go down unless I specify the actual summed width of the <ul> with the script.
