Sometime when submitting the for cause the long operation we need to show some message that user should wait and block all controls. The following html will do it for you:
If the gif is not available just find another in the internet.
And... wait for it... Happy coding.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Waiting message</title>
<style type="text/css">
#loading-div-background {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
}
#loading-div {
width: 300px;
height: 200px;
text-align: center;
position: absolute;
left: 50%;
top: 30%;
margin-left: -150px;
margin-top: -100px;
}
</style>
<script type="text/javascript">
function showProgress() {
document.getElementById("loading-div-background").style.display = 'block';
var pb = document.getElementById("loading-div");
<!--We inserting the gif, because of well-know IE bug http://stackoverflow.com/questions/780560/animated-gif-in-ie-stopping-->
pb.innerHTML =
'<img src="https://d13yacurqjgara.cloudfront.net/users/157197/screenshots/968023/framely.gif" width="200" height ="200"/><h2>Please wait.... We are working on the hard task</h2>';
pb.style.display = 'block';
}
</script>
<head>
<body>
<form>
<input type="button" value="start job" id="show" onclick="showProgress();"/>
</form>
<div id="loading-div-background">
<div id="loading-div">
<!--Here we will insert inner html by the java script-->
</div>
</div>
</body>
</html>
If the gif is not available just find another in the internet.
And... wait for it... Happy coding.
No comments:
Post a Comment