homepage Welcome to WebmasterWorld Guest from 54.166.108.167
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




msg:1489084
 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




msg:1489085
 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




msg:1489086
 3:28 pm on Mar 5, 2003 (gmt 0)

Have you tried

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

rdoyle720




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

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

korkus2000




msg:1489088
 3:40 pm on Mar 5, 2003 (gmt 0)

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

rdoyle720




msg:1489089
 4:13 pm on Mar 5, 2003 (gmt 0)

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

DrDoc




msg:1489090
 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




msg:1489091
 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




msg:1489092
 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




msg:1489093
 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