dd if=/dev/cdrom of=image.iso

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 all. This has been tested in IE7, but it might also work in IE6.

Edit: I made it clearer that the animation must be a background image and it needs to be set in onsubmit.