jquery javascript: adding browser history back with hashtag?

Question

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

Is it possible to make the browser back button work with that? That is, if I click this link, I add #map to my current address. Once I click the back button, the #map hash is removed and the div container with the google map is removed or hidden.

Is that somehow 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 is Ben Almans bbq plugin, It will help you set and read the hash part of the url (eg see pushState and getState) and it provides a hashchange event that works across browsers.

Handle the hashchange event and do your processing in 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 of your question is answered here: jQuery removing hash value from URL

Answer 3

Yes, it's possible (with recentish) 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 you set the tag, it also raises such an event. Hence you need to discard any event which contains the same hash as the one you just set.

Alternatively, look at the jQuery history plugin, which has workarounds for older browsers.