homepage Welcome to WebmasterWorld Guest from 184.73.104.82
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Menu Highlighting with JavaScript
rdoyle720

10+ Year Member



 
Msg#: 296 posted 2:46 pm on Mar 5, 2003 (gmt 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.

 

macrost

10+ Year Member



 
Msg#: 296 posted 3:26 pm on Mar 5, 2003 (gmt 0)

rdoyle,
Try escaping the character with a \ not sure if this will work with the - but I do know it works for '
:)
Mac

korkus2000

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



 
Msg#: 296 posted 3:28 pm on Mar 5, 2003 (gmt 0)

Have you tried

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

rdoyle720

10+ Year Member



 
Msg#: 296 posted 3:35 pm on Mar 5, 2003 (gmt 0)

Unfortunately neither of those are working for me...any other ideas?

korkus2000

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



 
Msg#: 296 posted 3:40 pm on Mar 5, 2003 (gmt 0)

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

rdoyle720

10+ Year Member



 
Msg#: 296 posted 4:13 pm on Mar 5, 2003 (gmt 0)

Nope, still not working. Is it working for you?

DrDoc

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



 
Msg#: 296 posted 5:42 pm on Mar 5, 2003 (gmt 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.

rdoyle720

10+ Year Member



 
Msg#: 296 posted 7:30 pm on Mar 5, 2003 (gmt 0)

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

Thanks again!

DrDoc

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



 
Msg#: 296 posted 8:01 pm on Mar 5, 2003 (gmt 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";
}

rdoyle720

10+ Year Member



 
Msg#: 296 posted 2:12 pm on Mar 6, 2003 (gmt 0)

Ah ha! Even better. Thanks!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved