Jquery javascript: adding browser history using hashtag?

Question

I have a link on my website that says "Fullscreen Google Map." As soon as I click on it, I load the google map into a 100% and 100% fixed container div . When I click the link, I also add #map as a hash.

Is it possible for the browser feedback button to work with this? That is, if I click this link, I will add #map to my current address. As soon as I press the back button, the #map hash is deleted and the div container with the google map is deleted or hidden.

How is this possible?

edit:

 $('.showMapLink').live('click', function() { $('#mapContainer').fadeIn('fast', function () { loadMap("mapContainer"); top.location.hash = "map"; $(window).bind( 'hashchange', function( event ) { $('#mapContainer').fadeOut('fast', function () { $(this).children().remove(); }) }); }); }); 

Answer 1

A great resource and plugin to help with this: Ben Almans bbq plugin , it helps you set and read the hash of the url (e.g. see pushState and getState ) and it provides a hashchange event that works in browsers.

Handle the hashchange event and handle it there. You need to manually trigger the event the first time the page loads.

 $(document).ready(function(){ $(window).bind( 'hashchange', function( event ) { // show/hide map here. this will vary depending on what you use in the url if (window.location.hash == "map"){ $('#mapContainer').fadeIn('fast', function () { loadMap("mapContainer"); }); } else { $('#mapContainer').fadeOut('fast', function () { $(this).children().remove(); }) } }); $('.showMapLink').live('click', function() { top.location.hash = "map"; }); $(window).trigger("hashchange"); }); 

Answer 2

Probably half your answer will be answered here: jQuery removing a hash value from a URL

Answer 3

Yes, this is possible (with recent) browsers.

See document.location.hash to add #map to the current URL.

Register an onhashchange event listener to look for changes, but note that when the tag is set, it also triggers such an event. Therefore, you need to discard any event that contains the same hash as the one you just set.

Alternatively, consider the jQuery plugin, which has workarounds for older browsers.