Solved

JavaScript / CSS class changes

Posted on 2006-06-21
7
1,069 Views
Last Modified: 2013-11-19
I am using the information I found under this entry.
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_12019339.html?query=javascript+change+class&clearTAFilter=true

the code works great in both Internet Explorer and Firefox. My issue is the following...
I want to be able to change the class of more than just one class.

It is my understanding that using   this  creates a clone of the object containing it.
Question 1: Can someone explain what exactly   this   does? example: onclick="function MyFunc(this, 'option');"

I want to be able to change the class of MENULINK1 and MENULINK2 at the same time should the need ever arise.
In short I want to be able to use   this   and/or the ID of an object to achieve the same result.
Question 2: How can i do this?

Here is my code:
***********************************************************************
<script type="text/javascript">
<!--
     function setClass(obj,name){
          obj.className = name;
     }
//-->
</script>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="sideMenuTable">
     <tr>
          <td class="sideMenuHeaderCell">
               SECTION
          </td>
     </tr>
     <tr>
          <td class="sideMenuLinkCell" id="MENULINK1" onmouseover="setClass(this,'sideMenuLinkCellHover')" onmouseout="setClass(this,'sideMenuLinkCell')">
               Menu Link 1
          </td>
     </tr>
     <tr>
          <td class="sideMenuLinkCell" id="MENULINK2">
               Menu Link 2
          </td>
     </tr>
     <tr>
          <td class="sideMenuLinkCell" id="MENULINK3">
               Menu Link 3
          </td>
     </tr>
</table>

***********************************************************************
I have tried
          onmouseover="setClass('MENULINK1','sideMenuLinkCellHover')"
and it did not work. ultimately I want to be able to have the following functionality, good in Internet Explorer 6 & 7 and FireFox. Since that makes up about 77% of users, I'm not too worried about other browsers. Think tooltips.

<td class="sideMenuLinkCell" id="MENULINK1" onmouseover="setClass('MENULINK1','sideMenuLinkCellHover'); setClass('MENULINK3','sideMenuLinkCellHover');" >
-And/Or-
<td class="sideMenuLinkCell" id="MENULINK1" onmouseover="setClass(this,'sideMenuLinkCellHover'); setClass('MENULINK3','sideMenuLinkCellHover');" >
0
Comment
Question by:cipiWeb
  • 3
  • 2
  • 2
7 Comments
 
LVL 30

Assisted Solution

by:callrs
callrs earned 150 total points
ID: 16950623
Try
onmouseover="setClass(this,'sideMenuLinkCellHover'); setClass(document.getElementById('MENULINK2'),'sideMenuLinkCellHover');"
onmouseout="setClass(this,'sideMenuLinkCell');  setClass(document.getElementById('MENULINK2'),'sideMenuLinkCell');">

Or you can put the statements into a function & call that function instead.
The word "this" is just referring to the element who calls the function "setClass", in case "this" refers to the element whose id is 'MENULINK1'.
0
 
LVL 30

Expert Comment

by:callrs
ID: 16950634
who calls --> that calls
in case "this" --> in this case, "this" ...
oops!
0
 
LVL 7

Accepted Solution

by:
geordie007 earned 350 total points
ID: 16950638

i would recommend that you look into coding this as suggested in http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21893818.html rather than as a table, however back to your point...

yes, you can change more than one class. using your code as an example, you first simply need to change your function slightly. the original idea of that function is that you pass "this" so the function knows where to find the className is, but if you don't pass a "this" to it (like 'MENULINK3') it has no idea where to find the className. so, we test to see if it can find the object as if it was passed as "this", and if it can't we do the standard getElementById on the passed object. secondly, you just call your function again. you can call as many as you want, separating each one with a semi-colon. the whole thing looks like this:

<script type="text/javascript">
<!--
     function setClass(obj,name){
              if(obj.id){
                   obj.className = name;
              }else{
                  document.getElementById(obj).className = name;
              }
     }
//-->
</script>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="sideMenuTable">
     <tr>
          <td class="sideMenuHeaderCell">
               SECTION
          </td>
     </tr>
     <tr>
          <td class="sideMenuLinkCell" id="MENULINK1" onmouseover="setClass(this,'sideMenuLinkCellHover');setClass('MENULINK3','sideMenuLinkCellHover')" onmouseout="setClass(this,'sideMenuLinkCell');setClass('MENULINK3','sideMenuLinkCell')">
               Menu Link 1
          </td>
     </tr>
     <tr>
          <td class="sideMenuLinkCell" id="MENULINK2">
               Menu Link 2
          </td>
     </tr>
     <tr>
          <td class="sideMenuLinkCell" id="MENULINK3">
               Menu Link 3
          </td>
     </tr>
</table>

this is not the ideal way to do this, i'm just answering your question which is how to amend your code to achieve your goals.

hope this helps.

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:cipiWeb
ID: 16950742
I am looking back and forth between both posts. How would you recommend changing two classes in what you called the ideal manner? I am always looking for new and intuitive ways of coding.

Thank you both for your input, I am raising the point value so I can provide a fair split for both of you.
0
 
LVL 7

Expert Comment

by:geordie007
ID: 16950765

well, you could pass all the id's that need to change to a single function as arguments. then in your function, you could use arguments.length to loop through the id's, changing each one to the required class. i would just find this easier to maintain, and i believe it would be more processor friendly, than calling a function several time for the same event.

that would be one way to do it, but i'm sure there are several.
0
 

Author Comment

by:cipiWeb
ID: 16950811
You have been very helpful, I really appreciate it. Are you saying to store what I need changed in some sort of array? Could you provide an example? I appologize for the multitude of questions, I like understanding little piece of code that I am using, and usually learn best through example. If this answer constitutes a new question I'd be more than happy to give credit where credit is due.
0
 
LVL 7

Expert Comment

by:geordie007
ID: 16950944

yeah, kind of. this is a quick example of the type of thing i'm talking about. your function now only takes one names argument (the class name), anything else passed to it is considered to be an id to change:

<script type="text/javascript">
<!--
 function setClass(name){
        var num = arguments.length;
        if(num<2){
            return;
        }
       for(i=1;i<num;i++){
            if(arguments[i].id){
                  arguments[i].className = name;
            }else{
                  document.getElementById(arguments[i]).className = name;
            }
       }
 }
//-->
</script>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="sideMenuTable">
     <tr>
          <td class="sideMenuHeaderCell">
               SECTION
          </td>
     </tr>
     <tr>
          <td class="sideMenuLinkCell" id="MENULINK1" onmouseover="setClass('sideMenuLinkCellHover',this,'MENULINK3');" onmouseout="setClass('sideMenuLinkCell',this,'MENULINK3');">
               Menu Link 1
          </td>
     </tr>
     <tr>
          <td class="sideMenuLinkCell" id="MENULINK2">
               Menu Link 2
          </td>
     </tr>
     <tr>
          <td class="sideMenuLinkCell" id="MENULINK3">
               Menu Link 3
          </td>
     </tr>
</table>

it accepts "this" and a specific id name. as i say, this is just a quick example. you may want to spend more time on it, and put some more checks in there.

0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

735 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