Question

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.

Answer 1

I’ve discovered that when I embed CSS into the document — everything’s fine. This proves that the problem was my CSS files have not been loaded despite I used $(document).ready() for initializing.

One should use $(window).load() when relying on external resources and willing to measure widths correctly.