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();
            })
        });

    });

});

Geoff Appleford · Accepted Answer · 2011-03-24T09:43:57.450

7

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");

});

edited Mar 24 '11 at 09:43

answered Mar 21 '11 at 12:08

Geoff Appleford

18,538
4
62
85

thank you. I almost got it working. I updated my post. Any idea what I'm doing wrong though? I'm applying the "#map" hash before i bind the hashchange listener, however it doesn't properly work. Any idea? – matt Mar 21 '11 at 12:27
@mathiregister - you need to manually trigger the hashchange event the first time the page loads (or after you have bound the listener), thereafter the `hashchange` events fires everytime you change it. I've updated my answer. – Geoff Appleford Mar 21 '11 at 13:11
Thank you. Is there no way to solve this without using this plugin. I just need that thing once on my entire page and 53kb for this jQuery plugin is quite a lot. – matt Mar 21 '11 at 14:17
@mathiregister - the minified version is only 4KB. http://github.com/cowboy/jquery-bbq/raw/v1.2.1/jquery.ba-bbq.min.js. More info here: http://benalman.com/projects/jquery-bbq-plugin/. He also has another plugin that just provides the hashchange event. Its only 1.5KB. See http://benalman.com/projects/jquery-hashchange-plugin/. As explained on that page, you need the plugin to provide this functionality in older browsers. – Geoff Appleford Mar 21 '11 at 14:47
@mathiregister - just saw your code edit so I updated my answer to include a more complete example. – Geoff Appleford Mar 21 '11 at 14:57
Ben Alman's plugin is quite a bit out of date. It breaks on the current version of Chrome. It may be best to find a different library or contribute a patch to Ben's. – Corgalore May 10 '16 at 15:37

score 0 · Answer 2 · edited May 23 '17 at 12:08

0

Probably, half of your question is answered here: jQuery removing hash value from URL

edited May 23 '17 at 12:08

Community

1
1

answered Mar 21 '11 at 12:06

Fortega

19,463
14
75
113

score 0 · Answer 3 · answered Mar 21 '11 at 12:06

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.

jquery javascript: adding browser history back with hashtag?

3 Answers3

Linked