Saturday, October 10, 2009

Placing AJAX UpdateProgress Dynamically

If 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

<script type="text/javascript">
    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";
}
</script>


________________________________________
<body onmousemove="SetProgressPosition(event)">
________________________________________
<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

2 comments:

Related Posts Plugin for WordPress, Blogger...