Today I attempted to get a progress indicator to work in IE7. My idea was that I’d have an animated GIF on a page, hidden with style=”display: none;”. Then, in the onclick event I’d toggle it visible again using JavaScript, so that the progress indicator would animate as the page was submitted and the next page was loading.
Surprise, surprise, it didn’t work. IE simply refused to animate the GIF when the form was submitted. I googled and googled with no avail – until I ran into a simple and working solution. I won’t present the non-working ones here, they can be found with any relevant keywords.
The working one is the following in its entirety: Use a div to display the indicator as a background image. In addition to toggling display, also toggle visibilty.
In my HTML, I have two divs, one with an id of Indicator, and in it another one with id image and some text. The JavaScript goes as follows.
1. First, in the function called from the onload event of body I hide the outer div:
document.getElementById(‘Indicator’).style.display = ‘none’;
document.getElementById(‘Indicator’).style.visibility = ‘hidden’;
2. Then, in the function called from the onsubmit event of the button input in the form, I show the outer div and set the background image for the inner one:
document.getElementById(‘Indicator’).style.display = ‘block’;
document.getElementById(‘Indicator’).style.visibility = ‘visible’;
document.getElementById(‘image’).style.backgroundImage = ‘url(indicator.gif)’;
That’s it!
I have tested this in IE7, but it might also work in IE6.
Jeff
January 18, 2009 at 11:03 pm
I have been searching for a long time, but cannot find a working solution for this issue.
Your code will allow the user to see the hidden div’s if JavaScript support is disabled in their browser and I could not get the background image to display even after correcting the placement of the quotation marks in the last line of code.
brod
March 5, 2009 at 10:28 pm
This is a neat way to get around this IE7 bug, compatible with Firefox, Safari, etc. and it works for IE6 as well.
It’s worth noting that if, to take your example, “image” had it’s background set to “indicator.gif” in the stylesheet, it works if you reset it with JS to “indicator.gif”, but it you set it in JS to something else, say “new_indicator.gif”, then it stops working. Best not to set the background at all in the stylesheet (even if you will then be forever worried that if somebody does set the stylesheet, your code will stop working with IE6 and IE7 again).
pepe
April 14, 2009 at 8:19 am
a solution for ie6 ie7 and firefox 3… but with this, chrome and safari wont display the animated gif…. guess that we can’t have everything
wojtuch
June 18, 2009 at 3:37 pm
This works for ancient ie5 as well.
Liad
November 19, 2009 at 10:44 am
If I understand correctly, you are just refreshing the animated gif image inside the div.
This does not really solves the problem, since the image is usually in a hidden div in order to display it faster when necessary and not re-load it every time from the server when there’s a need to display it…