Capturing back navigation within page

Question

So as you can see from the code below I'm using a tags to navigate between headers on my webpage. I need to resize some div when the navigation happens, I'm doing this with a JS function that works the way it should when a button is clicked.

However when the user presses the browser's back or forward buttons the javascript function isn't called and the div doesn't resize and this messes up my page bigtime.

Anyone have suggestions on how to fix this issue?

<a href="#header1" onclick="resizeContainer(this)">Go to header 1</a>
<a href="#header2" onclick="resizeContainer(this)">Go to header 2</a>

You could take a look at this plugin : https://github.com/browserstate/history.js — web-tiki, May 15 '14 at 10:32
Did you Google? http://stackoverflow.com/questions/14543245/browser-back-button-handling OR http://stackoverflow.com/questions/18457797/how-to-know-whether-refresh-button-or-browser-back-button-is-clicked-in-firefox — Dipak, May 15 '14 at 10:32
@Dipaks of course I did, the beforeunload event only works when navigating to a new page and not when staying within the same page. — Fester, May 15 '14 at 10:37

score 1 · Accepted Answer · answered May 15 '14 at 10:35

1

I would look into Ben Alman's jQuery BBQ plugin located here: http://benalman.com/projects/jquery-bbq-plugin/

It allows you to have a callback when the hash is changed.

answered May 15 '14 at 10:35

ashin999

375
1
12

I ended up just using the `onhashchange` event, but I found it on the website you linked. – Fester May 15 '14 at 10:46

score 0 · Answer 2 · answered May 15 '14 at 10:35

0

window.onbeforeunload = function (e) {
  var message = "Your message goes here.",
  e = e || window.event;
  // For IE and Firefox
  if (e) {
    e.returnValue = message;
  }

  // For Safari
  return message;
};

Read Mastering The Back Button With Javascript

answered May 15 '14 at 10:35

Chankey Pathak

21,187
12
85
133

I tried the unbeforeunload event, but since the page isn't reloading it won't be called so doesn't solve my problem. – Fester May 15 '14 at 10:39

score 0 · Answer 3 · answered May 15 '14 at 10:42

In my opinion you can have more control if you do it differently. I've created a working example for you that you can find and edit here http://jsbin.com/jociy/5/

Otherwise, please follow:

$(document).ready(function(){

 $('.bar').on('click', function(){

    var hash = $(this).attr("href");

    // get the element position
    var toPosition = $(".foo[hash='" + hash + "']").offset().top;

    // scroll to the element position
    $('html, body').animate({
      scrollTop: toPosition
    }, "slow", function(){

      console.log("Expand fn() goes here!");

    });

 });

});

The HTML to understand what's going on:

  <a href="#foo1" class="go bar">Foo 1</a>
  <br>
  <a href="#foo2" class="go bar">Foo 2</a>

  <div class="foo red">I'm red!</div>
  <div class="foo green" hash="#foo1">I'm green!</div>
  <div class="foo blue">I'm blue!</div>
  <div class="foo yellow" hash="#foo2">I'm yellow!</div>

That's all! Hope this helps you!

@Fester in case you need to see the "Expand fn()" example, I can show you, but I think that one is basic. My solution, in my opinion is very easy to read, light (no need for plugins, etc) and doesn't prevent the hash from showing in the url. etc — punkbit, May 15 '14 at 10:46

Capturing back navigation within page

3 Answers3