2

The website I'm making has a few basic jQuery-animated effects, including the animation that slides the main content from below the lower edge of the browser window when every new page opens, and slides the same content up and out of the browser window when any menu link is clicked, before opening the new page.

When I go back to the previous page using the browser's "back" button, the main content remains hidden (because the last thing that happen to the page was the animation that removed the content out of the browser window).

Question: how can I refresh / reset the page to its initial state when it's visited by clicking the browser's back button?

I assume this can be achieved by forcing a page refresh when it's visited via browser back button - even though I may be wrong. I would greatly appreciate advice on this!

(This topic has been brought up before but somehow none of the answers I found on this website quite solves the issue.)

Dimitri Vorontzov
  • 6,686
  • 10
  • 44
  • 75

2 Answers2

3

The simple and elegant solution of this problem was found by Shawn Chin. Please see this discussion: Browser "Back" Button vs. jQuery-animated page

Community
  • 1
  • 1
Dimitri Vorontzov
  • 6,686
  • 10
  • 44
  • 75
2

For starters, your site seems to work fine in Chrome (no hidden content). However, I see the behavior you describe when I load the page in Firefox.

However, to force your page to 'refresh', you can prevent it from caching in the first place. Try adding something like this to the <head> section.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

Really, these headers should be pushed from the server. See this question or this question.

Alternatively, you can check the position of the hidden div when the page loads (in the $(document).ready() section). If it's not where it's supposed to be, reload the page using location.reload();

For your site, something like this should work.

window.onload = function() {
  if (document.getElementById("content").offsetParent.offsetTop < 0) { 
      location.reload(); }
  }

Please note that you should only have ONE window.onload or $(document).ready on your page. So if you already have one, simply place the if statement in there.

Community
  • 1
  • 1
Jeff
  • 11,233
  • 10
  • 44
  • 85
  • Doesn't work, for some reason. Most likely I'm doing something wrong. I inserted that code under the "title" meta tag. When I click the back button, the result is the same: no content (at least in Safari and Firefox). Does it matter where I insert these tags? – Dimitri Vorontzov Jun 02 '11 at 03:19
  • Hmm anywhere in the head section should be fine. I just updated my response based on what's listed in the second link in my post. Perhaps this helps, but if not, I'm not really sure... – Jeff Jun 02 '11 at 03:24
  • Nope. I tried the updated version, too. Same result, unfortunately. Any other solution please? – Dimitri Vorontzov Jun 02 '11 at 03:26
  • Actually, I take it back. It did work for Firefox! Jeff, you're on the right track! Thank you! Any suggestions in how to make it also work for Safari? – Dimitri Vorontzov Jun 02 '11 at 03:29
  • I'm surprised it doesn't work in Safari, since it's Webkit (like Chrome). But the second solution I mentioned should work for any browser. – Jeff Jun 02 '11 at 03:30
  • Still not working, I'm afraid. Let me ask a more specific question: say, I want to check if a #content is not at top=15%, and reload the page ONLY ONCE if it's not there, what code would do that? – Dimitri Vorontzov Jun 02 '11 at 03:52
  • The code I posted works fine for me. You already have a window onload function in cy3.js. You need to put the if statement inside of there. – Jeff Jun 02 '11 at 03:58
  • I'm not testing it on that website though. It's only a simplified version. The one I'm working on is a lot more complex and has a different structure of the page. (I understand the window.onload requirement.) – Dimitri Vorontzov Jun 02 '11 at 04:05
  • That's why it's not working, then. Try this: go to the webpage with the div in place and type javascript:alert(document.getElementById('content').offsetParent.offsetTop); to see what the value is. Now go forward and go back (so that your div is hidden) and do it again. What's the value? Modify the if statement above accordingly (if offsetParent.offsetTop is less than original value...) – Jeff Jun 02 '11 at 04:08
  • Unfortunately when I place that snippet in my page, the page stops working. – Dimitri Vorontzov Jun 02 '11 at 04:13
  • The snippet from my previous comment? That snippet is a bookmarklet, it's not meant to go in your code. You can put it in the location bar of your browser and hit enter. – Jeff Jun 02 '11 at 04:14
  • Oh, I see. Great! The value is 0 both times. – Dimitri Vorontzov Jun 02 '11 at 04:16
  • Hmm not for me in Firefox or Safari. You can try .top instead of .offsetParent.offsetTop, and if that doesn't work, I dunno. But that's the basic idea, you just have to find a value that changes, and check its value when the page loads. – Jeff Jun 02 '11 at 04:20
  • Jeff, I think it may be the problem of the page structure. Do I understand it correctly that your code is checking the parent element of the element with id of "content"? (I do not have that ID on the page I actually work on.) I can't send you the link to that page unfortunately, because I work on it locally and the site would take hours to upload. – Dimitri Vorontzov Jun 02 '11 at 04:22
  • Yes, that's right! You mentioned #content a few comments ago. But that should be replaced with whatever your div name is. – Jeff Jun 02 '11 at 04:24
  • I did that. 0 in both cases. Aaargh! – Dimitri Vorontzov Jun 02 '11 at 04:26