Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Location
    IL
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript caused a link hover problem

    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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    IE uses hex for colors

    FF used rgb

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

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You might be better off switching the class name and adding a new class to your CSS.

  • #4
    New to the CF scene
    Join Date
    Feb 2007
    Location
    IL
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    More Info Please?

    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

  • #5
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Maybe instead of this:
    Code:
    if (l){
    l.style.color = '#FFFFFF';
    }
    You could do this:
    Code:
    if (l){
    l.className+=" newClass"; 
    }
    and in your CSS, do this:
    Code:
    .newClass {
    color:#fff;
    }
    That should work.

  • #6
    New to the CF scene
    Join Date
    Feb 2007
    Location
    IL
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    New to the CF scene
    Join Date
    Feb 2007
    Location
    IL
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #8
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Jd_Johnson8 View Post
    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.
    Quote Originally Posted by Jd_Johnson8 View Post
    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.
    Quote Originally Posted by Jd_Johnson8 View Post
    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.

  • #9
    New to the CF scene
    Join Date
    Feb 2007
    Location
    IL
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #10
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).

  • #11
    New to the CF scene
    Join Date
    Feb 2007
    Location
    IL
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by Jd_Johnson8; 02-27-2007 at 04:44 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •