Animated GIF Fix For IE On Form Post

Recently my buddy and I had to figure out a way to get an animated gif (throbber) to animate in IE after the user submitted the form. The problem was that it stopped animating on submission. With a little bit of html, css, and jquery, it was no problem.

Our pop up message is contained in a parent div with an id of ‘throbberMsg’. We use this div as the main hook for our jquery. We then appended a hidden div with an id of ‘pBox’ to the body so that we could show the hidden div and present the message to the user upon submitting the form. The span tag we used to dynamically insert a background image of the rotating gif, which fixes the IE issue for 7 and 8. However, this causes the animated gif to freeze in all other browsers. To get around this we inserted the image back into the span tag and wrote a conditional IE jquery fix to remove the image from the DOM. We also noticed that IE9 behaved the same way as Firefox, Chrome, etc. So what worked for IE7, and IE8 did not work for IE9… go figure. To solve this issue we placed a global variable in a conditional if less than IE9 comment and set the variable value to true. Viola, cross-browser animated goodness.

Global variable: (Must be set before the throbber function is called.)

Here is the end result for the html:

     
          
     
     Now saving your information...

Here is our CSS:

.pBox #throbberMsg span{
     float:left;
     width:16px;
     height:16px;
     margin:0 5px 0 108px;
     display:block;
     background-image:url(/support/images/pages/ajax-throbber.gif) no-repeat top left;
}

Here is the jQuery: (Note that you have to sniff out IE < IE9)

function showpBox()
{ 
     if(LTIE9 = true){ $(‘.pBox #throbberMsg span img’).remove();}
     $(“
“).appendTo(‘body’);
     var throbber = $(‘#throbberMsg’);
     $(‘.pBox’).html(throbber);
     $(‘.pBox #throbberMsg’).show();
     //This line must be ran last.
     $(‘.pBox #throbberMsg span’).css(‘background-image’,’url(/support/images/pages/ajax-throbber.gif)’);
}