Question

Not too sure what to call this, but here is my abstracted problem:

When going back and forward, why will some browsers not remember what was open and others will?

For example,

Given the following:

html

<h2>&raquo; <a href="#" id="clickMe">Click Me</a></h2>
<div id="hiddenContent">
    <h2> Meaty Filler </h2>
    <p>
       Bacon ipsum dolor sit amet deserunt venison dolor meatball laboris short loin dolore capicola prosciutto. Tongue cillum salami, drumstick strip steak do spare ribs ball tip proident short loin ullamco ex tempor. Fugiat labore in ut quis ribeye turducken pig beef. Corned beef ham proident, nisi adipisicing bresaola irure kielbasa pig. T-bone nisi ham hock consequat laborum est exercitation dolor shoulder biltong velit qui sunt. Ut chuck esse short ribs turducken, pork loin id.
    </p>
    <p>
Nulla sunt aute meatloaf drumstick pork. Drumstick deserunt capicola aliqua flank leberkas brisket consectetur. Pork belly meatloaf proident, deserunt tri-tip voluptate aliqua. Commodo minim consequat, shoulder tenderloin eiusmod laborum excepteur flank reprehenderit in.
    </p>
   &raquo; <a href="http://baconipsum.com/">  Get Me Some Bacon</a>
</div>
        ​

javascript/jquery

$('#clickMe').click(function(e) { 
   e.preventDefault();
   $('#hiddenContent').fadeToggle();        
})​

css

#hiddenContent {display: none; border: 1px solid #ccc; background: #fcfcfc; padding: 1em; margin: 2em; border-radius: .25em; box-shadow: 2px 5px 10px #DBDBDB;} 

#hiddenContent:hover { background: #FBFBFB; } 
h2 { font: 1.5em/1.75em Georgia, serif; } 
p { margin: 0 0 1em; font: 1em/1.25em Georgia, serif; text-align: justify; } 
a { color: #444; text-decoration: none;} 
a:hover { text-decoration: underline; color: #222; }​

When I click on “Get Me Some Bacon” and hit the back button, chromium and IE8 will not remember that #hiddenContent was open, and no longer hidden, but firefox will. Ideally, I would prefer to mimic the behavior of firefox, but am not sure if I am able to. Is this possible?

here is a NON WORKING jsfiddle.
It will not work as jsfiddle explicitly reloads the page when you hit back, but in my (struts — java based) web application I have set the response to explicitly cache.

Answer 1

So it sounds like you want the browser to remember what changed on the page after the page loaded when you go back to it. Firefox’s page cache does work like this in some instances, but you can’t count on it in other browsers.

I think what you want to do is update the URL hash (or fragment) when you un-hide the content. That will put a new entry in the browser’s history.

Then on that same page, you want to check the hash on page load to determine whether to show the hidden content.

$('#clickMe').click(function(e) { 
    e.preventDefault();
    window.location.hash = 'show'
    $('#hiddenContent').fadeToggle();        
})​

and also add this

$(document).ready(function() {
    if(window.location.hash == 'show')
        $('#hiddenContent').show();
});

Then when you hit back, #show will be in the URL. On ready, you can check that value and show the content.