Solved

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

Posted on 2003-10-31
10
2,476 Views
Last Modified: 2012-05-04
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;

  }

}
0
Comment
Question by:damselInDistress
  • 5
  • 3
10 Comments
 
LVL 11

Accepted Solution

by:
Zontar earned 125 total points
ID: 9667576
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.
0
 

Author Comment

by:damselInDistress
ID: 9670906
Actually, it doesn't seem to work in Netscape 6 or 7.  I don't care about 4.
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9672203
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!)
0
 

Author Comment

by:damselInDistress
ID: 9672254
     <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;
            
            }
            
      

0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 11

Expert Comment

by:Zontar
ID: 9672260
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.
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9672559
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?
0
 

Author Comment

by:damselInDistress
ID: 9672592
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 :)
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9672674
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.
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10346516
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
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now