Question

I have a project that I have built which uses a simple mechanism, when a set of icon links are clicked, a div layer animates into the content area – then requires the user to click a ‘close’ button to animate the div in the reverse, meaning setting opacity to 0 and sliding back out of view.

With the div ‘open’, there are links to external pages (labeled ‘GO’). Currently I have them opening in a new tab/window. However, the client would prefer that if you visit the external page link, then click your browser back button, the div would remain in its ‘open’ state.

Does anyone know of a relatively simple way to set this up – without completely reengineering the way I have it built? Or does it require some kind of advanced plugin and a complete rework of code?

The jQuery that opens the divs is here:

var triggerPanels = function(){
for(i=1; i <= 9; i++){
(function(e) {
var trigger = $("#iconTrig" + i);
var panel = $("#pane" + i);
$(trigger).click(function(){
    $(panel).animate({
     right: 0, opacity: 1
      }, 500 );

    return false;
});
 })(i);
 }
};

The link to a working version of the page is here, and if you click the Enter button, then click on one of the icons you will see it in action. Any help is greatly appreciated. Thanks!
http://dev.seanchristiandampier.com/asia-timber/index-dev-new.html

UPDATE: The client was happy to simply open the links in a new tab – so bypassing the need to use the hash for history purposes. However, all of the comments and answer here help point to a solution, and I may play around with this a bit on my own just so that I can absorb the concept, and see if I can get it working. Thanks!

Answer 1

Not sure on the nitty gritty of your code but hooking into the window history is a relatively simple task. You can use the hash (everything after the # of the url) to work out your logic.

Very simple solution:

<div class="div">TheColor</div>
<a href="#blue">Blue</a>
<a href="#red">Red</a>​

Then with jQuery:

//capture the hash change event and do what you want with the window hash.
$(window).on('hashchange',function(e){
    $('.div').css('background-color',window.location.hash.replace('#',''));
});

//Used to trigger the above event if someone links to the page with the hash set already.
$(window).trigger('hashchange');

Working example (you can’t see the hash because jsFiddle uses an Iframe, but try out clicking the buttons and the back button on the browser): JSFIDDLE