Question

I want to separate these functions. They should both work separately on click events:

FIRST FUNCTION

 $("ul.nav li").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });

    $(window).bind('hashchange', function(){

newHash = window.location.hash.substring(1);

        if (newHash) {
           ACTION A
      });
$(window).trigger('hashchange');
 });

SECOND FUNCTION

 $("ul.subnav li").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });

    $(window).bind('hashchange', function(){

newHash = window.location.hash.substring(1);

        if (newHash) {
           ACTION B
      });
$(window).trigger('hashchange');
 });

This is what happend in ACTION A:

 $mainContent
                .find(".maincontent")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " .maincontent", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $(".nav a").removeClass("active");
                        $(".nav a[href="+newHash+"]").addClass("active");
                    });
                });

The Problem is that if I click the Link of the Second function always the the first function fires.

Details of what I’m trying to do:

First, I build my site on .php to serve poeple without JavaScript. Now I want to load the “maincontent” dynamically. So I found this script I’m using:

http://css-tricks.com/6336-dynamic-page-replacing-content/

It does do a great job if you only want to load “maincontents”.

But my site has sub-navigation on some pages where I want to load the sub-content. In .php these sites use includes. So I get my content by: href=”page2.php?page=sub1″

So, when I click on the sub-links now they load also dynamically but the script also on the whole maincontent loading area. So it doesn’t really load content by .load() but the sub-content of the includes do appear.

So what I thought was just to separate this function. The first to simply load the maincontents and a second one for the sub-navigation to refresh only the sub-content area. I don’t even understand how this script loads the include content dynamically since the link is the straight page2.php?page=sub1 link. All dynamic loaded content usually looks like “#index”, without the ending “.php”.

Some quick history:

I’m trying to get the best page structure. Deliver .php for non JavaScript user and then put some dynamic loading stuff over it. Always with the goal to keep the browser navigation and the browser links (for sharing) for each page in tact.

I’m not an jQuery expert. All I have learned so far was by trial and error and some logical thinking. But of course, I have a lack of fundamental knowledge in JavaScript.

So my “logical” question:

How can I tell the “nav” links to perform only their “$(window).bind”-Event and to tell the “subnav” links only to perfom their “$(window).bin”-event.

Is this the right thinking?

Since I’ve already been trying to solve it for nearly the last 18h, I’ll appreciate any kind of help.

Thank you.

IMPORTANT:

With the first function I not just only load the maincontent but also I’m changing a div on the page with every link. So for any solution that might want to put it together in one, it won’t work, cause they should do different things on different areas on the page. That’s why I really need to call on the window.bind with each nav/subnav click.

Can anyone show me how?

Answer 1

Here’s by the way the solution I came to:

After understanding that the haschange-event doesn’t have to do anything with it (as long as you don’t want to make the subcontent bookmarkable too) I just added a new load function for the subcontent:

$(function(){

            $("ul.linkbox li a").live('click', function (e) {
            newLink = $(this).attr("href");
            e.preventDefault();

                $(".textbox").find(".subcontent").fadeTo(200,0, function() {

                    $(".textbox").load(newLink +  " .subcontent" , function() {

                        $(".subcontent").fadeTo(200,1, function() {



                        }); 
                    }); 

                $("#wrapper").css("height","auto");
                $("ul.linkbox li a").removeClass("activesub");
                $("ul.linkbox li a[href='"+newLink+"']").addClass("activesub");

                });

        });

});