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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy current link highlighted forgotten once page reloads after user clicks

    Hello..

    I have been trying to figure out how to keep current link stay highlighted after the user clicked the current page. The problem is the variable has been forgotten once page loads after the click.

    The jquery code I am using is

    $('#MenuContainer li a[href="' + window.location.pathname + '"]').addClass('active');

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    you don't need js:

    Code:
    a:target { color: red; }
    add your js inside a $(function(){ /* code here */ }); to run it each time the page loads.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Why aren’t you just adding a class to the link (or better yet, the list item) in the HTML? This way it would even work without JS (yeah, I know, don’t start the discussion, this is my opinion).

  • #4
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    perhaps I should have been clearer. I already have the code in the function.

    $( document ).ready(function() {


    $("#MenuContainer a").click(function () {
    $('#MenuContainer li a[href="' + window.location.pathname + '"]').addClass('active');
    alert(window.location.pathname);
    });
    });

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, it somehow submitted the post before I could finish..

    $( document ).ready(function() {


    $("#MenuContainer a").click(function () {
    $('#MenuContainer li a[href="' + window.location.pathname + '"]').addClass('active');

    });
    });

    This is the code I have right now. To response to other post, I could have done that easily but my site is in php template because I do not want to copy and paste menu to every page because this site might be growing with more numbers of pages.

  • #6
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by joserinu View Post
    Sorry, it somehow submitted the post before I could finish..

    $( document ).ready(function() {


    $("#MenuContainer li a").click(function () {
    $('#MenuContainer li a[href="' + window.location.pathname + '"]').addClass('active');

    });
    });

    This is the code I have right now. To response to other post, I could have done that easily but my site is in php template because I do not want to copy and paste menu to every page because this site might be growing with more numbers of pages.
    I already have css for the active class. I am trying to add the class to the li. It does work for a brief time then it goes away once the page loads. If i add return false or preventDefault(), it does work but navigating to link does not work if I have those in the place.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Quote Originally Posted by joserinu View Post
    To response to other post, I could have done that easily but my site is in php template because I do not want to copy and paste menu to every page because this site might be growing with more numbers of pages.
    Well, thatís exactly what PHP templates are there for. You have one template thatís included in all pages (e. g. the menu) so you only have to edit in one place and all pages are updated.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    You have your addClass in a click function so it don't work on page load. Take it out of the function
    Code:
    <script type="text/javascript">
    $( document ).ready(function() {
    	$('#MenuContainer li a[href="' + window.location.pathname + '"]').addClass('active');
    ......other js functions
    }); 
    </script>
    Evolution - The non-random survival of random variants.


  •  

    Posting Permissions

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