css and js to change navigation links

Discussion in 'Javascript' started by Andrea, Feb 24, 2004.

  1. Andrea

    Andrea Guest

    Hi everyone. I'm working on a navigation menu (in a frameset) that I
    want to set the "active" link to black (the link that corresponds to
    the page displayed in the right side of the frame) to black.

    http://www.personal.psu.edu/axg251/wc

    In the original external style sheet, I set the a:link, a:visited,
    a:active, and a:hover. That works fine.

    In the navigation page, I call a function for onclick - it sets the
    link just clicked to black:

    document.getElementById(id).style.color="black";

    AND sets the link that was black back to the original color:

    document.getElementById(oldclass).style.color="#394B8E";

    The problem is then I lose the "hover" feature. I've tried instead of
    setting the "color" in the function actually setting "a:link.color",
    "a:visited.color", etc. (for link, visited, active, and hover) but it
    doesn't work AND I read in this ng that you can't use a javascript
    function to change a pseudo class. Is that true?

    Here's the site: http://www.personal.psu.edu/axg251/wc

    Note that the "hover" works until you've clicked on the link - then
    it no longer works.

    Any ideas are appreciated. I'm happy to post all the code here - I
    thought it would be easier for you to just look from the site - if
    not, just let me know.

    Thanks for your help!
    Andrea :)

    p.s. It's a test site - I *know* it's ugly! ;-)
     
    Andrea, Feb 24, 2004
    #1
    1. Advertising

  2. Andrea

    Andrea Guest

    I apologize for multi-posting. I wan't sure how to cross post - I'll
    look into it for the next time I post.

    I hope people will still respond with ideas if you have them on my
    css/js issue.

    thanks!
     
    Andrea, Feb 24, 2004
    #2
    1. Advertising

  3. Andrea

    R Guest

    There's a nice (less javascript, more css) way to do this:

    I have simplified your code to just include the stuff important to
    your problem, and have moved the css inline just for explanation
    purposes:

    <html>
    <head>
    <style>
    body{
    background-color: #FFFFFF;
    font-family: Verdana, Helvetica, Arial, "Sans Serif";
    }

    /*create two different classes 'selected' and 'unselected'. They will
    define the two states of your links*/
    ..selected, .selected:link, .selected:visited, .selected:active,
    ..selected:hover{
    color: black;font-weight: bold;text-decoration: none;
    }
    ..unselected, .unselected:link, .unselected:visited, .unselected:active
    {
    color: #394B8E;font-weight: bold;text-decoration: none;
    }
    ..unselected:hover{
    color: #00B4FF;
    }
    </style>
    <script type="text/javascript">
    var oldClass=null
    //when a link is selected simply change is class to 'selected'. Also
    change the old link to 'unselected'.
    // the null check is just to prevent the oldclass from being updated
    when the page first loads
    function changelink(navItem) {
    if (oldClass != null){
    oldClass.className = "unselected"
    }else{
    window.alert('notyet')
    }
    navItem.className = "selected"
    oldClass=navItem;
    }
    </script>
    </head>
    <body>
    <!-- set the default class to 'unselected' and when clicked just pass
    the whole object 'this' -->
    <a class="unselected" target="workshop_home" id="homepage"
    href="content.html" onClick="changelink(this);">Home</a><br>
    <br />
    <a class="unselected" target="workshop_home" id="PSU"
    href="http://www.psu.edu" onClick="changelink(this);">PSU</a> <br>
    <a class="unselected" target="workshop_home" id="w3"
    href="http://www.w3schools.com" onClick="changelink(this);">w3</a>
    <br>
    <a class="unselected" target="workshop_home" id="WC"
    href="http://www.worldcampus.psu.edu"
    onClick="changelink(this);">World Campus</a><br>
    <a class="unselected" target="workshop_home" id="Page2"
    href="page2.html" onClick="changelink(this);">Page2</a><br>
    </body>
    </html>
     
    R, Apr 1, 2004
    #3
  4. R wrote:
    > There's a nice (less javascript, more css) way to do this:


    There is no more or less JavaScript/CSS involved than with my
    solution, you are simply using another CSS-related property.

    > I have simplified your code to just include the stuff important to
    > your problem, and have moved the css inline just for explanation
    > purposes:
    > [...]
    > function changelink(navItem) {
    > if (oldClass != null){
    > oldClass.className = "unselected"
    > }else{
    > window.alert('notyet')

    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    Nonsense.

    > }
    > navItem.className = "selected"
    > oldClass=navItem;


    > }


    The only problem is that assigning to the "className" property
    does not work in all DHTML capable browsers, while assigning to
    a specific format property, like "color" does. Besides, you
    replied to my posting, without any reference to its content.
    Please read <http://www.allmyfaqs.com/faq.pl?How_to_post>, thanks.


    PointedEars
     
    Thomas 'PointedEars' Lahn, Apr 2, 2004
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. msnews.microsoft.com
    Replies:
    2
    Views:
    491
    Steven Cheng[MSFT]
    Apr 22, 2004
  2. Hardeep Rakhra
    Replies:
    6
    Views:
    429
    Hardeep Rakhra
    Jan 12, 2004
  3. Laurahn
    Replies:
    3
    Views:
    935
    Steven Cheng[MSFT]
    Feb 6, 2007
  4. Zeba
    Replies:
    0
    Views:
    447
  5. msnews.microsoft.com

    Calendar Control: Changing the Month Display and Navigation Links

    msnews.microsoft.com, Apr 19, 2004, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    191
    Steven Cheng[MSFT]
    Apr 20, 2004
Loading...

Share This Page