0

I have an animated gif in the master page which will load whenever user clicks certain buttons. The gif displays but doesn't animate in IE. I have added the class of hide(ZURB) to div and show and hide the div based on this class(addClass/removeClass Jquery).

NOTE: The gif animates, if I use hide() and show() methods in Jquery and remove the zurb css class '.hide' that I have added.

I want to set the visibility of the div to hidden in the master page and then toggle it in only few child pages. How can I achieve this?

CSS:

#loading{position:fixed;top:0px;right:0px;width:100%;height:100%;background-color:#666;background-image:url('ajax-loader.gif'); background-repeat:no-repeat;background-position:center;z-index:10000000;  opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */}

HTML Master Page:

  <div id="loading" runat="server" class="hide"></div>

Jquery in child page:

 $("#<%=Master.FindControl("loading").ClientID %>").removeClass("hide");

CSS of hide (Zurb):

.hide {
  display: none !important;
}
Vahi
  • 605
  • 1
  • 8
  • 17

2 Answers2

1

You need to re-render img onclick. Try something like that

function showProgress() {
        var pb = document.getElementById("progressBar");
        pb.innerHTML = '<img src="./progress-bar.gif" width="200" height ="40"/>';
        pb.style.display = '';
    }

and in your html:

<input type="button" value="button" onclick="showProgress()" />
<div id="progressBar" style="display: none;">
    <img src="./progress-bar.gif" width="200" height ="40"/>
</div>

See similar post here

Community
  • 1
  • 1
Shahdat
  • 5,343
  • 4
  • 37
  • 37
1

This is a known IE limitation. you can load and set display:none; Then you can set visibility true when user click certain button. Two helpful link: Animated GIF in IE stopping And IE7/IE8 and frozen animated gifs

Community
  • 1
  • 1
Masoud
  • 1,343
  • 8
  • 25