Google Answers: How to: dynamically set the css class for an element.

View Question

Q: How to: dynamically set the css class for an element. ( No Answer, 4 Comments )

Question

Subject: How to: dynamically set the css class for an element.
Category: Computers > Programming
Asked by: gjcmg-ga
List Price: $30.00

Posted: 15 Nov 2003 20:57 PST
Expires: 15 Dec 2003 20:57 PST
Question ID: 276326

Generally, I want to have a table cell change colors on mouseover. 

This will work:
<TR><TD id="communityList"
onmouseover='this.style.backgroundColor="yellow";'
onmouseout='this.style.backgroundColor="gold";'>

However, it is hard coded.

I want the color to be determined by values set in an attached css
stylesheet. People will able to select from a choice of stylesheets,
so the color needs to be set by the stylesheet selected.

One specific option I can imagine is this:
Dynamically set the css class for the <td> element so that it changes
to 'communityOver' on mouseover and changes back to 'communityOut' on
mouseout.
The two classes are defined in the attached stylesheet.

Something like this:

<TR><TD id="communityList"
onmouseover='this.setAttribute("className","communityOver");'
onmouseout='this.setAttribute("className","communityOut");'><A
href='community.asp'>Community</A></TD></TR>

From the stylesheet:

.communityOver {
	background-color: yellow;
}

.communityOut {
	background-color: gold;
}

Unfortunately this doesn't work for me in IE 6.
Maybe there is another way to go about it.

The goal is to have the mouseover background color of the cell set by
an external stylesheet.

Any suggestions?

Answer

There is no answer at this time.

Comments

Subject: Re: How to: dynamically set the css class for an element.
From: ramu_bits-ga on 16 Nov 2003 12:32 PST

I doubt the style sheet inclusion in your html file! If that is
perfect then there is no problem.

The code seems to be ok! It should work and infact it is working on my browser;
Though the recommended practice is to use object.className property
{your usage should be any problem! }

In addition I have tried all other combinations of the same...
Everything works perfectly welL!



<html>
<head>

<style>

.communityOver { 
 background-color: #00FFEE; 
} 
 
.communityOut { 
 background-color: green; 
} 
</style>

<link rel="stylesheet" type="text/css" href="style.css">

<script>
function doit( str )
{
	var text = '<div id="newDIV" name="newDIV" class="' + str +'">';
	text = text + document.all('newDIV').innerHTML;
	text = text + '</div>';
 
	//window.alert( text );
	//document.all('row').innerHTML= text;
	//document.all('newDIV').className = str=='communityOut'?'communityOver':

'communityOut' ;
	document.all('newDiv').className = str;

}
</script>
</head>
<body>
<table>
<tr>
<td id="row" name="row" onmouseOver="doit('communityOut');" onmouseout="doit(

'communityOver');" >
	Hi!
</td>
</tr>
<tr>
<td id="row" name="row" onmouseOver="this.className='comOver';"
onmouseout="this.className=

'comOut';" >
	Hi!
</td>
</tr>
<tr>
<td id="row" name="row"
onmouseOver='this.setAttribute("className","comOver");' onmouseout=

'this.setAttribute("className","comOut");' >
	Hisdfajfjz!
</td>
</tr>

<TR><TD id="communityList" 
onmouseover='this.style.backgroundColor="yellow";' 
onmouseout='this.style.backgroundColor="gold";'> 
New Hello!
</td>
</tr>

<TR><TD id="communityList" 
onmouseover='this.setAttribute("className","comOver");' 
onmouseout='this.setAttribute("className","comOut");'><A 
href='community.asp'>Community</A></TD></TR> 

<TR><TD id="communityList2" 
onmouseover='this.setAttribute("className","communityOver");' 
onmouseout='this.setAttribute("className","communityOut");'><A 
href='community.asp'>Community</A></TD></TR> 
 
</table>

<div id="newDIV" name="newDIV" class="communityOver">Hellow!</div> 
</body>

You may check the same page being served at
http://www.geocities.com/rk_gaddipati/tryme.html


with best wishes,
Ramki

Subject: Re: How to: dynamically set the css class for an element.
From: ramu_bits-ga on 16 Nov 2003 12:36 PST

let me correct; 

{your code should be any problem!} ---->to----> {your code shouldn't
be any problem}

By the way; I am using IE 6.0.2800.... on Windows XP (professional).

Subject: Re: How to: dynamically set the css class for an element.
From: dewolfe001-ga on 17 Nov 2003 17:02 PST

I'd have to agree with ramu_bits-ga about the solution and treat his
comment as the answer.

This is a pared down version that I just tested on IE 6.0 (doesn't
work on Netscape):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>

<BODY>
<style> 
 .communityOver {  
 background-color: #00FFEE;  
}  
  
.communityOut {  
 background-color: green;  
}  
</style>
<table>
<TR><TD id="communityList"  
onmouseover='this.setAttribute("className","communityOver");'  
onmouseout='this.setAttribute("className","communityOut");'>This is so
cool</TD></TR>
</table>
</BODY>
</HTML>

Subject: Re: How to: dynamically set the css class for an element.
From: gjcmg-ga on 24 Nov 2003 08:49 PST

Thanks for your comments and code!

RE: You may check the same page being served at
http://www.geocities.com/rk_gaddipati/tryme.html

When I browse the geocites link, I see only a list of words with no
background colors. If I bring my mouse over the words, then various
colors appear behind each word. And the colors do change as I hover
and exit each word.

So the problem is that no colors appear when the page first displays.
After I mouse over, then it works as desired. But that isn't good
enough.

Do you have the same experience?
I have IE 6.0.2800.1106.xpsp2.030422-1633 on Windows XP Pro SP1 with
all current updates.

I find the only code that works consistently is to use image files
that are swapped on mouse over and swapped back on mouse exit.

I use an unordered list. Simplified code is like this:
<DIV id="communities">
<UL>
<LI><A href='community.asp'>Community</A></LI>
</UL>
</DIV>

Then the stylesheep:
#communities {
	margin-top: 1.5em;
	text-align: left;
	width: 100%;
}

#communities ul {
	margin: 0; /*removes indent IE and Opera*/
	padding: 0; /*removes indent Mozilla and NN7*/
	list-style-type: none; /*turns off display of bullet*/
}

#communities li {
	margin: 0 0 1px 0;
}

#communities a {
	color: #fff;
	/*/*/display: block;
	padding: 1px 2px 1px 18px;
	border: 1px solid #ef8d00;
	width: 100%;
	background-color: #060;
	background-image:  url(images/comListOut_Green.gif); /* */
}

#communities a:link, #communities a:visited {
	color: #fff;
	/*/*/color: #fff;
	text-decoration: none; /* */
}
#communities a:hover {
	border: 1px solid #ef8d00;
	background-color: #393;
	background-image:  url(images/comListOver_Green.gif);
	color: #fff;
}

The two image files, comListOut_Green.gif and comListOver_Green.gif
are swapped on hover and exit. The images are larger than needed to
allow for different resolutons and text sizes.

Here is a link to a page using this code. Look at the green button
list of communities in the left column.

http://www.e-plaza.org/default.asp

Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.

Search Google Answers for

Google Home - Answers FAQ - Terms of Service - Privacy Policy