1

I'm creating a website using wampsever. I have divided the page into section using div tag. In order to display the content of the menu in the same page I made use of JavaScript.

Thus in every link I use href="javascript:ajaxpage('info.php', 'content');" where 'content' is the id of the div in which my info I want to be displayed.

The problem is that using the backspace button (tested in Chrome and Firefox 10), I can't go back to the previous shown content in the div selected section.

PS: I work my page locally

Thanks for your answers in advance

Rocket Hazmat
  • 204,503
  • 39
  • 283
  • 323
user1681361
  • 21
  • 4
  • I was going to explain how to disable the backspace. But am understanding now you wan't the backspace key to behave like a back navigation button? Suppose maintain an array representing history of div content, handle the keypress event and use correct offset in that array. – ficuscr Sep 18 '12 at 20:24
  • 2
    You'd need to use `history.pushState` (and `onpopstate`) for what you want to work. – Rocket Hazmat Sep 18 '12 at 20:24
  • ^^ Much better suggestion of what I was describing. – ficuscr Sep 18 '12 at 20:26
  • 1
    You can use defunkt's pjax library to use pushState just like jquery's ajax calls. https://github.com/defunkt/jquery-pjax – JKirchartz Sep 18 '12 at 20:27
  • Related: http://stackoverflow.com/questions/4015613/good-tutorial-for-using-html5-history-api-pushstate – Matteus Hemström Sep 18 '12 at 20:58

1 Answers1

2

Most modern browsers now support javascript manipulation of history. Mozilla has got a good sum up here.

For cross-browser compatibility see History.js.

And some code:

// 1. Push a state when page loads.
history.pushState(window.location.href, 'Page Title', window.location.href);

// 2. On every ajax navigation, push that state
history.pushState(ajaxHref, 'Page title', ajaxHref);

// 3. Setup a event for onpopstate (when the user goes back)
window.onpopstate = function(e) {
    if(e.state != null)
        ajaxpage(e.state, 'content');
};
Matteus Hemström
  • 3,681
  • 2
  • 22
  • 33
  • Thank you very much for your fast response. I know my question may be naive but could you please explain where should i put this code (i suppose in a seperate .js file) but how can i call it since i have the following : info Thanks again – user1681361 Sep 18 '12 at 20:47
  • It's hard to tell since I haven't seen your code. But the first and third parts of code should be placed so that it is run when the page loads. That could be e.g. inside a script tag of your body. The second part should go inside your function ajaxpage. – Matteus Hemström Sep 18 '12 at 20:52
  • @Fnatte i am facing the same problem could you please help – Neha Jan 26 '16 at 13:31