StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJavaScript changes to style being delayed
text
Body
copied!<p>I'm running into a little problem that's driving me crazy, and I'd welcome any thoughts as to the cause. At this point I feel like I'm just going 'round in circles.</p> <p>I have the following code:</p> <pre><code>function JSsortTable(phase) { dynaLoadingDivShow(); createSortArray(); dataArr = do2DArraySort(dataArr, orderList, orderDir); sortArrayToRs(); dynaListTable.tableControl.refreshTableViaObjects(rsDynaList, colObjs); dynaLoadingDivHide(); } function dynaLoadingDivShow() { document.getElementById('dynaReportGuiWorking').style.display = 'block'; document.getElementById('dynaReportGuiWorking').style.visibility = 'visible'; } function dynaLoadingDivHide() { document.getElementById('dynaReportGuiWorking').style.display = 'none'; document.getElementById('dynaReportGuiWorking').style.visibility = 'hidden'; } </code></pre> <hr > <pre><code><div style="visibility:hidden; display:none; z-index:25;" class="tableControlHeader" id="dynaReportGuiWorking"> Working... </div> </code></pre> <p>I call JSsortTable as an onclick event. When I run the above code as is, I never see the div in question. The JSsortTable function takes some 800-2500 ms to run so it's highly unlikely I just missed it the 10+ times I tried. If I change the style of the div to start out visible, then it will remain visible until after JSsortTable has finished running and then disappear; exactly as expected. So I figured the problem was in dynaLoadingDivShow.</p> <p>Now, I tried removing dynaLoadingDivHide to see what would happen and found something completely unexpected. The div will not appear when you the JSsortTable function fires. Instead, after all the other code has been run, when JSsortTable finishes, the div becomes visible. It's alomst as though IE (version 8) is saving up all the changes to the DOM and then waiting until the end to paint them. This is, obviously, not the desired behavior.</p> <p>Anyone have any thoughts on this? I'm only allowed to have IE at work so I haven't tried this on other browsers. I have enough CSS/JS knowledge to be dangerous, but am by no means an expert yet. ;)</p> <p>Thanks!</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