...

View Full Version : JavaScript caused a link hover problem



Jd_Johnson8
02-21-2007, 09:49 PM
Hi all,

I am new to these boards. I found this site by googling about a problem i have. It is a bit in depth, but I will keep the description as short as possible. It is similar to a problem somebody else posted, but different enough that the solution suggested didn't work.

I am using Server Side Includes for the navigation in the website i am designing. With some help, i was able to figure out how to change the link (text) color from blue to white based on what page the user is viewing. However, now that i can do that, the hover action of changing the link (text) from blue to red is not working. It is important that the hover still works.

The following is the javascipt that i am using to change the color:

function linkByLinkName(LinkName) {
// Gets link name from parameter
var l = document.getElementById(LinkName);

if (l){
l.style.color = '#FFFFFF';
}
}

I am using an external style sheet, and the code for the hover looks like this:

#tabs a:hover {color:#FF0000;}

This is the code inside each of my web pages:
--
<script type="text/javascript" src="../includes/miscscript.js">
</script>
</head>

<body onload="linkByLinkName('Link_Heaters')">

--

I also just found a sort of big error with my code - it doesn't work in FF at all! While this is an issue, i am aware that over 95% of the users who will be using the site i'm working on will be IE users. I haven't tested it in IE 7 yet...So if anybody has any suggestions for the FF problem, I'd appreciate help with that as well!

I would greatly appreciate your help!!

Thanks in advance!

JdJ

vwphillips
02-22-2007, 12:53 PM
IE uses hex for colors

FF used rgb

so you will need an || condition to cope with both formats

BonRouge
02-22-2007, 01:07 PM
You might be better off switching the class name and adding a new class to your CSS.

Jd_Johnson8
02-22-2007, 03:55 PM
Thanks for the responses, I do appreciate it. But, could you both be a little more specific? I have been out of school for this stuff for three years now, and am only get back into web design (most of my job so far has been graphic design) within the past six months. So, I guess I'm asking for it to be completely spelled out for me, if that's not too much to ask??? Or, if there is a good online reference, or book that i could get from the library...

Since I've started working on this site, a lot has changed. I've pretty much taught myself how to use css, and when I was in school, FF was never even mentioned...I appreciate your patience with me!!

Sincerely,

JdJ

BonRouge
02-22-2007, 04:17 PM
Maybe instead of this:
if (l){
l.style.color = '#FFFFFF';
}
You could do this:
if (l){
l.className+=" newClass";
}

and in your CSS, do this:
.newClass {
color:#fff;
}

That should work.

Jd_Johnson8
02-22-2007, 05:55 PM
BonRouge,

I understand what you are saying now! Yay!! Thank you, thank you!!! I do have a couple of questions:

1. if i want to change more than just the font color, like, say, the background image, and i specify that in the class of my css file, will that be applied based on the JavaScript code example you just gave me?

2. because i'm not too familiar with JavaScripting, i want to be sure i have the syntax right. In the example you gave, u used double quotes around the class name instead of single like in my code. and, there is a + before the =. Are both of those correct syntax?

3. You said FF uses RGB. Well, I use Dreamweaver, and the color picker always shows up in Hex code. Do you know if there is a way to change that to RGB? And are there any colors in RGB that IE won't recognize?? I'm sorry if these questions sound silly - but FF is REALLY new to me...

Thanks a million and one!!!

JdJ

Jd_Johnson8
02-26-2007, 08:29 PM
Hey all,

so i've been playing around with the code, and i cannot get it to work.

Here is the full function that i was originally using in my .js file:

code:
function linkByLinkName(LinkName) {
//Gets link name from parameter
var l = document.getElementById(LinkName);

if (l){
l.style.color = '#000000';
}
}

BonRouge's suggestion was to use:
code:
if (l){
l.className+=" newClass";
}

which looks a little bit different from mine (see my questions in my last post).

my home page looks like this:

code:
<script type="text/javascript" src="includes/ClassScript.js">
</script>
</head>

<body onload="linkByLinkName('Link_Home')">

The navigation looks like this:
code:
<td height="475" align="center" valign="top" id="menu">
<a href="/TEST/Default.asp" id="link_Home">Home</a>
<a href="/TEST/Content_1/ProductLines_1.asp"
id="link_ProductLines">Product Lines</a>
</td>

Can anybody help me out??

Thanks,

JdJ

BonRouge
02-26-2007, 11:38 PM
1. if i want to change more than just the font color, like, say, the background image, and i specify that in the class of my css file, will that be applied based on the JavaScript code example you just gave me?
Yes.


2. because i'm not too familiar with JavaScripting, i want to be sure i have the syntax right. In the example you gave, u used double quotes around the class name instead of single like in my code. and, there is a + before the =. Are both of those correct syntax?

Double quotes or single quotes - both work fine. '+=' adds something to the end. Maybe your element already has a class name, so you add a class name rather than replace an existing one.


3. You said FF uses RGB. Well, I use Dreamweaver, and the color picker always shows up in Hex code. Do you know if there is a way to change that to RGB? And are there any colors in RGB that IE won't recognize?? I'm sorry if these questions sound silly - but FF is REALLY new to me...

That wasn't me. I always use hex colours. Firefox has no problem with them.

As for your current problem, the id of the element and the variable you've sent to the function are different. Look at the first letter of each.

If you're interested, here are some other ways to do this kind of thing without javascript:
http://bonrouge.com/~current2
http://bonrouge.com/~currentcss

I hope that helps.

Jd_Johnson8
02-27-2007, 03:29 PM
BonRouge,

Thank you! (Sorry i directed the color question to you, when it wasn't you that brought it up...)

I think I have a better grasp on this...but i still can't get it to work - i will keep trying!! And your suggestion for a way to do it without javascript is how i was originally doing it - i think i forgot to mention that the reason why i'm doing it this way is because my menu is an include file within my web page. the website i'm working on could potentially be hundreds of pages, so i needed to build my two main navigations as include files because the main navigation will be on almost every page, and the secondary nav will be on a pretty big group of pages.

Thank you so much for your help! I really, really appreciate it!!

JdJ

BonRouge
02-27-2007, 04:10 PM
You're not including the menu as a javascript file are you? That's a bad idea.
php includes is the way to go (see my first link).

Jd_Johnson8
02-27-2007, 04:34 PM
Oh, no, no! My menu is .htm file included in an .asp page.

I know you said php includes are better, but, because of the way another portion of our site is being built, and because of our current server capabilities, i went with asp...

:-)

I must be missing something though...the code works until i change the if to use className like you suggested. Do i have to something somewhere else? I really appreciate your patience - javascripting is pretty new to me, and after working with this, i have determined that i don't understand it like i thought i did...

JdJ



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum