[Javascript] DHTML and table cells

Tue Sep 25 12:48:21 CDT 2001

Lori, thanks for the tip, but I've already tried it. It works fine in IE,
but in Netscape, all the divs are visible, and clicking on any of the radio
buttons produces the following error:

document.layers.layer0 has no properties

                    "Mckinney,                                                                                     
                    Lori K"              To:     Esther_Strom at hmco.com                                             
                    <lkmckinn at ing        cc:                                                                       
                    r.com>               Subject:     RE: [Javascript] DHTML and table cells                       

                    09/25/01                                                                                       
                    12:27 PM                                                                                       

Esther,

If you will take the Position: absolute out of the style definitions, the
DIV will appear within the table cell.

-----Original Message-----
From: Esther_Strom at hmco.com [mailto:Esther_Strom at hmco.com]
Sent: Tuesday, September 25, 2001 9:51 AM
To: javascript at LaTech.edu
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">    //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