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

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 !