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') = 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"
   div class="overlay" id="divProgress"
        Please wait...
      br /
         asp:Image GenerateEmptyAlternateText="true" ID="Image1" runat="server" ImageUrl="~/ajax-loader.gif" Style="margin-top: 7px;" /


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:
 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
Previous Post Next Post