0

I have implemented this to my wordpress theme, and I'm trying to figure out, how to implement the hashchange, when I click a link inside a folder. I've tried to use this tutorial to trigger the hashchange. The hashchange works, when i comment out the "Load permalink to .itemContent" , but then the item slides down and up instantly. When its not commented out, the hashchange doesn't trigger.

Also, if someone copys the http://www.pathtomydomain.com/#/item-name-1 to the address bar (or bookmarks it), how to open the folder according to the url? Something to to with .trigger(click)?

HTML

<div id="container">    
<div class="item">
<a href="http://pathtomydomain.com/item-name-1">
<img src="an-image-1.jpg" />
</a>
</div>

<div class="item">
<a href="http://pathtomydomain.com/item-name-2">
<img src="an-image-2.jpg" />
</a>
</div>

<div class="item">
<a href="http://pathtomydomain.com/item-name-3">
<img src="an-image-3.jpg" />
</a>
</div>
</div>
<div class="itemContent"></div>

JQUERY

$.ajaxSetup({cache:false});

$('.item').click(function(){
        if($('.itemContent').is(":visible")){
            $('.itemContent').slideUp("fast", function(){  
        });

    } else if ($('.itemContent').is(":hidden")) {
        $('.itemContent').empty();
        $('.itemContent').html('<img class="loading" src="ajax-loader.gif"/>');
        $('.itemContent').slideDown("fast", function(){
            var $dock = $('#navigation'),
                dockHeight = $dock.height();
            $("html, body").animate({
                            scrollTop: $('.itemContent').offset().top - ( $(window).height() - dockHeight - $(this).outerHeight(true) ) / 2 

                            });

        });

    /*
    Load permalink to .itemContent . 
    */
    var post_link = $(this).children("a").attr("href");
        $(".itemContent").load(post_link);
        return false;

      }

});

var $mainContent = $(".itemContent"),
    siteUrl = "http://" + top.location.host.toString(),
    url = ''; 
$(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() {
    location.hash = this.pathname;
    return false;
}); 

$(window).bind('hashchange', function(){
    url = window.location.hash.substring(1); 
});
$(window).trigger('hashchange');
Community
  • 1
  • 1
r1987
  • 537
  • 1
  • 7
  • 19
  • On checking your HTML I dont see the Hash that you are getting in here is associated with any of your HTML element where the URL are present and will be loaded.So how do you suppose to load the content on the basis of Hash that you are extracting from the URL. – techie_28 Sep 09 '12 at 15:14
  • You will have change this a little bit I guess. – techie_28 Sep 09 '12 at 15:15

0 Answers0