Single page, carousel-style, slide website:Navigate to previous slide, on browser back button, without defaulting to home slide?

Question

I am making a website that uses div/slides to hold content. They are positioned inside a container with overflow:hidden. A navigation bar uses document.getElementById('box').style.left='0px' to alter the div positions to bring required div into view. The left CSS property is changed 'onclick' to bring the targeted div into view and push the others out of container viewing area. Transitions animations are handled by CSS.

Here a link to the fiddle example. http://jsfiddle.net/HyHmF/1/ . HTML Code is as follows,

<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='0px';
                                   document.getElementById('box2').style.left='200px';
                                   document.getElementById('box3').style.left='400px';">Box 1</a>

<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='-200px';
                      document.getElementById('box2').style.left='0px';
                      document.getElementById('box3').style.left='200px'";>Box 2</a>

<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='-400px';
                      document.getElementById('box2').style.left='-200px';
                      document.getElementById('box3').style.left='0px'">Box 3</a>
<div id="boxcontainer">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>  

My issue is this. How can I make the browser back button to change the CSS to bring the previous displayed div into view. That is, without reverting back to the 'home' div.

I am reasonably familiar with javascript and jquery. I know the answer lies in JQuery BBQ pushstates and hashtags. Unfortunately I haven't been able to implement these into my site @ http://www.sumoto.com.au. The fiddle is basically this site, scaled down, for ease of explaining my dilemma.

Essentially, how can I save a 'snapshot', of the current css view to a hashtag url, and call this 'save' through the browser back/forward navigation?

Answer 1

I solved my problem!

I removed all the cluttered onclick lines from the a elements. And added id's for each one. The actual hashtag/browser back button functionality is provided by hashchange by Ben Alman, and of course, JQuery.

The revised HTML is:

<a class="boxes" id="link1" href="#box_1">Box 1</a>
<a class="boxes" href="#box_2">Box 2</a>
<a class="boxes" href="#box_3">Box 3</a>                     
<div id="boxcontainer">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>

The Javascript

$(document).ready(function() {
    $(window).hashchange( function(){
    var hash = location.hash;
    var lc1 = $("#link1")
    if (lc1.attr('href') === hash) {document.getElementById('box1').style.left='200px';}
    if (lc1.attr('href') !== hash) {document.getElementById('box1').style.left='0px';}
    });
    $(window).hashchange();
});

The a links are targeted by the script and assigned a var; "lc1". An if statement checks if the hash of lc1 (the link) is equal to the browser url. If it is then the css manipulation is performed and the sliding movement occurs. If it isn't (for example when the user clicks back) the boxes return to their original (or previous) conformation.