PDA

Click to See Complete Forum and Search --> : object.style.color = "" not working???

hubris00
07-15-2003, 01:05 PM
I have a simple javascript function that gets called when a user mouses over some text in a menu. The idea is to change the background color and the text color of a floating css layer (a GoLive Floating Box).
The changing of the background colorworks fine, but the changing of the text color doesn't work.

Other changes to the style do work though, for instance, if it was .style.wordSpacing that I was changing, that works fine. It is ONLY the .style.color that I cannot change. I've tried everything from assigning no color to the text, to assigning /font color= to the text, to giving the text a color through anouther css tag applied to any and all of <p>, <span>, and <div>... nothing works. Am I nuts?

the javascript function:

function color1() {
document.getElementById("layer1").style.backgroundColor = "#400267";
document.getElementById("layer1").style.color = "#000267";
}

I've tried single quotes, different colors, everything.... it just needs to work in IE 5+.

any and all help appreciated thanks,

-Chris
Khalid Ali
07-15-2003, 01:07 PM
Make sure layer1 does exist...and this function color1() is being called
pyro
07-15-2003, 01:09 PM
Works fine:

<script type="text/javascript">
function change() {
obj = document.getElementById("mydiv");
obj.style.backgroundColor = "#000000";
obj.style.color = "#ffffff";
}
</script>

</head>

<body>
<a href="#" onclick="change(); return false;">change</a>
<div id="mydiv">testing</div>
hubris00
07-15-2003, 01:10 PM
The function is being called. The background color changes just fine. The text color does not change.
pyro
07-15-2003, 01:11 PM
The example I posted works fine...
hubris00
07-15-2003, 01:36 PM
Hey Pyro,
Your code works as is, but misses what I was trying to achieve... Your code uses 'onclick'... I was hoping to use onmouseover... which works fine too.

The problem is when I put the href within the <div> tags... then it replicates the problem I was having - the background changes, but the text doesn't....

function change() {
obj = document.getElementById("mydiv");
obj.style.backgroundColor = "#000000";
obj.style.color = "#ffffff";
}
</script>

</head>

<body>

<div id="mydiv">
<a href="#" onmouseover="change(); return false;">change</a>
</div>
</body>

(and it's not just the link color of the page that's superceding it... If I use a css style to change the color beforehand, that color won't change either)
any ideas? thanks in advance
pyro
07-15-2003, 02:46 PM
It works fine, if you put text in there other than just the link. It obviously wouldn't change the link's color...
hubris00
07-15-2003, 03:30 PM
It obviously wouldn't change the link's color... <---- that's exactly what I want to do, I want to change the links color... can I do that with the addition of a css style and a psuedo a tag?

Thanks for the time

-Chris
pyro
07-15-2003, 04:02 PM
<script type="text/javascript">
function change() {
obj = document.getElementById("mydiv");
links = document.getElementById("link");
obj.style.backgroundColor = "#000000";
links.style.color = "#ffffff";
}
</script>

</head>

<body>

<div id="mydiv">
<a href="#" onmouseover="change(); return false;" id="link">change</a>
</div>
</body>
hubris00
07-15-2003, 04:15 PM
Brilliant... works perfectly, thanks a ton.

-Chris
pyro
07-15-2003, 04:15 PM
You're welcome... :)
hubris00
07-15-2003, 04:55 PM
One thing with Pyro's code, the link used the brower default link blue before the color change, and it was underlined.... I had a little trouble assigning a CSS style (to change color and no decoration) to it with GoLive... so I had to edit the code as follows:

<div id="layer1">
<a href="#" onmouseover="color1(); return false;"><span class="mainmenu" id="link1">change</span></a>
</div>

note: the ID is assigned to the span, rather than the href as per Pyro's code...

the class "mainmenu" sets the before color and no text decoration (underline) among other things.

The end result is a Floating Box (layer1-GoLive) which when the mouse rolls over the text, the box is filled with a different color, and the link text changes color....

Thanks again Pyro,

-Chris