PDA

Click to See Complete Forum and Search --> : Dynamic Text in Table Cell - Problem w/ Netscape 4.7x

olerag
07-01-2003, 11:35 AM
The Javascript/HTML code provided below works fine w/ IE and later versions of Netscape, however, as predictable, the Netscape 4.7x version is having problems since neither the "innerHTML" or "getElementById" functions are recognizable.

To work around this, I stole some code from the Javascript "Bible" using layers. Unfortunately several things don't seem to work very well.
1) When the browser window is re-sized, the text does some funny things.
2) For whatever reason, the <td align="center"> is not working.
3) For the spacing in the cell to work, the table cell must be padded with lots of spaces.
4) A lot of silly Javascript add-ons are required just to recognize the browser that doesn't work.

So... am I missing something or is this particular browser not equiped to handle dynamic text in table cells???

Code follows.....

<html>
<head>

<title>Sample JavaScript Routines</title>
<style type="text/css">
.absoluteWrap {position:absolute}
.relativeWrap {position:relative}
.cellColor {color:green}
</style>

<script language="JavaScript">
var Ver4 = parseInt(navigator.appVersion) == 4
var Ver4Up = parseInt(navigator.appVersion) >= 4
var Nav4 = ((navigator.appName == "Netscape") && Ver4)
var modifiable

function init() {
modifiable = (Ver4Up && document.body && document.body.innerHTML)
}

function writeBrowser() {
document.write(navigator.appName + " (V)" + navigator.appVersion)
}


function setDynValue(vString) {
var vHeadWrap = "cellHeaderWrapper"
var vHeader = "cellHeader"
var newCellHTML = "<SPAN CLASS='cellColor'>" + vString + "</SPAN>"

if (Nav4) {
document.layers[vHeadWrap].document.layers[vHeader].document.open()
document.layers[vHeadWrap].document.layers[vHeader].document.write(newCellHTML)
document.layers[vHeadWrap].document.layers[vHeader].document.close()
}
else if (modifiable) {
if (document.all) {
document.all(vHeader).innerHTML = newCellHTML
}
else {
document.getElementById(vHeader).innerHTML = newCellHTML
}
}
}
</script>
</head>

<body onLoad="init()">

<table border="0" width="100%" align="center">
<tr>
<td align="CENTER"><font name="Arial" size="+1">

<SCRIPT language="JavaScript">
if (Nav4) {
var headHolder = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
headHolder += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
document.write("<SPAN ID='cellHeaderWrapper' CLASS='relativeWrap'>")
document.write("<SPAN ID='cellHeader' CLASS='absoluteWrap'></SPAN>")
document.write("<SPAN>" + headHolder + "</SPAN></SPAN>")
}
else {
document.write("<SPAN ID='cellHeader' CLASS='relativeWrap'><B><P>&nbsp;</P></B></SPAN>")
}
</SCRIPT>

</td>
</tr>
</table>

<form name="sampleForm">
<center>
<b>Sample JavaScript Routines</b>
</center>
<br>
<b>Browser:</b>&nbsp;&nbsp;<script language="JavaScript">writeBrowser()</script>
<hr>
<br>


<b>Dynamic Header/Footer Display</b>
<br>
<table border="0" align="center" width="80%">
<tr>
<td>
<table border="0" align="center" width="100%">
<tr>
<td align="center">
<input type="button" name="setBtn" value="Insert Text" onClick="setDynValue('SAMPLE TEXT')">
</td>
</tr>
</table>
</td>
<td>
<table border="0" align="center" width="100%">
<tr>
<td align="center">
<input type="button" name="clearBtn" value="Clear Text"
onClick="setDynValue('&nbsp;')">
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<hr>
</form>
</body>
</html>
gil davis
07-01-2003, 08:59 PM
I can empathize with your frustrations.

One problem with trying to place dynamic text in a table using NS 4 is that the table will not resize if the contents warrant a change.

Another is that NS 4 exhibits some rather odd behaviour when mixing scripts with tables.

It may be easier to just recreate the whole table as necessary, rather than replaceing pieces. You can successfully place a layer container (it doesn't have to be a LAYER tag, it can be a DIV that is declared "position: absolute") in an appropriate spot and write the table inside it.

My experimentation has shown that you can style a TD as "position: relative" and place a SPAN tag declared "position: absolute" inside it and write to the SPAN. However, the table will not size according to the new content.