History.js on full screen sections

Question

---

I've been working on a project of mine - the full (important) JavaScript can be found here. I wish to include history.js so that a user can navigate by using the browser's previous and next buttons as well. Also I would like that generated URLs are accessible even though they don't exist. These URLs are generated by the history API and therefore are not linked to a HTML document.

What I've already done

By taking a look at the API Exposed section of the plugin and by reading through Mozilla's documentation, I've managed to get this working:

• URLs are correct when navigating with the interface's next, previous and base links
• Titles are correct when navigating with the interface's next, previous and base links

The (stripped down) code for this is:

    document.title = $(".parentSection.base").data("title");


// Going forward
    var nextClick = $("a.next_link");

    nextClick.click(function(d) {       
        var nUrl = parentSection.next().data("url");
        History.pushState(null, null, nUrl) ;
        document.title = parentSection.next().data("title");

        d.preventDefault();
    });


// Going backwards
    var prevClick = $("a.prev_link");

    prevClick.click(function(e) {       
        var pUrl = parentSection.prev().data("url");
        History.pushState(null, null, pUrl) ;
        document.title = parentSection.prev().data("title");

        e.preventDefault();
    });


// Going to "Base" position
    var baseClick = $("a.base_link");

    baseClick.click(function(f) {           
        var bUrl = $(".parentSection.base").data("url");
        History.pushState(null, null, bUrl);
        document.title = $(".parentSection.base").data("title");

        f.preventDefault();
    });

This works as it should.

What I can't seem to get done

Even though this works quite neatly it is useless without the final functionalities:

• URL's are now generated (e.g. /lamp, /desk etc.) but when a user goes directly to one of these links (or simply reloads the page) he or she will get the message that the URL does not exist
• Even though the browser's navigation buttons are clickable (and the url changes accordingly) it does not change the content at all.

Can anyone give any feedback on this? I've been working on this for so long now that my behind hurts.

---

I have tried to work from the code that was provided by cjhveal, and thusfar got this (just for testing purposes):

History.Adapter.bind(window,'statechange',function(){
        var State = History.getState();
        History.log(State.data, State.title, State.url);
        $(".parentSection[data-url='" + State.title + "']").css({
            "left": "0",
            "top": "0"
        });
    });

Strangely enough, I can't get History.js to log to correct title ... When I log a page it returns like: "lamp", "bramvanroy.be/fullScreenSection/lamp" (respectively title and url) whereas I need to get the title that is defined in the data-title object of the section. Yet still, I adjusted the code so tha tit should work data-url as defined in section is the same as the title attribute that is returned, but still nothing happens!

Answer 1

Your script should have some function to show "current" url, something like:

var display_current=function() {
       //you may use History.getState() here, but i not sure what it will return, so i calculate url myself;
       var url=document.location.pathname.replace(/^.*\//,'');
       if (url == '') {url='home';}
       //Some code here to display current section based on URL
};

You should run also that function after loading page:

$(function() {display_current();});

Then you should handle events of browser history buttons to handle browser's back/forward buttons use:

History.Adapter.bind(window,'statechange',function() {
       display_current();
});

here the documentation

To prevent 404 error you have to add .htaccess file to the directory with redirect rules:

RewriteEngine On
RewriteBase /
RewriteRule ^.+$  index.html 

more info on mod_rewrite is here

Answer 2

Check out the usage documentation for History.js. Make sure you are binding to the state change event, like so:

History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
    var State = History.getState(); // Note: We are using History.getState() instead of event.state
    History.log(State.data, State.title, State.url);
    // Handle new state.
});

As an alternative, some javascript applications make use of the part of the url after the hash, sometimes called the anchor:

www.myapp.com/app/#/anchor/1

Changing this part does not require any reloads. Modern browsers even preserve history with pushState. This can be done with the following javascript: window.location.hash = '/anchor/1'

EDIT: One way to make sure that the url is valid is to use query parameters. Looking at the documentation, we see that instead of full urls, they use query parameters (eg. ?state=1). Try using something similar, like: ?page=lamp.

Also, in your click handlers, try passing the title and data through just like in the example.