Welcome to WebmasterWorld Guest from 54.234.114.182

Forum Moderators: open

Message Too Old, No Replies

Menu Highlighting with JavaScript

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

New User

10+ Year Member

joined:Mar 5, 2003
posts:11
votes: 0


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)

Preferred Member

10+ Year Member

joined:Feb 27, 2003
posts:637
votes: 0


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)

Senior Member

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

joined:Mar 20, 2002
posts:3732
votes: 0


Have you tried

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

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

New User

10+ Year Member

joined:Mar 5, 2003
posts:11
votes: 0


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

Senior Member

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

joined:Mar 20, 2002
posts:3732
votes: 0


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

New User

10+ Year Member

joined:Mar 5, 2003
posts:11
votes: 0


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

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 0


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)

New User

10+ Year Member

joined:Mar 5, 2003
posts:11
votes: 0


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)

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 0


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)

New User

10+ Year Member

joined:Mar 5, 2003
posts:11
votes: 0


Ah ha! Even better. Thanks!