0

I am using this library to create my page navigation. However, since this sort of navigation is new to me, because all pages are in a single html file instead of different files, I'm unsure how to save that kind of history.

Using <a> name and href does not work in this situation, because it doesn't store the anchor for the page transition, rather storing the page index as data.

I'm looking for a way to: A) Keep the data number (open page) active when I hit refresh (because out of the box it always goes to the first page) B) Keep a navigation history, so you can hit the back button after navigating between pages

Any suggestions are helpful, as well as maybe some basic examples to work from. Thanks!

Eichhörnchen
  • 592
  • 2
  • 12
  • 27

1 Answers1

1

You can use the History API to manipulate the history on .pt-trigger clicks

    $('.pt-trigger').click(function() {
        var stateObj = { foo: "bar" };
        history.pushState(stateObj, "Your page name, "bar.html");
    });

Which changes the URL to foobar.com/bar.html when a page transition trigger is clicked. For the stateObj, you'll need to save some identification of the previous page, so you can transition back with the back button by using onpopstate event.

Pete TNT
  • 8,293
  • 4
  • 36
  • 45
  • this works great, but when there is a page refresh, the "bar.html" will return a 404 error as the file doesn't actually exist. How can i fix that? – Eichhörnchen May 25 '15 at 11:11
  • You can just replace the "bar.html" with anything you like, just try leaving it empty or using the current location, or maybe a hashvalue (such as #page-4) that you can use to transition to correct page when page is reloaded. For an example see http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript – Pete TNT May 25 '15 at 11:21
  • Right, but in my case all URL values are files that don't exist. I've gotten my navigation to work with # values but ultimately that isn't the goal. So when I click on the "Design" button, the url changes to website.com/design, and I got the back button functioning, but if I hit refresh it looks for the location /design which does not exist – Eichhörnchen May 25 '15 at 11:45
  • 1
    I see. You could create dummy files for each of your /url that would redirect to / and then show your actual page or let the server itself do the routing. – Pete TNT May 25 '15 at 15:15
  • Thanks for the tip. I created these dummy files, rerouted them to the index.html file, and checked the `document.referrer`. – Eichhörnchen May 30 '15 at 21:19