I have an internet application which has a progress bar show whenever
the customer is requesting data from the server. This progress bar is
coded to work in both Netscape 4.75 and above and IE 5.0 and above.
The progress bar code is written in javascript in an external js file
(progressbar.js). The web screen is in a seperate jsp file
(Registration.jsp). The problem I'm having is that the progress bar is
not showing in Netscape 4.75 on a MAC. I think it may have something
to do with DIV located in the jsp file because if I comment the DIV,
the progress bar shows up. I am using DIVs because when the form
loads, the "divReservationInput" is visible and the "divMessage" is
hidden. Then, when I call the progressbar.js, the "divMessage" is
visible and the "divReservationInput" is hidden. I need help on
properly coding this. Here is my code:
The progress bar code is in an external js file (progressbar.js - code
below):
------------------------------------------------------------------------------
var NS4 = (document.layers) ? true : false;
var IE = (document.all) ? true : false;
var blocksize = (barwidth-2)/waitTime/10;
var loaded = 0;
var ProgBar_outer;
var ProgBar_done;
var PBbckgnd;
var Pid = 0;
if(NS4)
{
document.write('<ilayer name="ProgBar_outer" id="ProgBar_outer"
visibility="hide" height="'+barheight+'" width="'+barwidth+'"
onmouseup="hidebar()">');
document.write('<layer width="'+barwidth+'" height="'+barheight+'"
bgcolor="'+bordercolor+'" top="0" left="0"></layer>');
document.write('<layer width="'+(barwidth-2)+'"
height="'+(barheight-2)+'" bgcolor="'+unloadedcolor+'" top="1"
left="1"></layer>');
document.write('<layer name="ProgBar_done" id="ProgBar_done"
width="'+(barwidth-2)+'" height="'+(barheight-2)+'"
bgcolor="'+loadedcolor+'" top="1" left="1"></layer>');
document.write('</ilayer>');
}
else
{
document.write('<div id="ProgBar_outer" onmouseup="hidebar()"
style="position:relative; visibility:hidden;
background-color:'+bordercolor+'; width:'+barwidth+'px;
height:'+barheight+'px;">');
document.write('<div style="position:absolute; top:1px; left:1px;
width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px;
background-color:'+unloadedcolor+'; font-size:1px;"></div>');
document.write('<div id="ProgBar_done" style="position:absolute;
top:1px; left:1px; width:0px; height:'+(barheight-2)+'px;
background-color:'+loadedcolor+'; font-size:1px;"></div>');
document.write('</div>');
}
function progressBarInit()
{
ProgBar_outer=(NS4)?findlayer('ProgBar_outer'):(IE )?document.all['ProgBar_outer']:document.getElementById('ProgBar_outer');
ProgBar_done=(NS4)?ProgBar_outer.document.layers['ProgBar_done']:(IE)?document.all['ProgBar_done']:document.getElementById('ProgBar_done');
resizeElement(ProgBar_done,0,0,barheight-2,0);
if(NS4)
{
ProgBar_outer.visibility = "show";
Pid = setInterval('incrCount()',95);
}
else
{
ProgBar_outer.style.visibility = "visible";
Pid = setInterval('incrCount()',95);
}
}
function findlayer(name)
{
var i;
for(i=0; i<document.layers.length; i++)
{
if(document.layers[i].name == name)
{return(document.layers[i]);}
if(document.layers[i].document.layers.length > 0)
{if((document.layers[i] = findlayer(name)) != null)
{return(document.layers[i]);}}
}
return null;
}
function resizeElement(id,top,right,bottom,left)
{
if(NS4)
{
id.clip.left = left;
id.clip.top = top;
id.clip.right = right;
id.clip.bottom = bottom;
}
else
{id.style.width = right + 'px'; }
}
function incrCount()
{
loaded++;
if(loaded < 0)
{loaded=0;}
if(loaded >= waitTime*10)
{
clearInterval(Pid);
loaded = waitTime*10;
setTimeout('hidebar()',100);
}
resizeElement(ProgBar_done,0,blocksize*loaded,barh eight-2,0);
}
function hidebar()
{
clearInterval(Pid);
loaded=0;
Pid = setInterval('incrCount()',95);
}
Registration.jsp (code below):
------------------------------
<HEAD>
<title>Registration</title>
<SCRIPT language="JavaScript">
<!--#include virtual="progressbar.js"-->
var browserName = navigator.appName;
var NS4 = (document.layers) ? true : false;
function submitForm()
{
showWaitMessage();
document.frmAdvancedGuestRegistration.submit();
}
function showWaitMessage()
{
if(NS4)
{
document.layers['divReservationInput'].visibility = 'hide';
document.layers['divMessage'].visibility = 'show';
}
else
{
document.getElementById("divReservationInput").sty le.visibility =
"hidden";
document.getElementById("divMessage").style.visibi lity = "visible";
}
progressBarInit();
}
</SCRIPT>
</HEAD>
<BODY bgcolor=3366cc>
<jsp:useBean id="ReservationView" scope="session"
class="com.view.ReservationInputView"></jsp:useBean>
<div id="divReservationInput"
style="visibility:visible;position:absolute;top:16 px;width:100%">
<table width=650 border=0 cellpadding=0 cellspacing=0 align="center">
<tr>
<td colspan=4 bgcolor=#FFFFFF><img src="images/arch_left.gif"
width=182 height=26></td>
<td width=31 height=26 bgcolor=#FFFFFF><img
src="images/spacer.gif"></td>
<td colspan=4 bgcolor=#FFFFFF><div align="right"><img
src="images/arch_right.gif" width=271 height=26></div></td>
</tr>
<tr>
<td width=166 height=291 bgcolor=#FFCC00 valign="top"><img
src="images/spacer.gif"></td>
<td width=484 height=291 colspan=9 valign="top"
bgcolor="#FFFFFF"><br>
<table width="95%" border="0" cellspacing="0" cellpadding="0"
align="center">
<tr>
<td>
<p><font face="Verdana, Arial, Helvetica, sans-serif"
size="1">Please provide the following information to verify
registration status.</font></p>
<FORM name="frmRegistration" method="POST" action="Servlet">
<table width="90%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="25%" height="20"><b><font face="Verdana, Arial,
Helvetica, sans-serif" size="1" color="3366CC">Reservation
Number</font></b></td>
<td colspan="2" height="20"><input type="text" name="txtResNbr"
value="<%=ReservationView.getReservation().getRese rvationNumber()%>"></td>
</tr>
<tr>
<td width="25%" height="20"> </td>
<td width="27%" height="20" align="center"><a
href="javascript:checkForm()"><img src="images/submit.gif" width="72"
height="20" border="0"></a></td>
<td width="38%" height="20"> </td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="divMessage"
style="visibility:hidden;position:absolute;top:16p x;width:100%">
<table width=650 border=0 cellpadding=0 cellspacing=0 align="center">
<tr>
<td colspan=9 bgcolor=#FFFFFF><img src="images/tit_grf.gif" width=484
height=20></td>
</tr>
<tr>
<td width=166 height=291 bgcolor=#FFCC00 valign="top></td>
<td width=484 height=291 colspan=9 valign="top"
bgcolor="#FFFFFF"><br><br><br><br><br>
<FORM name="form1" method="POST" action="Servlet">
<table width="95%" border="0" cellspacing="0" cellpadding="0"
align="center">
<tr>
<td align="center" height="30"><font face="verdana" color="3366cc"
size="2"><b>Searching For Your Reservation - Please
Wait...</b></font></td>
</tr>
<tr>
<td>
<table align="center">
<tr>
<td><SCRIPT language="javascript"
src="./progressbar.js"></SCRIPT></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</div>
<INPUT type="hidden" name="hdnNextPage"
value="AdvancedGuestRegistrationSummary">
<INPUT type="hidden" name="hdnAction"
value="RetrieveRegistrationSummary">
</BODY>
</HTML>
