-
Mar 1st, 2012, 10:31 AM
#1
Thread Starter
Frenzied Member
[RESOLVED] Disable Form showing animated GIF
Hi,
I have the following code at the bottom of my master page:-
Code:
<div id="overlay">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Disable.gif" style="width: 100%; height:100%; opacity:0.6;filter:alpha(opacity=60)"/>
<div id="IconImage">
<asp:Image ID="Image2" runat="server" ImageUrl="~/Images/loader.gif"/>
</div>
</div>
And here is my CSS:-
Code:
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
z-index: 1000;
}
#IconImage {
position: absolute;
left: 50%;
top: 50%;
z-index: 1010;
}
Here is my javascript:-
Code:
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
And finally here is my code to trigger the overlay function which is called when I build my data:-
Code:
<asp:ImageButton ID="ImageButton1" runat="server" style="Height:50px; Width: 50px;" ImageUrl="~/Images/Printer.png" ToolTip="Print Report" OnClientClick="overlay()"/>
Everything works fine except my animated gif does not animate. If I load the gif in IE is animates.
Any ideas please?
Regards,
Roger
-
Mar 1st, 2012, 02:06 PM
#2
Re: Disable Form showing animated GIF
I didn't test it, but did you tried to change this:
Code:
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
to this
Code:
el.style.display= (el.style.display== "block") ? "none" : "block";
note: the "block" might be needed to change to "inline".
if it won't work i'll test it on my machine, if you can, upload the file.
another thing i noticed, you'll never see the javascript effect since onclick the button will do postback to the page... you should set the autopostback property to false..
Last edited by motil; Mar 1st, 2012 at 02:11 PM.
* Rate It If you Like it
__________________________________________________________________________________________
" Programming is like sex: one mistake and you’re providing support for a lifetime."
Get last SQL insert ID
-
Mar 2nd, 2012, 02:37 AM
#3
Re: Disable Form showing animated GIF
Originally Posted by Jigabyte
Everything works fine except my animated gif does not animate. If I load the gif in IE is animates.
So, just to confirm...
You are saying that the showing and hiding of the various components all works as you would expect it to, but the one thing that doesn't work is that when the gif shows on the screen, it isn't animated.
Is that correct?
Gary
-
Mar 2nd, 2012, 04:32 AM
#4
Thread Starter
Frenzied Member
Re: Disable Form showing animated GIF
Hi Gary,
Thats correct. I have been googling and found a solution. Basically because the div container is made invisible the gif animation in IE is removed. So you need to do a bit of java script to load the image after the div has been made visible.
Thanks for the reply,
Jiggy
PS. This is the java code :-
Code:
function overlay()
{
el = document.getElementById('overlay');
el.style.display = "inline";
document.getElementById('Image2').src = "../Images/loader.gif";
}
-
Mar 2nd, 2012, 04:54 AM
#5
Re: [RESOLVED] Disable Form showing animated GIF
wired I've tried to reproduce the bug on ie7,8,9 and the gif animation worked just fine when I changed its
visibility property.. but I do remember i had this problem years ago..
p.s: are you sure that you don't just need to use "display" instead the "visibility" property without the javascript code ?
btw, the difference between display and visibility is that when using visibility the space of the hidden element will remain the same and when using display the space will collapse.
Last edited by motil; Mar 2nd, 2012 at 05:04 AM.
* Rate It If you Like it
__________________________________________________________________________________________
" Programming is like sex: one mistake and you’re providing support for a lifetime."
Get last SQL insert ID
-
Mar 16th, 2012, 06:02 AM
#6
Thread Starter
Frenzied Member
Re: [RESOLVED] Disable Form showing animated GIF
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|