Browser back button broken between hidden div's

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.

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.

I think the best option is to use the following code:

$(window).load(*GetSelectedItem*);

GetSelectedItem sample function is below:

function GetSelectedItem() 
{
    var chosen = "";
    var len = document.signUpFrm.frmUserChoiceForActionPropertyType.length;

    $('#display_spacer').hide();

    $('#display_industry_type').hide(); 
    document.signUpFrm.industry_type.value = '-1';

    $('#display_warehouse_type').hide(); 
    document.signUpFrm.warehouse_type.value = '-1';

    $('#display_commercial_type').hide(); 
    document.signUpFrm.commercial_type.value = '-1';

    for (i = 0; i <len; i++) 
    {
        if (document.signUpFrm.frmUserChoiceForActionPropertyType[i].checked) 
        {
            chosen = document.signUpFrm.frmUserChoiceForActionPropertyType[i].value;
            showHideErrorMsg('frmUserChoiceForActionPropertyType','',0);
        }
    }
    if (chosen == "") 
    {
        alert("No Location Chosen");
    }
    else if (chosen == "Industry")
    {
        $('#display_spacer').show();    
        $('#display_industry_type').show();
    }
    else if (chosen == "Warehouse")
    {
        $('#display_spacer').show();    
        $('#display_warehouse_type').show();
    }
    else if (chosen == "Commercial")
    {
        $('#display_spacer').show();    
        $('#display_commercial_type').show();
    }
}

I am not sure if this can be done without JQuery. Yes, you can look at the code of JQuery! :)

But this works for me.

Incase of any questions, you can mail me the code snippet at ak.81 at live dot com.

Cheers, Annu

Try this one:

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