Solved

JavaScript / CSS class changes

Posted on 2006-06-21
7
1,062 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
Comment Utility
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
Comment Utility
who calls --> that calls
in case "this" --> in this case, "this" ...
oops!
0
 
LVL 7

Accepted Solution

by:
geordie007 earned 350 total points
Comment Utility

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
Highfive Gives IT Their Time Back

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!

 

Author Comment

by:cipiWeb
Comment Utility
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
Comment Utility

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
Comment Utility
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
Comment Utility

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

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

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

763 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

8 Experts available now in Live!

Get 1:1 Help Now