Animated Gif while processing... RSS

• • Reply
  

  gmcalab

  Member

  11 Points

  31 Posts

  Animated Gif while processing...

  Mar 06, 2009 02:58 AM|LINK

   I was wondering what the best approach would be to show an animated gif while I do some processing. I would assume threads would be involved, but Im looking for some good suggestions or tutorials... Thanks for your help!
  

• • Reply
  

  kavita_khand...

  Star

  9767 Points

  1930 Posts

  Re: Animated Gif while processing...

  Mar 06, 2009 07:28 AM|LINK

  Yes we have done it. for this u have to create a user control,basically this user control will be having a gif image of your loading and it will set its own position to the center of ther page...

  u have to place the control in the update progress panel on ur aspx page like this..

  <asp:UpdateProgress ID="UpdateProgressItemList" AssociatedUpdatePanelID="panelListHotel"

  runat="server">

  <ProgressTemplate>

  <table cellpadding="0" cellspacing="0" width="100%" border="0">

  <tr>

  <td align="center">

  <uc1:LoadImage ID="LoadImage1" runat="server" ContentHeight="100" ContentWidth="100">

  </uc1:LoadImage>

  </td>

  </tr>

  </table>

  </ProgressTemplate>

   

  Here LoadImage  is the user control... now i wil show u pierce of code wot we have done in the LoadImage  control

  in the code behind

   

  public partial class LoadImage : System.Web.UI.UserControl

  {

  protected int _contentWidth = 100;

  protected int _contentHeight = 100;

  protected string _contentCSSClass = "loading_image_main";protected string _backgroundCSSClass = "loading_image_black_overlay";

   

  public int ContentWidth

  {

  get { return _contentWidth; }

  set { _contentWidth = value; }

  }

  public int ContentHeight

  {

  get { return _contentHeight; }set { _contentHeight = value; }

  }

  public string BackgroundCSSClass

  {

  get { return _backgroundCSSClass; }

  set { _backgroundCSSClass = value; }

  }

  public string ContentCSSClass

  {

  get { return _contentCSSClass; }set { _contentCSSClass = value; }

  }

   

  protected void Page_Load(object sender, EventArgs e)

  {

  }

   

  and in the  controls' aspx page place tihs code..only some javascript

   

  < %@ Control AutoEventWireup="true" Codebehind="LoadImage.ascx.cs" Inherits="HotelBooking.App_Controls.UserControls.LoadImage"
      Language="C#" % >
  < !--div id="backgroundDiv" style="height: 100%;" >
  < /div >-- >
  < %--< div id="contentDiv" >
      < img alt="Loading" src="App_Themes/Default/images/loader.gif" / >
  < /div >--% >
  < div id="contentDiv" style="border: 1px solid rgb(192, 147, 56); position: absolute; display: block; top: 262.5px; left: 402.5px; background-color: rgb(248, 240, 203); width: 200px; height: 50px; color: rgb(192, 147, 56);z-index:1000;" align="center" >
      < img src="App_Themes/Default/images/loader.gif" alt="Please wait..." id="imgBNWait" style="text-align: center; padding-top: 15px;" align="middle" >< br >Loading...
   
  < /div >

  < script language="javascript" type="text/javascript" >
  /*call the function when the control loads.*/
  //loadContentDiv('< %=ContentWidth% >', '< %=ContentHeight% >');
  setCssClass('< %=BackgroundCSSClass% >', '< %=ContentCSSClass% >');

  function loadContentDiv(width, height)
  {
  /*< img alt="Loading" src="App_Themes/Default/images/loader.gif" / >*/
      if (width != '' && parseInt(width) != NaN)
          width = parseInt(width, 10);
      else
          alert("Please provide valid Width.");
     
      if (height != '' && parseInt(height) != NaN)
          height = parseInt(height, 10);
      else
          alert("Please provide valid Height.");

  
    /* Fudge factors for window decoration space.
     In my tests these work well on all platforms & browsers.*/
    var w = width + 32;
    var h = height + 96;
    var wleft = (screen.width - w) / 2;
    var wtop = (screen.height - h) / 2;
   
    /* IE5 and other old browsers might allow a window that is
     partially offscreen or wider than the screen. Fix that.
     (Newer browsers fix this for us, but let's be thorough.)*/
    if (wleft <  0) {
      w = screen.width;
      wleft = 0;
    }
    if (wtop <  0) {
      h = screen.height;
      wtop = 0;
    }

    var objDiv  = document.getElementById('contentDiv')
    if (objDiv != null || String(objDiv) != "undefined")
    {
      /* Set left and top of the content div*/
      objDiv.style.left = wleft + "px";
      objDiv.style.top = wtop + "px";
     
      /* Set height and width of the content div*/
      objDiv.style.width = width + "px";
      objDiv.style.height = height + "px";

    }

  }

  function setCssClass(backClass, contentClass)
  {
      //var objBackDiv  = document.getElementById('backgroundDiv');
      var objContentDiv  = document.getElementById('contentDiv');
     
      /*set css class of the background div*/
  //    if (objBackDiv != null || String(objBackDiv) != "undefined")
  //    {
  //        objBackDiv.className = backClass;
  //    }
  //   
      /*set css class of the content div*/
      if (objContentDiv != null || String(objContentDiv) != "undefined")
      {
          objContentDiv.className = contentClass;
      }
  }

  function SetBackgroundHeightOfLoadingControl(pageHeight)
  {
      var objBackDiv  = document.getElementById('backgroundDiv');
      /*if page height is not passed from the page*/
      if (String(pageHeight) == "")
      {
          objBackDiv.style.height = document.documentElement.getAttribute("scrollHeight") + "px";
      }
      else
      {
          objBackDiv.style.height = String(pageHeight) + "px";
      }
     
      if(navigator.appName == "Microsoft Internet Explorer")
      {
          objBackDiv.style.width = document.documentElement.getAttribute("scrollWidth");
      }
  }

  < /script >

   

  </asp:UpdateProgress>

  Please mark this post as Answer if it is of help to you!
  I would love to change the world, but they wont give me the source code.
  • Marked as answer by gmcalab on Mar 17, 2009 08:20 PM
• • Reply
  

  qwe123kids

  All-Star

  48619 Points

  7957 Posts

  MVP

  Re: Animated Gif while processing...

  Mar 06, 2009 08:00 AM|LINK

  Hi,

  http://www.asp.net/AJAX/Documentation/Live/overview/PartialUpdates.aspx

  Hope The Above Sample Help You..

  Thanks
  Avinash Tiwari
  
  Remember to click “Mark as Answer” on the post, if it helps you.
  
  • Edited by gmcalab on Mar 17, 2009 08:20 PM
  • Edited by gmcalab on Mar 17, 2009 08:21 PM
  • Marked as answer by gmcalab on Mar 17, 2009 08:21 PM
• • Reply
  

  Zhi-Qiang Ni...

  All-Star

  33491 Points

  2952 Posts

  Microsoft

  Re: Animated Gif while processing...

  Mar 10, 2009 02:25 AM|LINK

  Hi gmcalab,
  
  Using the UpdateProcess is a good choice. The gif picture can be placed inside the UpdateProcess’s ProcessTemplate directly.
  
  Here is my sample code:

  .aspx file 

  <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestGifInProgress.aspx.vb"
      Inherits="UpdateProgress.TestGifInProgress" %>
  
  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
      <title></title>
  </head>
  <body>
      <form id="form1" runat="server">
      <div>
          <asp:ScriptManager ID="ScriptManager1" runat="server" />
          <asp:UpdatePanel ID="UpdatePanel1" runat="server">
              <ContentTemplate>
                  <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                  <asp:Button ID="Button1" runat="server" Text="Button" />
                  <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                      <ProgressTemplate>
                          <asp:Image ID="Image1" runat="server" ImageUrl="~/fun.gif" />
                      </ProgressTemplate>
                  </asp:UpdateProgress>
              </ContentTemplate>
          </asp:UpdatePanel>
      </div>
      </form>
  </body>
  </html>

  .aspx.vb file 

  Public Partial Class TestGifInProgress
      Inherits System.Web.UI.Page
  
      Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click ', Timer1.Tick
          System.Threading.Thread.Sleep(3000)
          Label1.Text = Date.Now.ToString
      End Sub
  
  End Class

  The related tutorial: http://www.asp.net/learn/ajax-videos/video-123.aspx
  

  
  Best regards,
  
  Zhi-Qiang Ni
  
  

  Microsoft Online Community Support
  
  Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
  Answer” if a marked post does not actually answer your question.
  • Edited by Zhi-Qiang Ni - MSFT on Mar 10, 2009 02:26 AM
  • Edited by gmcalab on Mar 17, 2009 08:19 PM
  • Marked as answer by gmcalab on Mar 17, 2009 08:21 PM
• • Reply
  

  gmcalab

  Member

  11 Points

  31 Posts

  Re: Animated Gif while processing...

  Mar 17, 2009 08:23 PM|LINK

   Thanks all three of you for your great examples. This helped me very much!