CODEWITHSUNDEEP
htmlbrowser-historypushstate
Marc
Marc

Reputation: 21

Using false URLs with HTML5 History API

I'm working on a site that has a basic slider with 4 slides that go left and right that only shows 1 slide centered in the page. All the slides' content are loaded on a single page each within it's own div.

<div id="slider-box">
    <div class="slide">HTML and bg image</div>
    <div class="slide">HTML and bg image</div>
    <div class="slide">HTML and bg image</div>
    <div class="slide">HTML and bg image</div>
</div>

Nothing fancy. Also each slide is associated with a link:

<a href="/gallery">Gallery</a>
<a href="/links">Links</a>
<a href="/about">About</a>
<a href="/resources">Resources</a>

So I started using History.js to link up each slide with it's respective link; www.example.com/about. I can change the state with no issue; back and forward work and the URL changes.

What I did happen to notice is that if I load the page with a false URL like, www.example.com/about, the page returns a 404.

What can I do to prevent the 404 from occurring, but also making sure the page is taken to the correct slide?

Is there another way I should be doing this?

I'm in a LAMP stack with jQuery and HTML5.

I'm really stuck on this one...thanks!

Upvotes: 1

Views: 313

Answers (2)

avramov
avramov

Reputation: 2114

If I'm understanding you correctly, you actually have to create the /about, /gallery, etc. pages. Think about it – the History API only works within a single page. It manipulates what the address bar says, but it doesn't create actual URLs on its own.

My solution would be using something like mod_rewrite. /about would redirect to something like /?p=about, which loads your page with the corresponding div already open. Same for other slides. Only then you can use the History API's functionality.

Upvotes: 1

user152949
user152949

Reputation:

Its our web server that handles the HTTP 404 error, see your web server documentation for how to create custom error pages with redirects etc. If you are using Microsoft Internet Information Server 7 then look here http://blogs.iis.net/rakkimk/archive/2008/10/03/iis7-enabling-custom-error-pages.aspx

Upvotes: 0

Related Questions