I am trying a new functionality for my web site. I want to do simple navigation by hiding/showing <div> elements.

For example, when a user clicks a "details" button on some product, I want to hide the main <div> and show the <div> containing the details for the product.

The problem is that to go back to the previous "page", I have to undo all the display/visibility style changes, which is ok if the user clicks the "close" button in the newly opened <div>. But most users will hit the BACK button.

Is there a way to make the BACK button go back to the previous "state" of the page i.e., undo the visibility/display changes?

Thanks.

I am trying a new functionality for my web site. I want to do simple navigation by hiding/showing <div> elements.

For example, when a user clicks a "details" button on some product, I want to hide the main <div> and show the <div> containing the details for the product.

The problem is that to go back to the previous "page", I have to undo all the display/visibility style changes, which is ok if the user clicks the "close" button in the newly opened <div>. But most users will hit the BACK button.

Is there a way to make the BACK button go back to the previous "state" of the page i.e., undo the visibility/display changes?

Thanks.

• javascript
• html
• button
• back

• Possible duplicate of How to keep the browser history in sync when using Ajax? – YakovL Commented Aug 13, 2016 at 22:24

6 Answers 6

Yes. What you're looking for is called AJAX browser history.

There are a few open implementations out there, like RSH as well as plugins/modules for frameworks like jQuery and YUI.

to answer the question of your title (that's what I was looking for)

Using the BACK button to revert to the previous state of the page

and from the link from @reach4thelasers's answer, you have to set up a timer and check again and again the current anchor:

//On load page, init the timer which check if the there are anchor changes each 300 ms  
$().ready(function(){  
   setInterval("checkAnchor()", 300);  
});

because there's no Javascript callback triggered when the BACK button is pressed and only the anchor is changed ...

--

by the way, the pattern you're talking about is now known as Single Page Interface !

You need to add an anchor to the URL whenever a change is made

www.site.com/page.html#anchor1

This will allow the browser to maintain the pages in its history. I implemented it in my current site after following this tutorial, which works great and gives you a good understanding of what you need to do:

http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/

Your example in the comments won't work, because it works like this:

1. Page Loaded

2. Page Changed, Add Anchor to URL (back button takes you back to back to 1)

3. Page Changed, Anchor Changed (back button button takes you back to 2)

4. Page Changed, Anchor Changed (back button button takes you back to 3)

   .... and so on and so on..

If there is, it sounds like a pretty evil thing to do from a UX perspective. Why don't you design a "back" button into your application, and use design to make it obvious to the user that they should use your application's back button instead of the browser.

By "use design," I mean make your application look like a self-sufficient user interface inside of the browser, so the user's eye stays within your page, and not up on the browser chrome, when they are looking for controls to interact with your app.

You can do this with anchors, which is how it's done in a lot of flash applications, or other apps that don't go from page to page. Facebook uses this technique pretty liberally. Each time the user clicks on a link that should go in their history, change the anchor on the page.

So say my home page link is:

http://www.mysite.com/#homepage

For the link that works your javascript magic, do this:

<a href="#otherpage" onclick="javasriptMagic()">My Other Page</a>

This will send the user to http://www.mysite.com/#otherpage where clicking the back button will go back to http://www.mysite.com/#homepage. Then you just have to read the anchors with

window.location.hash

to figure out which page you're supposed to be on.

Take a look to this tutorial based on ItsNat a Java web framework focused on Single Page Interface web sites