Here’s an HTML and IE issue that I haven't been able to figure out. In a number of my HTML forms I dynamically show and hide elements using the style tags within the JavaScript code:
document.getElementById('MainForm').style.display='none';
document.getElementById('WaitForm').style.display='inline';
This works great, except for an apparent bug in Internet Explorer that doesn’t want to display animated GIF images as animated once the image has been rendered into a container that is not visible.
Here is a a typical scenario: An order submission form when the application goes off to process credit cards and gives the user a 10 second ‘please wait’ interface. THe page starts out displaying the MainForm as visible, then when the order gets submitted it sets the MainForm display to 'none' and the WaitForm to 'inline' or '', which effectively swaps the displays.
It works great EXCEPT that Internet Explorer will not show animated GIF images as animated in the newly made visible panel. I’ve tried a number of approaches around this to force IE to refresh the image but none of them seem to work.
Here's the HTML for the WaitNote panel:
<div id="WaitNote" style="display:none" >
<p> </p>
<table height="300" border="1" cellpadding="25" align="center">
<tr><td valign="center" class="gridalternate">
<p>
<center>
<img id="WaitImage" src="images/pleasewait.gif">
<p>
<p> </p>
<span style="font-size:12pt;font-weight:bold;">
We're processing your credit card.</span><br>
This process may take a few seconds, so please be patient.
</center>
</td></tr></table>
<p>
</div>
Then on the Forms' OnSubmit event this function is called:
function ShowWaitDisplay()
{
document.getElementById('MainForm').style.display='none';
document.getElementById('WaitNote').style.display='inline';
Img = document.getElementById('WaitImage');
Img.style.display="inline";
Img.src = "images/pleasewait.gif";
window.scrollTo(0,0);
return true;
}
As you can see I tried to explicitly reload the image and force the image style to be inline but that didn't help. I’ve also tried to set up the image without a SRC attribute to start with and load it later in the function, but this only causes IE to not display the image at all - it seems the page doesn't refresh.
Anybody know if there’s some way to force IE to refresh the document?
Of course this works just fine in FireFox any way that I try this, but it sure would be nice to get this to work in IE too. If I can’t I’ll have to go and resort to an IFRAME approach, which would make this a bit more complicated and also less browser compatible.
Other Posts you might also like