This is two step process....You also need image "loading_bar.gif". The image I use is attached here on the right hand side (varieties can be downloaded from "
http://images.google.com/")
Step 1: In you JSP ....
ONSUBMIT put this JS function call at the start....
showInProcess();
use this one to hide that BUSY SCREEN DIV
hideInProcess();
Given below is DIV code....HTML & CSS....put your path for the IMAGE......look for placeholder in code below named "IMG_PATH"
<div id="processStatus" style="position:absolute; display:none;"><img src="IMG_PATH/loading_bar.gif" ></div>
<div id="inProcess" class="opeque" style="position:absolute; border: solid #000000 1px; display:none; background:#DAEBE9;"><table border="1" width="100%" height="100%" align="center" ><tr height="1000%" ><td width="100%" colspan="3" align="center" valign="middle"> </td></tr></table></div>
CSS class opeque is defined as
.opeque{
filter:alpha(opacity=50); /* Internet Explorer */
-moz-opacity:0.5; /* Mozilla 1.6 and below */
opacity: 0.5; /* newer Mozilla and CSS-3 */
}
Step 2: In your JS file
function showInProcess(){
screenheight=window.screen.height;
screenwidth=window.screen.width;
document.getElementById('processStatus').style.top=(screenheight/2)-100;
document.getElementById('processStatus').style.left=(screenwidth/2)-50;
document.getElementById('processStatus').style.zIndex = 150;
document.getElementById('processStatus').style.display = "";
if (window.innerHeight && window.scrollMaxY) {// Firefox
screenheight = window.innerHeight + window.scrollMaxY;
screenwidth = window.innerWidth + window.scrollMaxX;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
screenheight = document.body.scrollHeight;
screenwidth = document.body.scrollWidth;
} else { // works in Explorer 6 Strict, Mozilla (not FF) and Safari
screenheight = document.body.offsetHeight;
screenwidth = document.body.offsetWidth;
}
document.getElementById('inProcess').style.top=0;
document.getElementById('inProcess').style.left=0;
document.getElementById('inProcess').style.height=screenheight;
document.getElementById('inProcess').style.width=screenwidth;
document.getElementById('inProcess').style.zIndex = 100;
document.getElementById('inProcess').style.display = "";
}
function hideInProcess(){
document.getElementById('processStatus').style.display = "none";
document.getElementById('inProcess').style.display = "none";
}