www.webdeveloper.com
Results 1 to 9 of 9

Thread: getting a link color to stay activated

  1. #1
    Join Date
    Nov 2005
    Posts
    21

    getting a link color to stay activated

    I have a page that has two elements. One is navigation, and the other is an iframe where the links in that navigation change the pages. It works fine except I need the background color of the nav item to stay highlighted after its been clicked (and the corresponding page is therefore being viewed). In other words, I just need some simple javascript to say, "on click, change the bground of this link to X and make the others go back to normal". Make sense? Probably not hard, I just don't know javascript.

    thanks
    Last edited by dtrachtman; 09-23-2012 at 03:32 PM.

  2. #2
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192
    I'm pretty sure this is a CSS question. However, in JavaScript I think you would need to dynamically change the class of the element in question to achieve this. You can use the window.location.hash object to let JavaScript know which page you're on, and change the class as necessary. I've never actually done this myself, but if I were to try, I'd do something along the lines of:

    Page 1:
    Code:
    <a href="/some_page#item_one">Page</a>
    Page 2:
    Code:
    <script type="text/javascript">
    var url = window.location.hash;
    
    if(url == "item_one")
        document.getElementById("your_item").className = "some_class_name";
    else if(url == "item_two")
        document.getElementById("your_other_item").className = "some_class_name";
    
    etc., etc.
    </script>
    There may be a much easier method though. As I said, this is just how I'd do it in JavaScript. I'm certain there's way in CSS to do this...

  3. #3
    Join Date
    Nov 2005
    Posts
    21
    Thanks for the advice. I dont think this would be CSS related because its an if/then type of situation. I think I made this more complicated than necessary by even mentioning the iframe.

    What about a list of links. When one is clicked, make its bground white and turn off all the other link backgrounds. I think that would be all I need.

  4. #4
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192
    I'm sorry, I didn't read your first post carefully enough. What you're saying is that you have a single page with navigation, and that navigation is affecting the contents of the iframe? In that case, it's easy.

    Code:
    <div>
        <ol>
            <li id="page_one">One</li>
            <li id="page_two">Two</li>
            <li id="page_three">Three</li>
        </ol>
    </div>
    Code:
    <script type="text/javascript">
    
    document.getElementById("page_one").addEventListener("click", change_page, false);
    document.getElementById("page_two").addEventListener("click", change_page, false);
    document.getElementById("page_three").addEventListener("click", change_page, false);
    
    function change_page(event)
    {
        var get_button = (event.target || event.srcElement).id;
        
        get_button.className = "class_of_your_choice";
    }
    </script>
    All you need to do is create the class in CSS for the "active" link. I'm pretty sure this should work, but I haven't got time to test it right now. Let me know.

  5. #5
    Join Date
    Nov 2005
    Posts
    21
    For some reason I can't get that to work. Sorry, I am prob missing something obvious. Here is the page.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <script type="text/javascript">

    document.getElementById("page_one").addEventListener("click", change_page, false);
    document.getElementById("page_two").addEventListener("click", change_page, false);
    document.getElementById("page_three").addEventListener("click", change_page, false);

    function change_page(event)
    {
    var get_button = (event.target || event.srcElement).id;

    get_button.className = "class_of_your_choice";
    }
    </script>

    <style type="text/css">
    ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    li { margin: 0 0 .2em 0; }

    a {
    display: block;
    color: #FFF;
    padding: .2em .8em;
    text-decoration: none;
    }

    a:hover
    {
    background-color: #fff;
    color: #417f29;
    font-weight:400;
    }
    </style>


    </head>

    <body>
    <div style="width:200px; background-color:#093; float:left;">
    <ul>
    <li><a href="test1.htm" target="window" id="page_one">link one</a></li>
    <li><a href="test2.htm" target="window" id="page_two">link two</a></li>
    </ul>
    </div>

    <iframe id="window" name="window" style="width:400px; height:400px;" src="test1.htm">
    </iframe>

    </body>
    </html>

  6. #6
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192
    Okay, at the risk of being rude it appears you didn't really know what to do with the sample code I provided. I wasn't attempting to give you fully functional code, just a nudge in the right direction. Anyway, I've taken the liberty of writing what I think it is you want, and I've uploaded it to my website so you can download it at your leisure.

    1. index.html
    2. default.html
    3. page_one.html
    4. page_two.html
    5. page_three.html

    View the demo here: http://sitesupplier.co.uk/tutorial_d...es/dtrachtman/

    The index file is where all the code is written, but I'm not going to paste in the code to webdeveloper.com because the new code presentation sucks. You can view the source of the file I linked you to and copy & paste the code from there.

  7. #7
    Join Date
    Nov 2005
    Posts
    21
    you nailed it! Thanks!

  8. #8
    Join Date
    Nov 2010
    Posts
    1,036


    does 3 completely different things on Chrome 21, FF 15 and IE8...

  9. #9
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192
    Quote Originally Posted by xelawho View Post


    does 3 completely different things on Chrome 21, FF 15 and IE8...
    Oh, sorry. I didn't test it in all browsers for some reason. Anyway, the problem is just that the other browsers don't accept the ID attribute as a valid target, it must be a name attribute instead. The iframe wasn't given a name, but I've updated it now so the example is in working order.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles