I have an animated gif file that rotates when placed into an img element on a page. However, I want it to be hidden until I click a button on the page (while page is submitted). What I have tried is summarized below. When I click the button it does show
the gif but it is not animated. Also, when the DIV is displayed, the span does not show. How do I get it to spin until the page posts back?
This is a behavior In noticed once in IE (gif animations are stopped when submitting the form). If I remember I fixed that by using a setTimeout that just copy the src attribute to itself which launch again the animation shortly after the postback.
Edit: for the span try perhaps F12 in your browser to see if you don't have some unexpected CSS rules applied to this span.
Member
301 Points
1365 Posts
GIF not animated
Oct 06, 2016 05:30 PM|dlchase|LINK
I have an animated gif file that rotates when placed into an img element on a page. However, I want it to be hidden until I click a button on the page (while page is submitted). What I have tried is summarized below. When I click the button it does show the gif but it is not animated. Also, when the DIV is displayed, the span does not show. How do I get it to spin until the page posts back?
<script type="text/javascript"> function showmsg() { document.getElementById('msgdiv').style.display = 'block'; } </script> <div id="msgdiv" style="color: #FF0000; font-size: 200%; display: none;"> <img id="imgprogress" src="images/loader.gif" alt="please wait ..." /> <br /> <span>Please wait while QB is searched.</span> </div> <asp:Button ID="BtnFindName" runat="server" Text="Find in QB" OnClientClick="showmsg();" />All-Star
42160 Points
14368 Posts
Re: GIF not animated
Oct 06, 2016 06:41 PM|PatriceSc|LINK
Hi,
This is a behavior In noticed once in IE (gif animations are stopped when submitting the form). If I remember I fixed that by using a setTimeout that just copy the src attribute to itself which launch again the animation shortly after the postback.
Edit: for the span try perhaps F12 in your browser to see if you don't have some unexpected CSS rules applied to this span.
Member
301 Points
1365 Posts
Re: GIF not animated
Oct 06, 2016 08:28 PM|dlchase|LINK
Yes, it works great in Chrome.
The span issue went away when I removed the <br /> element above it. Weird! Also, the F12 showed the break as <br><br /> and not sure why.
Star
8311 Points
2502 Posts
Re: GIF not animated
Oct 07, 2016 08:18 AM|Brando ZWZ|LINK
Hi dlchase,
As far as I know, when a postback occurs in Internet Explorer, it stops all animations on the page, as mentioned.
The trick to fixing this is to reload the animated gifs when the postback occurs.
More details, you could refer to follow codes:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> function showmsg() { document.getElementById('msgdiv').style.display = 'block'; document.getElementById('imgprogress').src = '111.gif'; } </script> </head> <body> <form id="form1" runat="server"> <div> <div id="msgdiv" style="color: #FF0000; font-size: 200%; display: none;"> <img id="imgprogress" alt="please wait ..." /> <br /> <span>Please wait while QB is searched.</span> </div> <asp:Button ID="BtnFindName" runat="server" Text="Find in QB" OnClientClick="showmsg();" OnClick="BtnFindName_Click" /> </div> </form> </body> </html>Code-behind:
protected void BtnFindName_Click(object sender, EventArgs e) { System.Threading.Thread.Sleep(5000); }Best Regards,
Brando
Member
301 Points
1365 Posts
Re: GIF not animated
Oct 07, 2016 05:18 PM|dlchase|LINK
Thank you. Worked like a charm!