Highlight left nav based on user position

Discussion in 'Javascript' started by Martin Lira, Feb 1, 2005.

  1. Martin Lira

    Martin Lira Guest

    Hi,
    I have a webapp that has several jsp pages. The main page has a left
    nav and it loads the sub pages when requested. Can somebody please give
    an easy way to track the jsp page you are currently viewing and then
    highlight the left nav accordingly.
    Ex. My left nav has three items Company, Profile, About.
    When user is clicking on pages under company (there can be more than
    one sublevel) Company on the left nav is to be highlighted.
    Thanks,
    Martin
    Martin Lira, Feb 1, 2005
    #1
    1. Advertising

  2. Martin Lira

    Fred Oz Guest

    Martin Lira wrote:
    > Hi,
    > I have a webapp that has several jsp pages. The main page has a left
    > nav and it loads the sub pages when requested. Can somebody please give
    > an easy way to track the jsp page you are currently viewing and then
    > highlight the left nav accordingly.
    > Ex. My left nav has three items Company, Profile, About.
    > When user is clicking on pages under company (there can be more than
    > one sublevel) Company on the left nav is to be highlighted.
    > Thanks,
    > Martin
    >


    Yes, it can be done. I'm guessing that you have onmouseover/out
    functions that make the button change, or maybe you've used CSS
    but the technique is much the same.

    When the page loads, have a function run over the links and for
    any that have an href filename that matches the file name of the
    current page, set the link to the required state and remove the
    onmouseover/out functions.

    An example is below. Just save is as index.html and blah.html.
    Whichever page is loaded, its link will be solid red and won't
    display any onmouseover/out behaviour. If you've used CSS, just
    use the same thing to modify the class or whatever. If you've
    used an image, just set the image src and onmouseout image src
    to the same as the onmouseover image src.

    Of course this method fails if you've used javascript links
    (bad) or added anchors to the links, but that can be dealt with
    too in the getFilename() function. I've replaced the
    onmouseover/out with an empty function 'cos I can't seem to
    remove them.

    <html><head><title>play</title>
    <script type="text/javascript">
    function fixLinks() {
    var docFile = getFilename(document.location + '');
    var lnks = document.links;
    var len = lnks.length;
    for (var i=0; i<len; i++) {
    if ( getFilename(lnks.href) == docFile){
    lnks.style.color = 'red';
    lnks.onmouseover = emptyFn;
    lnks.onmouseout = emptyFn;
    }
    }
    }

    function getFilename(x) {
    var cutFrom = +x.lastIndexOf('/') + 1;
    return x.substring(cutFrom,x.length);
    }

    function emptyFn() {}
    </script>

    </head><body onload="fixLinks();">

    <a href="index.html"
    onmouseover="this.style.color='red'"
    onmouseout="this.style.color='blue'"
    >Index page</a>


    <a href="blah.html"
    onmouseover="this.style.color='red'"
    onmouseout="this.style.color='blue'"
    >blah page</a>


    </body></html>

    --
    Fred
    Fred Oz, Feb 2, 2005
    #2
    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. Guest
    Replies:
    3
    Views:
    379
    Andrew Thompson
    Nov 30, 2004
  2. =?Utf-8?B?cm9kY2hhcg==?=

    left nav items

    =?Utf-8?B?cm9kY2hhcg==?=, May 10, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    361
    Steve C. Orr [MVP, MCSD]
    May 10, 2006
  3. JDP@Work
    Replies:
    0
    Views:
    161
    JDP@Work
    Apr 11, 2006
  4. Replies:
    3
    Views:
    174
  5. dmalhotr2001

    iframe left nav mess up

    dmalhotr2001, Oct 23, 2009, in forum: Javascript
    Replies:
    3
    Views:
    81
Loading...

Share This Page