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.
