CODEWITHSUNDEEP
javascriptjqueryhtml
supersize
supersize

Reputation: 14783

browsers back button location issue

I have the following script for a smooth fadeIn, fadeOut when I'm linking to subpages.

$("body").css("display", "none");
$("body").fadeIn(500);

$('a').click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("body").fadeOut(500, redirectPage);       
});

function redirectPage() {
    window.location = linkLocation;
}

which works fine. The weird thing about this is, that the browsers back button has an issue. Lets say I'm on my index.html and click on a link which links to about.html, and try to get back to index.html by the back button all it shows is a blank page. It needs to refresh manually.

To make my issue clearer you can find an example HERE

NOTE: I experience this issue under Firefox and Safari. Chrome seems to be fine.

Upvotes: 1

Views: 74

Answers (1)

jcaron
jcaron

Reputation: 17710

This is due to the special "back/forward" cache of browsers, which stores the full state of the page.

You might want to add the fadeIn on the pageshow event.

See this answer for details:

https://stackoverflow.com/a/2218733/3527940

Upvotes: 3

Related Questions