Placing Update Progress Control dynamically

Contextual Links

f you're using AJAX UpdateProgress control, you may find it difficuilt to set the best position where you should put it on the page, because user will not see it if he scrolls down (or up) from it. Here is a simple solution which will make your UpdateProgress more user-friendly, because it will set the position on the screen according to user's movement of the mouse. And you will prevent user to click on any button until the postback finishes execution. 

here is the code place the below code in JavaScript SCRIPT LANGUGE=JAVASCRIPT tag, ending with appropriate closing tag

    function SetProgressPosition(e)
    {
      var posx = 0;
      var posy = 0;
       if (!e) var e = window.event;
       if (e.pageX ||  e.pageY) 
        {
          posx = e.pageX;
          posy = e.pageY;
        }
    else if (e.clientX || e.clientY) 
     {
         posx = e.clientX + document.documentElement.scrollLeft;
         posy = e.clientY + document.documentElement.scrollTop;
     }
    document.getElementById('divProgress').style.left = posx - 8 + "px";
    document.getElementById('divProgress').style.top = posy - 8 + "px";
}



________________________________________
the on boy tag plave the code as body onmousemove="SetProgressPosition(event)"
________________________________________
Now place your updateProgress bar tag as (Note : each line has starting < and ending > Kidly include the same in each line)
asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="100"
ProgressTemplate
   div class="overlay" id="divProgress"
        Please wait...
      br /
         asp:Image GenerateEmptyAlternateText="true" ID="Image1" runat="server" ImageUrl="~/ajax-loader.gif" Style="margin-top: 7px;" /
  /div
/ProgressTemplate
/asp:UpdateProgress

________________________________________

As you can see, most important part is javascript which is responsible for the movement of the UpdateProgress. That javascript is triggered with the "onmousemove" part of the body tag. In order to set UpdateProgress style, use this styel sheet:
________________________________________
.overlay
{
 border: black 1px solid;
 padding: 5px;
 z-index: 100;
 width: 100px;
 position: absolute;
 background-color: #fff;
-moz-opacity: 0.75;
 opacity: 0.75;
 filter: alpha(opacity=75);
 font-family: Tahoma;
 font-size: 11px;
 font-weight: bold;
 text-align: center;
} 
________________________________________


As you can see, there is a part which makes UpdateProgress semi-transparent, which will make it look even better. 


And that's all, very simple, but very effective!
 Code in Action