Question

I’m working on an ajax loading function on a WordPress single page portfolio.

The principle is that when you click a thumbnail in the gallery, it opens a container (#DrawerContainer) and fetch the ajax content of this article into it. With a lot of help, I’m already able to open the drawer and load the post content when I click a thumbnail.

Here is a fiddle if you want to see it working (the ajax will not load but it works locally). http://jsfiddle.net/RF6df/24/

The part I’m working on now: I need my site to be crawlable and the urls to be shareable. If I give http://mywebsite.com/#!project5 to someone, I need project5 content to be opened when he loads the page.
I thought the hash-bang (#!) urls was the way to go to make this work. With the code below (commented on the jsfiddle), I can update the url and add the hash of the clicked thumbnail.

var pathname = $(this).find('a')[0].href.split('/'),
            l = pathname.length;
        pathname = pathname[l-1] || pathname[l-2];
        window.location.hash = "#!" + pathname;

But when I load a page, the ajax state isn’t remembered. I assumed it was because my ajax container was only loaded on click event, but there is no change when I add a persistant container in the php.

Is there a way to load the page with a post content already displayed, or to open the #DrawerContainer when the page is loading a hash-bang url?

Please keep in mind that I’m just learning jquery and ajax. So I’d really appreciate if you explain or comment a little bit what you do, I’ll for sure learn at the same time… 🙂

Answer 1

on onload you should check the window.location.hash and trigger a click on the particular link/div.

$(document).ready(function() {
    var hash = window.location.hash;
    if ( hash.length > 0 ) {
        hash = hash.replace('#' , '' , hash );
        $('a[rel="'+hash+'"]').trigger('click');
    }
});