Question

83

jquery javascript: adding browser history back with hashtag?

rated 0 times [ 85] [ 2] / answers: 1 / hits: 15354 / 13 Years ago, mon, march 21, 2011, 12:00:00

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

            })

        });



    });



});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

makaylahk

Add To Favorites

Follow

Total Points: 166

Total Questions: 94

Total Answers: 117

Location: Gabon

Member since Sat, Jul 25, 2020

4 Years ago

makaylahk questions

1 Electron store data locally without localstorage

Tue, Apr 26, 22, 00:00, 2 Years ago

1 Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response when using http get req from JS to SlackAPI

Mon, Feb 28, 22, 00:00, 2 Years ago

1 How do I use the useState hook to change the color of my react icons to blue?

Wed, Jul 21, 21, 00:00, 3 Years ago

1 Property 'selectionStart' does not exist on type 'EventTarget'

Fri, Mar 19, 21, 00:00, 3 Years ago

1 How can I pass multiple values in a single prop in react?

Sat, Feb 27, 21, 00:00, 3 Years ago

View All

answered 13 Years ago kristiano · Accepted Answer

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



});