2

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.

matchew
  • 19,195
  • 5
  • 44
  • 48

2 Answers2

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.

alexp
  • 3,587
  • 3
  • 29
  • 35
  • I like this idea. As it is a long the lines of something I was thinking. If I could have the javascript respond to something in the pagee. I have left work for the day, but I might have to try it out in the morning. – matchew Dec 06 '12 at 00:46
  • This was actually, exactly what I was after. Do note that my original question is almost a dupe of http://stackoverflow.com/questions/680785/on-window-location-hash-change which gives a lot of valuable information as well. – matchew Dec 06 '12 at 17:11
0

It looks like this may not be possible (or at least in a way that is always guaranteed to work), as it is browser dependent behavior. There may be settings in Chromium and IE that can be used to mimic the Firefox behavior, but those settings are the domain of the browser user, and therefore largely out of your control.

Also take a look at this related question: Does back/forward in the browser change javascript variables?

Community
  • 1
  • 1
Chamila Chulatunga
  • 4,856
  • 15
  • 17