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
Posts
2 Comments:
Looks decent, I'll try it out for sure...
Nice article, i ll try
Post a Comment