Results 1 to 6 of 6

Thread: [RESOLVED] Disable Form showing animated GIF

  1. #1

    Thread Starter
    Frenzied Member
    Join Date
    Aug 2006
    Posts
    1,806

    Resolved [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

  2. #2
    PowerPoster motil's Avatar
    Join Date
    Apr 2009
    Location
    Tel Aviv, Israel
    Posts
    2,143

    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

  3. #3
    ASP.NET Moderator gep13's Avatar
    Join Date
    Nov 2004
    Location
    The Granite City
    Posts
    21,963

    Re: Disable Form showing animated GIF

    Quote Originally Posted by Jigabyte View Post
    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

  4. #4

    Thread Starter
    Frenzied Member
    Join Date
    Aug 2006
    Posts
    1,806

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

  5. #5
    PowerPoster motil's Avatar
    Join Date
    Apr 2009
    Location
    Tel Aviv, Israel
    Posts
    2,143

    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

  6. #6

    Thread Starter
    Frenzied Member
    Join Date
    Aug 2006
    Posts
    1,806

    Re: [RESOLVED] Disable Form showing animated GIF

    Thanks Motil

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width