[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

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..

Quote:

---

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

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";
 }

---

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.

Thanks Motil