Browser back button broken between hidden div's

Question

First of all, these pages will never be on the web but will be in internal memory. They are a group of linked documents---an ebook.

http://www.anmldr.com/testdivs

When I click on the link in the first div, the second div becomes visible and the first div is hidden. The problem is with the browser's back button. If you then click on the back button, the URL updates but the first div does not show again. How can I correct the back button so that the first div shows? The link from the second div to the first div works fine but it is the browser back button that I do not know how to work with.

Thanks, Linda

P.S. These are using CSS3 so it is better to use a WebKit based browser.

Answer 1

Try this one:

http://www.mikage.to/jquery/jquery_history.html

Answer 2

Any suggestions on how to solve this without using a framework like jQuery? All that I need is the one function. This will be used on an iPhone and so am trying to avoid unneeded frameworks.

Thanks again, Linda

Answer 3

The way the jQuery plugin does it is to check the current URL every 100 milliseconds and as soon as the hash part of it changes, it triggers a reset of the content using a callback function. This is rather inefficient and crude, but I don't think there's another way. You can do this by adding this script to the head:

<script>
  var lastHash = window.location.hash || "nothing";
  setInterval(function() {
    if (lastHash != window.location.hash) {
      if (window.location.hash == '#offscreen') {
       document.getElementById('offscreen').className = 'slideInFromRightToLeft';
       document.getElementById('div1').className = 'slideLeftOut imInvisible';
      } else {
       document.getElementById('offscreen').className = 'slideRightOut imInvisible';
       document.getElementById('div1').className = 'slideInLeftToRight';
      }
    }
  }, 100);
</script>

This way you can also remove the onClick handlers and place all the logic in this function.