PDA

Click to See Complete Forum and Search --> : Changing CSS with JavaScript

aepiphid
07-10-2003, 02:59 PM
I've been tearing my hair out with this one. I'm in the beginning stages of a little project. I have two divs. I want to be able to change the class associated with the divs, but I want to be able to choose which one to change. I found a script that will only allow me to hard code the div I want to change.

Here's the original script:

http://www.plhmedia.com/ex/original.html

I've been trying to modify it to meet my needs. I've tried MANY different things, but to no avail. This page should give you some idea of what I'm trying to accomplish - I reset the script to a semi-recognizable form:

http://www.plhmedia.com/ex/test.html

I tried creating a variable and setting its value to the value of the radio button, then having the function call that variable. But either/both my syntax or my logic are faulty.

I'd appreciate a nudge in the right direction.

Thanks!
jovialjonny
07-10-2003, 03:05 PM
You can change classes by getting a reference to the div like so:

(say div's id = myDiv)
var theDiv = document.getElementById("myDiv");
theDiv.className = "newclassName";
aepiphid
07-10-2003, 03:09 PM
I believe the process you've described is how the original script works (...original.html above).

How do I allow the user to control which div will be affected by the change of class? I think you'll see what I'm after if you pull the source. (...test.html).

Thanks!
jovialjonny
07-10-2003, 03:17 PM
I see what you are trying to do but I wouldn't bother using a form for it. I'd go with having 2 divs or spans that the user can click on, and have their onClick method do this:

onClick="changeClass('new')";

Then in changeClass:
function changeClass(theNewClass)
{ var id= window.event.srcElement.id;//gives a reference to object that called it
var theDiv = document.getElementById(id);
theDiv.className = theNewClass;
}
jovialjonny
07-10-2003, 03:19 PM
Sorry I'm a bit fuzzy today! I think you can set the class of the object that called the method with:
window.event.srcElement.className

instead of the long way round I had up there.
Jona
07-10-2003, 03:22 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Untitled</title>
<style type="text/css">
.old { background-color:red; width:20px;}
.new { background-color:yellow; width:20px}
</style>
<script type="text/javascript">
function change(id){
if(document.getElementById(id).className=="old"){
document.getElementById(id).className="new";
}else{
document.getElementById(id).className="old";}
}
</script>
</head>
<body>
<div class="old" id="foo1">Blah</div>
<div class="old" id="foo2">Blah</div>
<form action="" name="f1">
<input type="radio" name="choose" value="foo1">Change Left DIV |
<input type="radio" name="choose" value="foo2">Change Right DIV
</form>
<a href="#" onClick="if(document.f1.choose[0].checked){ change(document.f1.choose[0].value);}else if(document.f1.choose[1].checked){change(document.f1.choose[1].value);}
return false;">Switch</a>
</body>
</html>


[J]ona
Jona
07-10-2003, 03:24 PM
Originally posted by jovialjonny
Sorry I'm a bit fuzzy today! I think you can set the class of the object that called the method with:
window.event.srcElement.className

But only in IE. Use event.target for Netscape.

[J]ona
aepiphid
07-10-2003, 03:28 PM
I should probably clue you in as to what this will end up being. In my example, there is only one class (green) and two divs. Eventually, there will be 18 divs and 40+ options for how to change them.

I want the user to be able to select a div to change and then the class to which it should be changed. When I create the final version, instead of background colors, making these changes will swap in background images.

Picture a charm bracelet with 18 charm links. Every link is the same when you load the page, but you can swap in a link of your choice from more than 40 different options. How can I do this without displaying the 40+ options 18 different times?
Jona
07-10-2003, 03:51 PM
Originally posted by aepiphid
I want the user to be able to select a div to change and then the class to which it should be changed.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Untitled</title>
<style type="text/css">
.old { background-color:red; width:20px;}
.new { background-color:yellow; width:20px}
</style>
<script type="text/javascript">
function change(id, cClass){
document.getElementById(id).className=cClass;
}
</script>
</head>
<body>
<div class="old" id="foo1">Blah</div>
<div class="old" id="foo2">Blah</div>
<form action="" name="f1">
<input type="radio" name="choose" value="foo1">Change Left DIV |
<input type="radio" name="choose" value="foo2">Change Right DIV<br>
<input type="radio" name="cClass" value="new">New Class |
<input type="radio" name="cClass" value="old">Old Class
</form>
<a href="#" onClick="if(document.f1.choose[0].checked && document.f1.cClass[0].checked){change(document.f1.choose[0].value, document.f1.cClass[0].value);} else if(document.f1.choose[0].checked && document.f1.cClass[1].checked){change(document.f1.choose[0].value, document.f1.cClass[1].value);} else if(document.f1.choose[1].checked && document.f1.cClass[0].checked){ change(document.f1.choose[1].value, document.f1.cClass[0].value);} else if(document.f1.choose[1].checked && document.f1.cClass[1].checked){change(document.f1.choose[1].value, document.f1.cClass[1].value);} return false;">Switch</a>
</body>
</html>


There's a more dynamic way to do it, which is to use a for() loop and check each one that way...

[J]ona
Jona
07-10-2003, 04:06 PM
Originally posted by Jona
There's a more dynamic way to do it, which is to use a for() loop and check each one that way...

And here's how you do that:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Untitled</title>
<style type="text/css">
.old { background-color:red; width:20px;}
.new { background-color:yellow; width:20px}
</style>
<script type="text/javascript">
function change(id, cClass){
document.getElementById(id).className=cClass;
}
</script>
</head>
<body>
<div class="old" id="foo1">Blah</div>
<div class="old" id="foo2">Blah</div>
<form action="" name="f1">
<input type="radio" name="choose" value="foo1">Change Left DIV |
<input type="radio" name="choose" value="foo2">Change Right DIV<br>
<input type="radio" name="cClass" value="new">New Class |
<input type="radio" name="cClass" value="old">Old Class
</form>
<a href="#" onClick="for(i=0; i<2; i++){
if(document.f1.choose[i].checked){
for(j=0; j<2; j++){
if(document.f1.cClass[j].checked){
change(document.f1.choose[i].value, document.f1.cClass[j].value);
}}}} return false;">Switch</a>
</body>
</html>


[J]ona
aepiphid
07-10-2003, 04:07 PM
Thanks for all your help Jona. I made some modifications to your first solution, and this is the result: http://www.plhmedia.com/ex/test2a.html

I was thinking a case statement might be in order to streamline things a bit, but regardless, I learned a lot from this exercise. Thanks again!
Jona
07-10-2003, 04:09 PM
Originally posted by aepiphid
I was thinking a case statement might be in order to streamline things a bit, but regardless, I learned a lot from this exercise. Thanks again!

A switch statement (not case ;)) would be more useful if you were to use a conditional statement. However, I've just posted again (see above) a more dynamic way of doing this. Sorry for taking so long, I'm not the most available person on earth. :)

[J]ona