Welcome to WebmasterWorld Guest from 54.145.174.178

Forum Moderators: open

Message Too Old, No Replies

Menu Highlighting with JavaScript

   
2:46 pm on Mar 5, 2003 (gmt 0)

10+ Year Member



This may be more of a JavaScript question, but it is related to CSS. I have little experience with JavaScript, so bear with me.

I'm trying to duplicate the menu setup at Webmonkey.com, but I want to be able to use some javascript to tell the menu to highlight the current page. I noticed you can do something like:

function color_this(id){
document.all[id].style.color="#ffcc33";
}

Which will change the text color of the div id you pass it.

But you can't do something like:

function color_this(id){
document.all[id].style.background-color="#ffcc33";
}

I'm guessing that javascript is reading the "-" as a minus sign. Anyone know a better way to do this? I can post the code for the entire page if need be.

3:26 pm on Mar 5, 2003 (gmt 0)

10+ Year Member



rdoyle,
Try escaping the character with a \ not sure if this will work with the - but I do know it works for '
:)
Mac
3:28 pm on Mar 5, 2003 (gmt 0)

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Have you tried

function color_this(id){
document.all[id].style.bgcolor="#ffcc33";
}

3:35 pm on Mar 5, 2003 (gmt 0)

10+ Year Member



Unfortunately neither of those are working for me...any other ideas?
3:40 pm on Mar 5, 2003 (gmt 0)

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



function color_this(id){
document.all[id].bgcolor="#ffcc33";
}
4:13 pm on Mar 5, 2003 (gmt 0)

10+ Year Member



Nope, still not working. Is it working for you?
5:42 pm on Mar 5, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



The correct syntax would be:

document.all[id].style.backgroundColor="#ff33cc"

or, even just

document.all[id].style.background="#ff33cc"

When changing styles using JavaScript you do not add a hyphen. Instead, each part of the word gets capitalized.

z-index would be zIndex
text-decoration would be textDecoration
font-family would be fontFamily
etc.

7:30 pm on Mar 5, 2003 (gmt 0)

10+ Year Member



Thanks for the responses. I got this to work in IE and Opera (but not Mozilla), so I'm happy.

Thanks again!

8:01 pm on Mar 5, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



It's easy to make it work for Mozilla too.

In your example you're just using document.all, which is IE's implementation in older browsers. It only works in Opera as long as the User-Agent says that it's IE. What you should do is first check whether document.getElementById is supported. If not, you can use document.all.

if(document.getElementById) {
document.getElementById('idname').style.backgroundColor="#ff33cc";
}
else if(document.all) {
document.all['idname'].style.backgroundColor="#ff33cc";
}

2:12 pm on Mar 6, 2003 (gmt 0)

10+ Year Member



Ah ha! Even better. Thanks!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month