By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,154 Members | 1,037 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,154 IT Pros & Developers. It's quick & easy.

Div/Layers problem in NN4

P: n/a
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">&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: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>
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Lizzy wrote:
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. 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. The progress bar code is in an external js file (progressbar.js - code
below):
------------------------------------------------------------------------------
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;

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[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]);}}
(This will loop if the layer sought is in a nested layer)
}
return null;
}
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 type="text/javascript" src="progressbar.js"></script>
<SCRIPT language="JavaScript"> The type attribute is mandatory, see script tag above.
<BODY bgcolor=3366cc>
The HTML spec calls for "#3366cc". I suggest color value usage, and
quoting of attribute values throughout the page be upgraded.

<trim>
<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>
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>

<trim>
<td><SCRIPT language="javascript"
src="./progressbar.js"></SCRIPT></td>


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

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.