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 Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts

    jQuery/ajax current navigation state on-click

    I'm currently working on developing a website with a jquery/ajax script that dynamically pulls in content from another page with a fade effect upon clicking on the corresponding tab in the navigation. Click here to view the page and the effect (only the first two pages are up for now - Home, Experience RGW). Here's the tutorial I was following for the effect: http://css-tricks.com/dynamic-page-replacing-content/. I was able to get the page transition effect working fine, but I've lost the ability to change the active state of my navigation. The css and html are correct; the problem lies in the jquery/ajax dynamic page transition.

    I was using the following php script to find the name of the document and apply the class "on" if the name was true (aka - the page is active)...(it worked fine before this jquery/ajax page transition):

    The following code is used to name the page:

    Code:
    <?php $thisPage="home"; ?>
    This code finds the name and applies the "on" class:

    Code:
    <li<?php if ($thisPage=="home") 
        echo " class=\"on\""; ?> class="highlt">
        <a href="index.php" class="home"><span>Home</span></a>
    </li>
    This worked fine prior to the jQuery/ajax page transition, however, now that the navigation div is outside of the content that dynamically loads for each page, I don't know how to change the current navigation state. The content that dynamically changes is within the "ajax" div in the page (just FYI)... and you'll notice that the navigation ("nav") div is outside of that. That's the reason it's unchanged from page to page.

    Another reason I think the php call doesn't work is because it's in the header of the page, and when you navigate to another page and content loads in (dynamically within the "ajax" div), it doesn't refresh the header content of the page. So, even if I use the code referenced above to name a certain page and trigger the change of class in the navigation, it won't ever see it, because the header content is still from the original "index.php". I hope this makes sense.

    Is there a jQuery script that can be written and triggered on-click of the navigation tab to remove or add the class "on" (selected state)? I'm sure it can be done, but I'm a jQuery novice. I'd greatly appreciate any help. Thank you in advance.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,640
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Yeah, of course your classic PHP functions don’t do anything since the page isn’t reloaded in the classic way. You have to remove/add the current class with jQuery, too, now. I haven’t looked closely at your code but it should be really easy like:
    Code:
    $('#nav-wrap li a').click(function() {
      $(this).parent().addClass('on').siblings().removeClass('on');
    });
    should do it. (written from mind, not tested)

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thanks for the code. I'm going to give it a try right now.

  • #4
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    @VIPStephan

    Thank you so much for your help. I tried the code you suggested, but the it's not producing anything. I had to change it slightly, because the class "on" is supposed to be applied to the list, not the link ("a"). So, here's what I ended up with:

    Code:
    $('nav li').click(function() {
     $(this).parent().addClass('on').siblings().removeClass('on');
    });
    I also removed the php script and uploaded the pages with the changes to the same link I listed above. Also, just for reference, I named the jquery file with the code above "nav-click.js" in the scripts/ folder. Is there something wrong with the code or should I try a different approach?

    Thanks,
    Taylor

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,640
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Uhm, you know, when I look at your site now, I see a class “current” applied to the anchor that I clicked. You just have to style it accordingly.

  • #6
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Okay, I'll take a look at that and let you know.

  • #7
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    That code is from the javascript file that controls the page transitions. Here it is:

    Code:
    $(function() {
    
        var newHash      = "",
            $mainContent = $("#page-wrap"),
            $pageWrap    = $("#container"),
            baseHeight   = 0,
            $el;
    
        $pageWrap.height($pageWrap.height());
        baseHeight = $pageWrap.height() - $mainContent.height();
    
        $("nav").delegate("a", "click", function() {
            window.location.hash = $(this).attr("href");
            return false;
        });
    
        $(window).bind('hashchange', function(){
    
            newHash = window.location.hash.substring(1);
    
            if (newHash) {
                $mainContent
                    .find("#ajax")
                    .fadeOut(200, function() {
                        $mainContent.hide().load(newHash + " #ajax", function() {
                            $mainContent.fadeIn(200, function() {
                                $pageWrap.animate({
                                    height: baseHeight + $mainContent.height() + "px"
                                });
                            });
                            $("nav li").removeClass("on");
                            $("nav a[href='"+newHash+"']").addClass("on");
                        });
                    });
            };
    
        });
    
        $(window).trigger('hashchange');
    
    });
    The problem is that it adds the class to the link ("a"), not the list. Can you take a look at this and let me know if I need to modify it in some way? It's this part, obviously:

    Code:
                            $("nav li").removeClass("on");
                            $("nav a[href='"+newHash+"']").addClass("on");
    Before, the class was "current". That's why you were seeing that being applied to the list link items. However, I changed it to "on" to match my current css styling.

    Thanks,
    Taylor

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,640
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Try $("nav a[href='"+newHash+"']").parent().addClass("on");


  •  

    Tags for this Thread

    Posting Permissions

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