Browser "Back" Button vs. jQuery-animated page

Question

I have a challenging problem I've been battling for some time now.

The Problem: when I go back to previous page using browser's back button, the page is displayed in its final state after all the animations had played. I want it to display in its initial state and replay the animations.

My site uses some basic jQuery animation. The initial state of each page has the main content hidden below the lower edge of the browser window, When the window loads, the main content animates up to appear in the browser. When a visitor clicks any menu link, the main content rolls up again and disappears above the upper edge of the browser window - and then the new page loads. The whole thing is achieved with these two bits of code:

//Animate the content up from below the browser window

$('#maincontent').animate({top: "15%"}, 2000);

and

//Animate the content up to hide above the browser window

$('#menu a').click(function(event) {
    event.preventDefault();
    var href = this.href;
    $('#maincontent').animate({
        top: '-300%'
    }, 500,
    function() {
        window.location = href;
    });
});

The Question: how do I make the page display in its initial state when the browser back button is clicked?

I browsed StackOverflow for some time. People asked about this issue a lot but no one seem to have arrived to a solution that really worked. Suggestions include blocking the page from being cached – (doesn't work, and even if it worked, wouldn't be very productive because some pages do need to be cached) – reloading the page (leads to some peculiar behaviors and ultimately doesn't work, either) - using cookies (no specific example of code is given anywhere) or using php (no specific example of code is given anywhere). I asked several questions about in on this site and received a number of suggestions but none of them worked in my situation. So after a couple of sleepless nights I want to ask if someone can really help with this.

If someone had dealt with that probelm before successfully, I would be grateful if you could share your expert knowledge and suggest a workable solution!

NEW EDIT: I think I may have found a solution, but I want someone's help with jQuery/JavaScript syntax. I want to try to modify the code to add one more action to it, but I'm not sure how to write it, so that the page reloads a moment before the location is changed to the new page So instead of the second snippet shown above, I want to write something like this:

//Animate the content up to hide above the browser window

$('#menu a').click(function(event) {
    event.preventDefault();
    var href = this.href;
    $('#maincontent').animate({
        top: '-300%'
    }, 500,
    function() {
    // a code that reloads the same page, something like
    //window.location = window.location; followed by
        window.location = href;
    });
});

-- but I just don't know how to write it correctly.

Alternatively, perhaps it's possible to reset the css values of the page to the the default ones from the css file and trigger JavaScript again?

Could someone advice the proper code please?

Answer 1

Disclaimer: The following isn't exactly a robust solution, but I found it amusing and thought I ought to share.

I had a similar requirement in the past, and strangely enough, the solution I ended up with was to downgrade to jQuery to take advantage of a bug in jQuery 1.3.

I only tested this on one version of Firefox, so YMMV, but try the following:

• Using jQuery 1.3 - this repeats the animation when you click the link then come back with the back button
• Using jQuery 1.4 - this doesn't

This was sufficient for my use-case since I was targeting a limited audience and only made minimal use of jQuery. That said, I'm eagerly watching this thread in a hope of finding a better solution.

Update

Following the trail of the above stated jquery bug, it looks like you can get the same effect by disabling the bfcache.

The simplest way to do would be to add an onunload attribute to body. (more details in link).

<body onunload=''>

Here's an example, which uses jquery 1.6. Again, not thoroughly tested so YMMV.

• Using jQuery 1.6, with bfcache disabled

Answer 2

The above answers touch on the problem, but provide hacky ways to solve the question. This seems to be the proper way to do it.

$(window).bind('pageshow',function(){
    alert("This page will run even if the back button was pressed!");
});

To read more on the pageshow/pagehide events see here: http://www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/

You could can take it a step further like this:

$(window).bind('pageshow',function(e){
        if (e.persisted) {
            alert("pageshow event handler called.  The page was just restored from the Page Cache.");
        } else {
            alert("pageshow event handler called for the initial load.  This is the same as the load event.");
        }
}

Answer 3

Check out this thread. He suggests a hack as given below (copied from there):

The onload event should be fired when the user hits the back button. Elements not created via JavaScript will retain their values. I suggest keeping a backup of the data used in dynamically created element within an INPUT TYPE="hidden" or TEXTAREA set to display:none then onload using the value of the textbox to rebuild the dynamic elements to the way they were.

If you don't care about rebuilding the page and want to actually reload it, then you could do: Code:

<input type="hidden" id="refreshed" value="no">
<script type="text/javascript">
onload=function(){
var e=document.getElementById("refreshed");
if(e.value=="no")e.value="yes";
else{e.value="no";location.reload();}
}
</script>

you can make the hidden value as "Yes" on #menu click.

HTH