I’ve run into a roadblock I just can’t seem to get past. I’m developing a website for work (internal) and I have a lot of javascript calculations going on when someone enters data. What I want to do is to have a div apear when it begins calculating and goes away when it ends. I’m using:
// CSS code
div.loading-invisible{ display: none; }
div.loading-visible { display: block; … various formatting here … }
// Javascript
function calculate(evalForm) {
document.getElementById(“loading”).className = “loading-visible”;
… calculations …
document.getElementById(“loading”).className = “loading-invisible”;
}
// HTML code
< div id=“loading” class=“loading-invisible”>
<p><img src=“spinner.gif” /> Calculating… </p>
</div>
…
<div class=“question”> option < input type=“checkbox” name=“choice” onclick=“calculate(this.form);” /> </div>
Something like that. It works great in firefox. The div display appropriately, calculates, then disappears when it’s finished. However, in IE it seems to want to calculate everything before anything is displayed. I placed alerts in the code to be able to pause it mid way and it worked. But without alerts it just hangs while everything is being calculated and the code for the loading screen just seems to cancel itself out. I attempted to put some waits in the code such as:
setTimeout(“newFunctionForCalc()”,1250);
and
while (document.getElementById(“loading”).className != “loading-visible”) {}
still no dice in IE, but works flawless in firefox.
Any advice?