Skip to content
marraskuu 9, 2007 / Jussi

Animated GIFs, submitting and IE

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.

2 kommenttia

Jätä kommentti
  1. Jesse / Aug 20 2009 4:38 pm

    I tried this exactly as stated but it doesn’t seem to work.
    The image doesn’t animate in IE7.
    Firefox3 is ok.

  2. cityhunter / Sep 16 2009 5:05 pm

    thnx for this solution.
    it works very fine in both IE et FF.

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out / Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out / Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out / Muuta )

Google+ photo

Olet kommentoimassa Google+ -tilin nimissä. Log Out / Muuta )

Muodostetaan yhteyttä palveluun %s

%d bloggers like this: