Div/Layers problem in NN4

L

Lizzy

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.name == name)
{return(document.layers);}

if(document.layers.document.layers.length > 0)
{if((document.layers = findlayer(name)) != null)
{return(document.layers);}}
}
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,barheight-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").style.visibility =
"hidden";
document.getElementById("divMessage").style.visibility = "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:16px;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().getReservationNumber()%>"></td>
</tr>
<tr>
<td width="25%" height="20">&nbsp;</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">&nbsp;</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

<div id="divMessage"
style="visibility:hidden;position:absolute;top:16px;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>
 
D

Dom Leonard

Lizzy said:
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.
Click to expand...
It looks like this is because errors in function findlayer are not being
triggered when finding layers in the main document.

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.
Click to expand...
The progress bar code is in an external js file (progressbar.js - code
below):
------------------------------------------------------------------------------
Click to expand...

Supplied the following values for testing:

var barwidth=302;
var waitTime=3;
var bordercolor="red";
var barheight="20";
var loadedcolor="blue";
var unloadedcolor="white";
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;
Click to expand...

Including the .js file in the middle of a NS4 layer prevented function
definitions from being in global scope when tested, so changed document
write calls to creating a source string:

var barHTML=""
if(NS4)
{
barHTML+=('<ilayer name="ProgBar_outer" id="ProgBar_outer"
visibility="hide" height="'+barheight+'" width="'+barwidth+'"
onmouseup="hidebar()">');
barHTML+=('<layer width="'+barwidth+'" height="'+barheight+'"
bgcolor="'+bordercolor+'" top="0" left="0"></layer>');
barHTML+=('<layer width="'+(barwidth-2)+'" height="'+(barheight-2)+'"
bgcolor="'+unloadedcolor+'" top="1" left="1"></layer>');
barHTML+=('<layer name="ProgBar_done" id="ProgBar_done"
width="'+(barwidth-2)+'" height="'+(barheight-2)+'"
bgcolor="'+loadedcolor+'" top="1" left="1"></layer>');
barHTML+=('</ilayer>');
}
else
{
barHTML+=('<div id="ProgBar_outer" onmouseup="hidebar()"
style="position:relative; visibility:hidden;
background-color:'+bordercolor+'; width:'+barwidth+'px;
height:'+barheight+'px;">');
barHTML+=('<div style="position:absolute; top:1px; left:1px;
width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px;
background-color:'+unloadedcolor+'; font-size:1px;"></div>');
barHTML+=('<div id="ProgBar_done" style="position:absolute; top:1px;
left:1px; width:0px; height:'+(barheight-2)+'px;
background-color:'+loadedcolor+'; font-size:1px;"></div>');
barHTML+=('</div>');
}

(The parentheses are left over from the document.write and can be removed.)
function progressBarInit() unchanged.

Replaced
function findlayer(name)
{
var i;
for(i=0; i<document.layers.length; i++)
{
if(document.layers.name == name)
{return(document.layers);}

if(document.layers.document.layers.length > 0)
{if((document.layers = findlayer(name)) != null)
{return(document.layers);}}
Click to expand...


(This will loop if the layer sought is in a nested layer)
}
return null;
}
Click to expand...

with

function findDocumentLayer(document, name)
{
var i;
var layer=null;
for(i=0; (i < document.layers.length) && !layer;)
{ layer=document.layers[i++];
if(layer.name!=name)
layer=findDocumentLayer(layer.document, name);
}
return layer;
}
function findlayer(name)
{
return findDocumentLayer(document, name);
}

Feel free to rewrite in your own style. The remainder of progressbar.js
was unchanged.

<trim>

In registration.jsp progress bar code can now be included in the head
section:

<SCRIPT language="JavaScript">
Click to expand...
The type attribute is mandatory, see script tag above.
<BODY bgcolor=3366cc>
Click to expand...

The HTML spec calls for "#3366cc". I suggest color value usage, and
quoting of attribute values throughout the page be upgraded.

<div id="divMessage"
style="visibility:hidden;position:absolute;top:16px;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>
Click to expand...

The unterminated valign value causes this tag to go missing. I suggest
validating the HTML in any case, but this line should be changed to

<td width="166" height="291" bgcolor="#FFCC00" valign="top"></td>

<td><SCRIPT language="javascript"
src="./progressbar.js"></SCRIPT></td>
Click to expand...

changed script tag to

<SCRIPT type="text/javascript">document.write(barHTML);</SCRIPT>


The above changes got the basic concept to work in multiple browsers
but, of course, the page remains unfinished. HTH and good luck!

Dom
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
How to have two html audio players on one page? 0
Image shifts to the right when export the page to pdf 4
Having trouble centering contents of td ? 3
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
SendGrid email issue in responsive Gmail 1
Help needed with thank you message 5
How do I fix this issue in sqaurespace code block? 1

Members online

No members online now.
Total: 51 (members: 2, guests: 49)
Robots: 350

Forum statistics

Threads
473,995
Messages
2,570,236
Members
46,822
Latest member
israfaceZa

Latest Threads

Top