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

Question

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.

Answer 1

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.

Answer 2

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 !