Equivalent code for document.getElementById().className in Netscape?

I am trying to make this code work in Netscape, but I don't think Netscape supports .className to change the bgcolor of a cell.  Please advise.

for(var x=1; x<=numTD; x++){
  var selCell = cllPre+x;
  //alert(selCell);
  if(x == motionCount){
    document.getElementById(cllPre+x).className = clsOne;
                                                
      if((x-1) > 0){
        document.getElementById(cllPre+(x-1)).className = clsTwo;
      }

  }else{
    document.getElementById(cllPre+x).className = clsNorm;

  }

}
damselInDistressAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ZontarCommented:
Which Netscape? If you're talking about Netscape *4*, no, it doesn't.

Should work fine in NS 6/7/Mozilla, tho.

If you want to emulate this behaviour in NS4, you'll have to stick a DIV, SPAN, LAYER or ILAYER in each and every table cell and change its bgColor instead.

Of course, in NS6/7 and Moz (and Opera, too) you don't even need to USE JavaScript, as CSS td:hover will do the job quite nicely. :)

Anyway... I don't even have NS4 installed on any of my machines (and haven't had in close to 2 years) and have no desire to, but here's some stuff I did for it wayyy back when... I *think* this will work...

<HTML>
<HEAD>
   
<META name="AUTHOR" content="Jon Stephens">

<TITLE>Changing a TD background (with a Netscape 4 Workaround)</TITLE>


<STYLE type="text/css">
<!--

A {font-weight:bold; color:#FFFFFF; text-decoration:none; text-align:center}

A:hover {font-weight:bold; color:#000000; text-decoration:none; text-align:center}

.over {font-weight:bold; color:#000000; text-decoration:none; text-align:center}

B {font-weight:bold; color:#000000; text-decoration:none; text-align:center}

//-->
</STYLE>

<SCRIPT language="JavaScript">
<!--

function changeIt(index){
   var ref = null;
   // Netscape 4: show the corresponding layer (created by the initialize_NS() function
   if(document.layers)myLayer[index-1].visibility="visible";
   
   // otherwise change the background-color style attribute of the corresponding TD
   if(document.all)
    ref = document.all["myCell"+index]
   else
   {
    if(document.getElementById)
      ref = document.getElementById("myCell" + index)
   }
   if(ref)
    ref.style.backgroundColor="#FFFFFF";
}

function changeItBack(index){
   var ref = null;
   if(document.layers)myLayer[index-1].visibility="hidden";

   if(document.all)
    ref = document.all["myCell"+index]
   else
   {
    if(document.getElementById)
      ref = document.getElementById("myCell" + index)
   }
   if(ref)
    ref.style.backgroundColor="#000000";
}


// this function creates a series of NS Layer() objects in a one-to-one correspondence
// with the ILAYERs hard-coded into the page... called by the page's onLoad event handler
// (we can't create new Layer()s until the page is fully loaded)...
// The basic idea is this: The ILAYERs are positioned relative to
// the top-left corners of the table cells, but we can't resize or
// show/hide them easily; so we use these to determine positioning
// for the Layer() objects, which we CAN resize and show/hide

function initialize_NS(size){

   // "Dear Non-NS4 Browsers, Please ignore the rest of this function..."
   if(!document.layers)return null;

   // array to hold the layers we're about to create
   myLayer=new Array(size);
   
   // the width and height values returned by the ILAYERs aren't reliable, so we'll get them
   // the old-fashioned way -- by subtracting the x- and y- coordinates of adjacent ILAYERS
   
   // note that should this be used in a table where the columns are of unequal widths,
   // you'd have to set these for EACH new Layer by subtracting the x- and y-coordinates
   // of the appropriate pair of ILAYERs
   
   var newWidth=(document.layers["myILayer1"].pageX-document.layers["myILayer3"].pageX);
   var newHeight=(document.layers["myILayer6"].pageY-document.layers["myILayer4"].pageY);
   
   // *******the Great Netscape Four Mystery Correction Factor for positioning and clipping
   // (apparently there is an error of several pixels in the values reported by
   // the ILAYER object...?)
   // I don't understand why it should be necessary, but it appears to be so
   //  and it appears to vary with the width of the table...
   var correctionFactor=9;
   
   for(var i=0;i<size;i++){
      // convenience variables -- save a little typing
      j=i+1;
      var currILayer=document.layers["myILayer"+j];
     
      // create a new Layer() of arbitrary width (constructor requires an argument) --
      // in Netscape 4, this layer is (almost) exactly the same as if you'd written a LAYER tag in the page
     
      myLayer[i]=new Layer(100);
     
      // now set its width and height to match that of the corresponding table cell
      myLayer[i].resizeTo(newWidth,newHeight);
      myLayer[i].zIndex=1;
     
      // setting the visibility for a Layer() object in created solely in JavaScript
      // has no effect if its *hidden* attribute has first not been set to false
      // (not necessary for DIV/LAYER/ILAYER/SPAN tags actually appearing in the HTML)
      myLayer[i].hidden=false;
      myLayer[i].visibility="hidden";
     
     
     
      // move the layer to the ilayer's corrdinates...
      // this uses the Mystery Correction Factor set above
      // -- needs to be adjusted for differently-sized tables
      myLayer[i].moveTo(currILayer.pageX+correctionFactor,currILayer.pageY);
     
      // open and write the HTML for the link/text to the Layer(), then close it
      // (you could substitute other text or even an image)
      myLayer[i].document.open();
      myLayer[i].document.write("<B><A href='#' class='over' onMouseOver='changeIt("+j+");'");
      myLayer[i].document.write(" onMouseOut='changeItBack("+j+");'>");
      myLayer[i].document.write("L I N K "+(i+1)+"</A></B>");
      myLayer[i].document.close();
     
      // set the layer's background color
      myLayer[i].document.bgColor="#FFFFFF";
     
      // set its clipping, again compensating for Whatever It Is
      // with The Mystery Correction Factor...
      myLayer[i].clip.right-=correctionFactor;
      myLayer[i].clip.left-=correctionFactor;
   }
   
}

//-->
</SCRIPT>


</HEAD>

<BODY bgcolor="#FFFFFF" onLoad="initialize_NS(6);" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">

<P>&nbsp;</P>

<TABLE width="75%" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#000000" align="center">
  <TR>
    <TD>&nbsp;</TD>
    <TD align="center" id="myCell1">
      <ILAYER id="myILayer1" width="100%" bgcolor="#000000">
         <A href="#" onMouseOver="changeIt(1);" onMouseOut="changeItBack(1);">L I N K 1</A></ILAYER></TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD align="center" id="myCell2">
      <ILAYER id="myILayer2" width="100%">
         <A href="#" onMouseOver="changeIt(2);" onMouseOut="changeItBack(2);">L I N K 2</A></ILAYER></TD>
    <TD>&nbsp;</TD>
  </TR>
  <TR>
    <TD align="center" id="myCell3">
      <ILAYER id="myILayer3" width="100%">
         <A href="#" onMouseOver="changeIt(3);" onMouseOut="changeItBack(3);">L I N K 3</A></ILAYER></TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
  </TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD align="center" id="myCell4">
      <ILAYER id="myILayer4" width="100%">
         <A href="#" onMouseOver="changeIt(4);" onMouseOut="changeItBack(4);">L I N K 4</A></ILAYER></TD>
    <TD>&nbsp;</TD>
    <TD align="center" id="myCell5">
      <ILAYER id="myILayer5" width="100%">
         <A href="#" onMouseOver="changeIt(5);" onMouseOut="changeItBack(5);">L I N K 5</A></ILAYER></TD>
  </TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD>
    <TD align="center" id="myCell6">
      <ILAYER id="myILayer6" width="100%">
         <A href="#" onMouseOver="changeIt(6);" onMouseOut="changeItBack(6);">L I N K 6</A></ILAYER></TD>
    <TD>&nbsp;</TD>
  </TR>
</TABLE>
</BODY>
</HTML>

Look in this directory:

www.erisx.com/jd/dhtml/tdbg/

There's a whole bunch of experiments along this line up there, all written about 4 years ago. I've modified this one (http://www.erisx.com/jd/dhtml/tdbg/tdbg_both_new.html) to include a hook for modern browsers. As I don't have NS4, I have no way of testing it, but feel free to use it or one of the other files in that directory if you can get it to work in NS4.

Ahhhh, the memories... Gee, I wonder why I don't miss Netscape 4 one little bitty bit? ;-)

Enjoy.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
damselInDistressAuthor Commented:
Actually, it doesn't seem to work in Netscape 6 or 7.  I don't care about 4.
ZontarCommented:
NS 6/7/Mozilla all definitely support the className property, I use it all the time in those browsers.

In fact, they support both

elementObject.className = "myClass";

and

elementObject.setAttribute("calss", "myClass");

Let's have a link to your problem page or a complete code listing, please.

(And let's just forget about the NS4 crap -- goddess only knows I've tried!)
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

damselInDistressAuthor Commented:
     <style>
            TD.normal{
                  background-color:            #000000;
            }
            TD.highlight{
                  background-color:            blue;
            }
            TD.highlight2{
                  background-color:            orange;
            }            

      </style>
      <script language="javascript">
            function showStrobe(){
                  //alert("show the parking alert");                  
                  var parkingStrobe = new Strobe();
                  parkingStrobe.launch()            
            }      
      </script>
<%if showStrobe=1 then%>
      <center>
      <table Cellpadding="0" Cellspacing="2" width="770">
            <tr name="trafficRow" id="trafficRow">
                  <td id="Cells1" width="39.5"></td>
                  <td id="Cells2" width="39.5"></td>
                  <td id="Cells3" width="39.5"></td>
                  <td id="Cells4" width="39.5"></td>
                  <td id="Cells5" width="39.5"></td>
                  <td bgcolor="black" width="375"><a href="#" target="_new"><img src="includes/homepage/Alert_graphic.jpg" border="0"></a></td>
                  <td id="Cells6" width="39.5"></td>
                  <td id="Cells7" width="39.5"></td>
                  <td id="Cells8" width="39.5"></td>
                  <td id="Cells9" width="39.5"></td>
                  <td id="Cells10" width="39.5"></td>
            </tr>
      </table>
      </center>
<%end if%>

      function Strobe(){
            
            if(typeof(_Strobe_prototype_called) == 'undefined'){
              _Strobe_prototype_called = true;
              Strobe.prototype.changeBG = _changeBG;
              Strobe.prototype.isEven = _isEven;
              Strobe.prototype.launch = _launch;
              Strobe.prototype.clear = _clear;
              Strobe.prototype.wait = _wait;
              Strobe.prototype.reset = _reset;
              Strobe.prototype.counter = _counter;
              Strobe.prototype.resetCells = _resetCells;
             }
            
            this.speed = 50;                  //speed is in milliseconds
            this.numCells = 10                  //number of cells
            this.cellPrefix = "cells"      //prefix of the cell ID
            this.classNormal = "normal"
            this.classSelOne = "highlight"
            this.classSelTwo = "highlight2"
            
            var speed = this.speed;
            var numCells = this.numCells;
            var cellPrefix = this.cellPrefix;
            var classNormal = this.classNormal;
            var classSelOne = this.classSelOne;
            var classSelTwo = this.classSelTwo;
            
            
            var motionCount = 0;
            var runThroughCount = 2;
            var counter = 0;
            var callCount = 0;
            var timerCount = 0;
            var globalStrobeInterval = 0;
            
            function _resetCells(numTD, cllPre, clsNorm){
                  var motionCount = 0;
                  var runThroughCount = 2;
                  var counter = 0;
                  var callCount = 0;
                  for(var x=1; x<=numTD; x++){
                              var selCell = cllPre+x;
                              document.getElementById(cllPre+x).className = clsNorm;            
                              
                        }
            }
            
            function _changeBG(numTD, cllPre, clsNorm, clsOne, clsTwo){
                              
                                                
                              //if it is even go up the winner
                              //if it is odd go down the river
                                    if(Strobe.prototype.isEven(runThroughCount)){
                                          
                                          motionCount = motionCount + 1;
                                    }else{
                                          motionCount = motionCount - 1;
                                    }
                                    

                              //if the motion count leaves the bounds it
                              //must be reset depending on which direction the
                              //river is flowing            
                                          
                              if((motionCount > numTD) || (motionCount <= 0)){
                                    runThroughCount = runThroughCount + 1;
                                    if(Strobe.prototype.isEven(runThroughCount)){
                                          motionCount = 2;
                                    }else{
                                          motionCount = numTD-1;
                                    }
                              }
                                    
                              //if runThroughCount is even we are going up the
                              //river, so increment the cells
                              //if not we are going down the river and
                              //decrement the cells
                              if(Strobe.prototype.isEven(runThroughCount)){
                                    
                                    for(var x=1; x<=numTD; x++){
                                          var selCell = cllPre+x;
                                          //alert(selCell);
                                          if(x == motionCount){
                                                document.getElementById(cllPre+x).className = clsOne;
                                                
                                                if((x-1) > 0){
                                                document.getElementById(cllPre+(x-1)).className = clsTwo;
                                                }
                                                      
                                          }else{
                                                document.getElementById(cllPre+x).className = clsNorm;
                                                
                                          }
                                                
                                    }
                              }else{
                                    for(var x=numTD; x>=1; x--){
                                          
                                          if(x == motionCount){
                                                document.getElementById(cllPre+x).className = clsOne;
                                                
                                                
                                                if((x+1) <= numTD){
                                                document.getElementById(cllPre+(x+1)).className = clsTwo;
                                                }
                                          }else{
                                                document.getElementById(cllPre+x).className = clsNorm;
                                                
                                          }
                                    }
                              }
                              
                              callCount = callCount + 1
                              //alert(callCount);
                              if(callCount == 55){
                                    callCount = 0;
                                    Strobe.prototype.resetCells(numTD, cllPre, clsNorm);
                                    //alert("Interval="+globalStrobeInterval);
                                    Strobe.prototype.clear(globalStrobeInterval);
                                    Strobe.prototype.wait('Strobe.prototype.launch()', 5);
                              }

                  }
            
                  
                  function _launch(){
                        //alert('launching');
                        globalStrobeInterval = setInterval('Strobe.prototype.changeBG('+numCells+',"'+cellPrefix+'","'+classNormal+'", "'+classSelOne+'", "'+classSelTwo+'")', speed);
                        
                  }
                  
                  
                  function _clear(interval1){
                        //clear the interval
                        //alert('Clearing Interval ' + interval1);
                        clearInterval(interval1);
                  }
                  
                  
                  function _reset(strobeInterval, numSecs){
                        var strobeReset = setInterval('Strobe.prototype.launch();Strobe.prototype.clear('+strobeInterval+');  Strobe.prototype.clear('+strobeReset+')', numSecs)
                        
                  }
                  
                  function _wait(func, secs){
                        globalStrobeInterval = setInterval('Strobe.prototype.counter('+ secs +')', 1000);
                  }
                  
                  function _counter(secs){
                        timerCount = timerCount + 1
                        
                        if(timerCount == secs){
                              timerCount = 0;
                              clearInterval(globalStrobeInterval)
                              Strobe.prototype.launch();
                        }
                  }
            //end strobe class
            }
            
            
            
            function _isEven(num){
                  return (num%2) ? false:true;
            
            }
            
      

ZontarCommented:
Just thought of something -- are clsOne, ClsTwo, etc. the actual names of the classes? Then you need to be using

document.getElementById(cllPre+x).className = "clsOne";

etc.
ZontarCommented:
Guess not.

I've never seen so many references to a function prototype in a single piece of code before -- you a Java programmer by any chance? I've been writing too much VBScript lately, I'm starting to forget how to read code like this. ;-)

Might be time to stick in some alerts and see what's getting passed for the id and classname values at that point.

Are you seeing any errors in the JS console? Also, have you tried Venkman out on this thing?
damselInDistressAuthor Commented:
truthfully, I did not write this, am just stuck trying to make it work in Netscape 6/7.  I am not getting any errors, it just doesn't work.  When I do an alert

//alert(selCell);

in IE, I can see that it is incrementing.  In Netscape, it is not.

I have been told that if I can't get this working in Netscape, no big deal, but I would like to anyway.  Unfortunately, I am in over my head on this one :)
ZontarCommented:
Might be a good time to get acquainted with Venkman, then.

http://www.svendtofte.com/code/learning_venkman/

The only way you'll ever be able to figure out what's not happening is to step through it with a debugger, now's as good a time as any to get acquainted.
jaysolomonCommented:
No comment has been added lately, so it's time to clean up this TA.
I will leave the following recommendation for this question in the Cleanup topic area:

Accept: Zontar {http:#9667576}

Please leave any comments here within the next four days.
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!

jAy
EE Cleanup Volunteer
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.