jQuery.width() & DOM refresh
Posted
by o_O Tync
on Stack Overflow
See other posts from Stack Overflow
or by o_O Tync
Published on 2010-06-11T03:08:48Z
Indexed on
2010/06/11
3:12 UTC
Read the original article
Hit count: 621
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.
If there's a way to detect width stabilization — I would do the measuring right after it to get the correct values.
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.
© Stack Overflow or respective owner