SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to change look of 'active' menu item

    Hello,

    I am trying to change the look of the 'active' submenu item... Meaning, when you're on a certain page - the corresponding submenu item will look different (i.e. bold, different color, etc.)...

    URL is --> IDC's Fundamentals for Newer Directors

    JS code I'm using -->

    $("*").find("a[href='"+window.location.href+"']").each(function(){
    $(this).addClass("submenuactive")
    })

    Any help/advice would be appreciated! Thank you!

    Jodi

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi Jodi. Welcome to SitePoint.

    You can do that with CSS alone if you want. For example, each page relating to a sidebar link can have a special class on the <body> element, such as

    Code:
    <body class="oversight">
    Then in your CSS, you have

    Code:
    .oversight .dropTarget4 a {}
    and have the special color for that link inside the brackets above. So, when you are on a page with that body class, it will target that link and color it.

  3. #3
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately, the menu is part of a grid within Vignette so it would take me forever to add special code to each and every page... Right now, files are pulled from several places to build the page so I'd like to get something that I can just add once and be done... Know what I mean?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Often, a CMS will let you insert a special class to a link based on the page you are on. for example, in the CMS I use, I have a rule that if the URL includes, say, "oversight", then that particular link gets a class of "current". Don't know if you can do thes with Vignette, though, as I'm not familiar with it.

    Using JavaScript for this is not ideal, but if that's your only option, someone else will have to reply, as it's not my area, I'm afraid.

  5. #5
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not that familiar with Vignette either and we use it for several sites, so I'm hesitant about changing the 'active' class... There's gotta be something...

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    One thing I notice:

    The URLs in your links look like this:

    Code:
    href="/oversight/oversight_portfolio"
    but

    Code:
    href='"+window.location.href+"'
    is probably looking for the full URL, with the http:// bit etc. Can you turn the URLs into absolute ones in Vignette?

  7. #7
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Meaning I should add "http://fundamentals.idc.org/" to each link and that might work?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jodidesign2 View Post
    Meaning I should add "http://fundamentals.idc.org/" to each link and that might work?
    It's worth a try, but I can't promise it will work. That's my best guess as to why the jQuery isn't working, though.

  9. #9
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It was worth a shot, but that did not fix the problem... I appreciate your help regardless!

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Actually, now that I think of it, that jQuery code can't work as is, because the jQuery loads before the page, so at the time it loads, there is no <a> element yet. So you could either wrap that jQuery code in the $(document).ready() code, or place your jQuery links as they are but at the bottom of the page, just before the closing </body> tag.

  11. #11
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i've added to the $document).ready() and it's still not working... am i missing some other code?

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Looks like it's not quite in the right place. Try changing

    Code:
    });
    $("*").find("a[href='"+window.location.href+"']").each(function(){
    $(this).addClass("submenuactive")
    //add your own logic here if needed
    })
    to

    Code:
    $("*").find("a[href='"+window.location.href+"']").each(function(){
    $(this).addClass("submenuactive")
    //add your own logic here if needed
    });
    })
    I'm experimenting around a bit, but at the moment, you've moved the code into a new file, but it doesn't look like it's inside the document ready code, but outside it.

    EDIT: Actually, you maybe just left out the final

    });

    in your code, so rather than move anything, just add and extra
    Code:
    $("*").find("a[href='"+window.location.href+"']").each(function(){
    $(this).addClass("submenuactive")
    //add your own logic here if needed
    });
    })
    and don't actually move anything. (As I say, this isn't my area.)

  13. #13
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's not right either and it's messed up the menu so now everything is showing...

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Ah, OK, so that was wrong. Perhaps try my first suggestion then. Try inserting the code here:

    Code:
    $(function(){
           	$("a[id^='dropATarget']").click(function(){
    			$('a').not($(this)).next().slideUp();
           		$(this).next().slideToggle("normal");
           	});
    
    $("*").find("a[href='"+window.location.href+"']").each(function(){
    $(this).addClass("submenuactive")
    //add your own logic here if needed
    });
    
           });

  15. #15
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OMG! You did it! I love you!

    THANK YOU SOOOOOO MUCH for saving my ass...

    Jodi

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Well I'll be darned! Just goes to show that sometimes, the blind can lead the blind somewhere useful.

    Glad we got there in the end.

  17. #17
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, indeed... That's why I like being a designer and not a programmer (no offense)... This stuff scares me...

    Have an awesome weekend!


Bookmarks

Posting Permissions

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