Search code examples
javascripthtmlbuttonback

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

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.

Solution

  • 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 !