Freeze Page While Processing
In one of my previous postings I explained how you can notify the user that the processing is going on with a simple wait message. If you have not checked that post then click here.
Another way to notifying the user is freezing the whole page so that user cannot press the upload/submit button again.
The freezing work is done by JavaScript. You can check out the complete html code below:
<form id="form1" runat="server">
<div id="parentDiv" class="transparent" style="position:absolute; background-color:Gray;
width:100%; height:100%; display:none; top:0px; left:0px; z-index:5000;">
</div>
<div id="waitIndicatorDiv" class="Indicator" runat="server">
Please wait while the file is being uploaded..
</div>
<div style="position:absolute; top:100px; left:400px">
<h2>File Upload Freeze Screen Demonstration</h2>
Select a file: <asp:FileUpload ID="fu1" runat="server" />
<asp:Button ID="btn_Upload" Text = "Upload" OnClick="BtnUpload_Click" runat="server" />
</div>
</form>
</body>
</html>
<script language="javascript" type="text/javascript">
function FreezePage()
{
document.getElementById("parentDiv").style.display = 'inline';
ShowIndicator();
}
function ShowIndicator()
{
document.getElementById("waitIndicatorDiv").style.display = 'block';
}
</script>
If you are interested in using a different indicator image then please visit the following website.
http://www.napyfab.com/ajax-indicators/
And here is the effect.
UPDATE:
.transparent
{
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
.Indicator
{
font-family:Verdana;
font-size:25px;
background: Green url(images/indicator_medium.gif) no-repeat right;
position:absolute;
top:300px;
left:500px;
display:none;
width: 591px;
z-index:99999;
}