Adding another class name 1

[cepiscipher]

Hello (actually I'm a web designer)

I'm trying to add another class name to this javascript so I can make a different class in the css to be used on a different table. I no knoo nothing about javascript. I got this js from:

http://www.webreference.com/programming/javascript/jf/column7/31.htm

I think it has to do with just adding an "and" (if that's possible on javascript) to this part odf the code:

     && el[i].parentNode.parentNode.className.indexOf("TdRollOver") != -1){

to have two defined css.

Any help please...
Thanx
cepiscipher

 

[shu745]

well just another class is quite easy:

inbetween your <style></style> tags just add

.tbl .newClassName {
class attributes
}

then call that css in the javascript function instead of the, on, off, hover, or click classes that are there already.

OR

you can just modify one of the current classes to change it's attributes. If you want to do that then look betweent the <style></style> tags and modify one of the classes there.

hope this helps.

 

[cepiscipher]

Thanks for the replay.

I know how to add them in the CSS document. I want to use the on, off, hover, or click classes in the javascript for another class. I already have working the TdRollOver class on all the <TD>'s, what I want is to do the same effect with another class to only one of the <TD>'s.
Here's the link of the work I'm doing:

http://www.celsoportela.com/vellonera/esc_generos.htm

The first row is the one that I want it to be different, but with the same fuctions (on, off, hover, or click classes).

Thanks again
Celso

 

[BillyRayPreachersSon]

You could use this to check for multiple classnames:

var cn = el[i].parentNode.parentNode.className;
if (cn.indexOf('TdRollOver') != -1 || cn.indexOf('TdRollOverClass2') != -1){

to check for either "TdRollOver" or "TdRollOverClass2" as a classname.

Hope this helps,
Dan

 

[cepiscipher]

I went ahead and tried this suggestion, but the js won't run.
Here are the links of the site I'm working on:

http://www.celsoportela.com/vellonera/call.htm

(this the final DEMO of the site)

http://www.celsoportela.com/vellonera/esc_generos.htm

(this is the frame on which I’m using the code, I made a few changes to it. I’m calling it from outside as well as the css file.)

Here is the complete javascript:

// JavaScript Document
var elem = "TR";
   var rClick;

 window.onload = function(){
  if(document.getElementsByTagName){
   var el = document.getElementsByTagName(elem);
    for(var i=0; i<el.length; i++){
     if(el[i].childNodes[0].tagName != "TH"
     && el[i].parentNode.parentNode.className.indexOf("TdRollOver") != -1){
     if(i%2 == 1){
      el[i].className = "on";
      el[i].oldClassName = "on";
      el[i].onmouseout  = function(){
	     this.className = "on";
      }
    } else {
      el[i].className = "off";
      el[i].oldClassName = "off";
      el[i].onmouseout  = function(){
	     this.className = "off";
      }
    }
      el[i].onmouseover = function(){
	     if(this.className == this.oldClassName)
	       {this.className = "hover";}
      }
      el[i].onclick = function(){
       if(rClick){
        rClick.className=rClick.oldClassName;
        rClick.onmouseout = function(){this.className = this.oldClassName};
       }
        this.className = "click";
        rClick = this;
        this.onmouseout = function(){return true};
       }
    }
  }
 }
}
//-->

Thanks for any help

Celso

 

[cepiscipher]

I went ahead and tried this suggestion, but the js won't run.  
Here are the links of the site I'm working on:

http://www.celsoportela.com/vellonera/call.htm

(this the final DEMO of the site)

http://www.celsoportela.com/vellonera/esc_generos.htm

(this is the frame on which I’m using the code, I made a few changes to it. I’m calling it from outside as well as the css file.)

Here is the complete javascript:

<code>
// JavaScript Document
var elem = "TR";
   var rClick;

 window.onload = function(){
  if(document.getElementsByTagName){
   var el = document.getElementsByTagName(elem);
    for(var i=0; i<el.length; i++){
     if(el.childNodes[0].tagName != "TH"
     && el.parentNode.parentNode.className.indexOf("TdRollOver") != -1){
     if(i%2 == 1){
      el.className = "on";
      el.oldClassName = "on";
      el.onmouseout  = function(){
         this.className = "on";
      }
    } else {
      el.className = "off";
      el.oldClassName = "off";
      el.onmouseout  = function(){
         this.className = "off";
      }
    }
      el.onmouseover = function(){
         if(this.className == this.oldClassName)
           {this.className = "hover";}
      }
      el.onclick = function(){
       if(rClick){
        rClick.className=rClick.oldClassName;
        rClick.onmouseout = function(){this.className = this.oldClassName};
       }
        this.className = "click";
        rClick = this;
        this.onmouseout = function(){return true};
       }
    }
  }
 }
}
//-->
</code>

Thanks for any help

Celso