Wrox Home  
Search P2P Archive for: Go

  Return to Index  

javascript thread: [javascript]: dot JS file, table, and layers in Navigator


Message #1 by "David E" <registerukh@h...> on Fri, 22 Dec 2000 12:58:24 -0500
I am having some problems in debuggging the following segment of code. So, I 
need your help folks.

<code>

<script language="JavaScript">

NewsThemeLinks = [
["newsAndTheme.gif",
["<font size='-1' face='arial'\>Nov 10 News 
Item</font\>","NewsDload.asp?ID=87",""],
["<font size='-1' face='arial'\>Dec 20</font\>","NewsDload.asp?ID=102",""],
],
]

</script>

......
.....
after some other code
....
...
....

<div id="newsAndTheme" style="position:absolute; width:598px; height:24px; 
z-index:16; left: 178px; top: 138">

<SCRIPT LANGUAGE="JavaScript" SRC="news-theme-01.js" 
TYPE="text/javascript"></SCRIPT>

  <LAYER ID=xqq  VISIBILITY=SHOW 
TOP=&{document.layers[document.layers.length-1].top + 
document.layers[document.layers.length-1].document.height + 20};>

  <!-- My View Start -->

<layer id=myviewstartlayer visibility=show>
	<table width=598 border=0 cellspacing=0 cellpadding=0>
		<tr>
			<td align=left><img src="myView.gif" width="584" height="23"></td>
			<td width=6>
				<table cellpadding=0 cellspacing=0 border=0>
					<tr>
						<td width=6 bgcolor="#ffffff"> </td>
					</tr>
					<tr>
						<td width=6 bgcolor="#cccccc"> </td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</layer>

<table width=598 border=0 cellspacing=0 cellpadding=0>
	<tr>
		<td  height=27 >
			<table cellpadding=0 cellspacing=0 border=0>
				<tr>
					<td width=299 bgcolor="#ffffff"> </td>
				</tr>
				<tr>
					<td width=299 bgcolor="#cccccc"> </td>
				</tr>
			</table>
		</td>
		<td>
		   <table cellpadding=0 cellspacing=0 border=0>
			    <tr>
				     <td width=299 bgcolor="#ffffff"> </td>
			    </tr>
			    <tr>
				     <td width=299 bgcolor="#cccccc"> </td>
			    </tr>
		   </table>
	  </td>
	</tr>
</table>
</LAYER>
</DIV>


<end of Code segment>


And I just have to use Netscape V4.XX browser ONLY as this is an intranet 
project.

When I display the page the above segement is in, and see the "source code" 
of navigator, I see the following:-


<start of view source>
<div id="newsAndTheme" style="position:absolute; width:598px; height:24px; 
z-index:16; left: 178px; top: 138">

<SCRIPT LANGUAGE="JavaScript" SRC="news-theme-01.js" TYPE="text/javascript">

</SCRIPT>

  <LAYER ID=xqq  VISIBILITY=SHOW 
TOP=&{document.layers[document.layers.length-1].top + 
document.layers[document.layers.length-1].document.height + 20};>

  <!-- My View Start -->

<layer id=myviewstartlayer visibility=show>
        <table width=598 border=0 cellspacing=0 cellpadding=0>
                <tr>
                        <td align=left><img src="myView.gif" width="584" 
height="23"></td>
                        <td width=6>
                                <table cellpadding=0 cellspacing=0 border=0>
                                        <tr>
                                                <td width=6 
bgcolor="#ffffff"> </td>
                                        </tr>
                                        <tr>
                                                <td width=6 
bgcolor="#cccccc"> </td>
                                        </tr>
                                </table>
                        </td>
                </tr>
        </table>
</layer>

<table width=598 border=0 cellspacing=0 cellpaddin
<LAYER ID=lpl0 VISIBILITY=show LEFT=0><NOBR><IMG src='newsAndTheme.gif' 
width='561' height='23' vspace='4'><IMG src='twistieOpen.gif' width='23' 
height='23' vspace='4'></NOBR><LAYER></LAYER></LAYER>
<LAYER VISIBILITY=show LEFT=5><FONT FACE='Arial,sans-serif'>            <IMG 
src='orangeDot.gif' width='8' height='8'><A HREF="NewsDload.asp?ID=87"><FONT 
size='-1' face='arial'>Nov 10 News Item</FONT></A></FONT></LAYER>
<LAYER VISIBILITY=show LEFT=5><FONT FACE='Arial,sans-serif'>            <IMG 
src='orangeDot.gif' width='8' height='8'><A 
HREF="NewsDload.asp?ID=102"><FONT size='-1' face='arial'>Dec 
20</FONT></A></FONT></LAYER>


  <LAYER ID=xqq  VISIBILITY=SHOW TOP=89>


<LAYER id=myviewstartlayer visibility=show>
        <TABLE width=598 border=0 cellspacing=0 cellpadding=0>
                <TR>
                        <TD align=left><IMG src="myView.gif" width="584" 
height="23"></TD>
                        <TD width=6>
                                <TABLE cellpadding=0 cellspacing=0 border=0>
                                        <TR>
                                                <TD width=6 
bgcolor="#ffffff"> </TD>
                                        </TR>
                                        <TR>
                                                <TD width=6 
bgcolor="#cccccc"> </TD>
                                        </TR>
                                </TABLE>
                        </TD>
                </TR>
        </TABLE>
</LAYER>

<TABLE width=598 border=0 cellspacing=0 cellpadding=0>
        <TR>
                <TD  height=27 >
                        <TABLE cellpadding=0 cellspacing=0 border=0>
                                <TR>
                                        <TD width=299 bgcolor="#ffffff"> 
</TD>
                                </TR>
                                <TR>
                                        <TD width=299 bgcolor="#cccccc"> 
</TD>
                                </TR>
                        </TABLE>
                </TD>
                <TD>
                   <TABLE cellpadding=0 cellspacing=0 border=0>
                            <TR>
                                     <TD width=299 bgcolor="#ffffff"> </TD>
                            </TR>
                            <TR>
                                     <TD width=299 bgcolor="#cccccc"> </TD>
                            </TR>
                   </TABLE>
          </TD>
        </TR>
</TABLE>


</end of view source>

The output from the .js file gets pasted in after layer "myviewstartlayer". 
and the table within "myviewstartlayer" layer gets repeated.  The layers are 
getting messed up when displayed in the browser.

Can anybody tell what's the problem???



<start of news-theme-01.js file>

CatLeft = 100;
SubLeft = 5;
CatTop = 10;


origWidth = window.innerWidth;
origHeight = window.innerHeight;
window.onresize = function (){
	if (window.innerWidth==origWidth && window.innerHeight==origHeight) return;
	location.reload();
}

FontBeg = "<FONT FACE='Arial,sans-serif'>"
FontEnd = "</FONT>";

Layer.prototype.placeTop = function(ldg){
	pLyr = this.siblingBelow;
	this.top = pLyr.top + pLyr.document.height + this.topIncr;
}
function reShowNewsTheme(){
	document.layers['xqq'].topIncr = CatTop;
	allLayers = [];
	for (i=0;i<document.layers.length;i++) {
		tLyr = document.layers[i];
		if (tLyr.visibility=="show") allLayers.push(tLyr);
	}

	allLayers[0].top = startTop;
	for (i=1;i<allLayers.length;i++) {
		pLyr = allLayers[i-1];
		tLyr = allLayers[i];
		tLyr.top = pLyr.top + pLyr.document.height + tLyr.topIncr;
	}
}

for (i=0;i<NewsThemeLinks.length;i++) {
	arCat = NewsThemeLinks[i];
	arCat.title = arCat[0];
	document.writeln("");
	document.writeln("<LAYER ID=lpl"+i+" VISIBILITY=show LEFT="+0+"><nobr><img 
src='" + arCat.title + "' width='561' height='23' vspace='4'><img 
src='twistieOpen.gif' width='23' height='23' 
vspace='4'></nobr><layer></layer></LAYER>");

	tLyr = document.layers[document.layers.length-1];
	tLyr.im = tLyr.document.images[1];

	tLyr.topIncr = CatTop;
	if(i>0) {
		tLyr.placeTop();
	}
	else {

	startTop = tLyr.top;
	}
	tLyr.visibility = "show";


	dummyLyr = tLyr.document.layers[0];
	dummyLyr.left = dummyLyr.top =0;
	dummyLyr.clip.width = tLyr.clip.width;
	dummyLyr.clip.height = tLyr.clip.height;

	tLyr.isOn = false;

	tLyr.captureEvents(Event.MOUSEUP);
	tLyr.onmouseup = function(){
		this.isOn = !this.isOn;
		newVis = (this.isOn)?"hide":"show";
		for (i=0;i<this.kids.length;i++){
			this.kids[i].visibility = newVis;
		}
		this.im.src = (this.isOn) ? "twistieClosed.gif" : "twistieOpen.gif";
		reShowNewsTheme();
	}

	tLyr.kids = [];
	for (j=1;j<arCat.length;j++) {
		tEl = arCat[j];
		if(tEl.length == 1) {
			document.writeln("<LAYER VISIBILITY=show LEFT="+SubLeft+">" + FontBeg + 
tEl[0].bold() + FontEnd + "</LAYER>");
		}
		else {
			dispStr = tEl[0];
			linkStr = tEl[1];
			dateStr = tEl[2];

			contStr = 
"            <img 
src='orangeDot.gif' width='8' height='8'>" + dispStr.link(linkStr);


			document.writeln("<LAYER VISIBILITY=show LEFT="+SubLeft+">" + FontBeg + 
contStr +  FontEnd +  "</LAYER>");
		}
		cLyr = document.layers[document.layers.length-1];
		tLyr.kids.push(cLyr);
//		cLyr.topIncr = 10;
// controls spacing between url link layers
		cLyr.topIncr = 1;
		cLyr.placeTop();
	}

}

</end of news-theme-01.js file>

I know the above code is too much but I thought I should give all the 
details.

Thanks for your time and effort.

_________________________________________________________________
Get your FREE download of MSN Explorer at http://explorer.msn.com


--- 
NEED TECHNICAL TIPS, TOOLS, AND INSIGHTS?  Is FREE okay?
Visit EarthWeb for the latest in IT Management, Software Development, 
Web Development, Networking & Communications, and Hardware & Systems.  
Click on http://www.earthweb.com for FREE articles, tutorials,
and discussions from the experts.
---
You are currently subscribed to javascript as: $subst('Recip.EmailAddr')
To unsubscribe send a blank email to leave-javascript-$subst('Recip.MemberIDChar')@p2p.wrox.com

  Return to Index