[Javascript] DHTML and table cells

Tue Sep 25 10:20:39 CDT 2001

You can't change the contents of a div etc. in Netscape unless its absolutely positioned. Major
bummer!!

Here's what I've done to get around this problem.
Create one absolutely positioned DIV at 0,0 and then dynamically write the whole page inside this
div.
Any time you want to change the contents of a table cell, update the variable that contains the text
for that cell and use DHTML to redraw the whole page with the new cell contents.

e.g.
<body class=LeftNav onload='Javascript:DrawHtml("");'>
<DIV ID=Div1 STYLE="position: absolute; left: 0px; top: 0px;">
</DIV>

 <SCRIPT LANGUAGE="JavaScript1.2">
var cell1HTML= "the initial contents of cell 1";
var cell2HTML= "the initial contents of cell 2";
var cell3HTML= "the initial contents of cell 3";

function DrawHtml(p_mID) {
var  html = "<TABLE WIDTH=130 BORDER=0 CELLPADDING=0 CELLSPACING=0>"
 + "<TR><TD>" + cell1HTML + </TD>"
+ "<TR><TD>" + cell2HTML + </TD>"
 + "<TR><TD>" + cell3HTML + </TD>"
 + "</TABLE></TD></TR></TABLE>";

 if (document.getElementById) {
  document.getElementById('Div1').innerHTML= html;
 } else {
  with (document.layers['Div1'].document) {
  open();
  write(html);
  close();
     }
 }
}

 </SCRIPT>

Peace
Lau

----- Original Message -----
From: <Esther_Strom at hmco.com>
To: <javascript at LaTech.edu>
Sent: Wednesday, September 26, 2001 12:50 AM
Subject: [Javascript] DHTML and table cells

> I have a bit of DHTML which writes different text to the screen based on
> which radio button is chosen. It works to a point, in that it does write.
> But is there any way to make the text write to a table cell? I have the
> named divs set up inside a table cell, but it just writes outside the
> table. While my Javascript is pretty good, my DHTML is not terribly
> developed, so I'd appreciate any help.
>
> I've looked back at the list archives, but most examples I've seen have
> involved absolutely positioned elements (for Netscape). Because my form is
> dynamically generated by Domino, there's no way to absolutely position form
> elements, which is why I want to write to a table cell. This needs to be
> not only cross-browser (4.0+ only), but also cross-platform.
>
> Thanks in advance,
>
> Esther
> (here's the code so far:)
>
>  <SCRIPT LANGUAGE="JavaScript">    file://Define global variables
>      var totalLayersInLoop=4;
>      var layerNumShowing=0;
>
>      function init(){
>             if (navigator.appName == "Netscape") {
>               layerStyleRef="layer.";
>                layerRef="document.layers";
>                styleSwitch="";
>                }else{
>                layerStyleRef="layer.style.";
>                layerRef="document.all";
>                styleSwitch=".style";
>                }    }
>
>      function showLayerNumber(number){
>           var layerNumToShow=number;
>           hideLayer(eval('"layer' + layerNumShowing+'"'));
>           showLayer(eval('"layer' + layerNumToShow+'"'));
>           layerNumShowing=layerNumToShow;          }
>
>
>
>      function showLayer(layerName){
>           eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility
> ="visible"');  }
>
>      function hideLayer(layerName){
>           eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility
> ="hidden"');   }
>
>  </SCRIPT>
>
>  <STYLE TYPE="text/css">
>  #layer0 {POSITION: absolute; Z-INDEX: 10; VISIBILITY: visible;}
>  #layer1 {POSITION: absolute; Z-INDEX: 20; VISIBILITY: hidden; }
>  #layer2 {POSITION: absolute; Z-INDEX: 30; VISIBILITY: hidden; }
>  #layer3 {POSITION: absolute; Z-INDEX: 40; VISIBILITY: hidden; }
>  #loopControls {POSITION: absolute; Z-INDEX: 50; VISIBILITY: visible; }
>   </STYLE>
>
>   </HEAD>
>
>  <BODY onLoad="init()">  <!--layers in the loop-->
> <form>
> <table border=1>
> <tr><td>
> <INPUT TYPE=radio NAME="ArtType" VALUE="Stock" onClick
> ="showLayerNumber(1)">Stock
> <INPUT TYPE=radio NAME="ArtType" VALUE="Commissioned Illustration" onClick
> ="showLayerNumber(2)">Commissioned Illustration
> <INPUT TYPE=radio NAME="ArtType" VALUE="Assignment Photography" onClick
> ="showLayerNumber(3)">Assignment Photography
> </td></tr>
>
> <TR VALIGN=top>
> <TD  valign=top>
> <a name="usage"><B>Usage ID Info:</B></a>
> </TD></TR>
>
> <tr><td>
> <!--layer 0-->
> <DIV ID="layer0" >
>  <font face="Arial" color="red">&nbsp;</font>
>  </DIV>
> <!--layer 1-->
> <DIV ID="layer1" >
>  <font face="Arial" color="red">Fields 1, 2, 3</font>
>  </DIV>
> <!--layer 2-->
> <DIV ID="layer2" >
>  <font face="Arial" color="red">Fields 4, 5, 6</font>
>  </DIV>
> <!--layer 3-->
> <DIV ID="layer3" >
>  <font face="Arial" color="red">Fields 7, 8, 9</font>
>  </DIV>
> </td></tr>
> </table>
>  </form>
>
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> http://www.LaTech.edu/mailman/listinfo/javascript
>
>