CODEWITHSUNDEEP
javascriptjqueryhtmlcss
frosty
frosty

Reputation: 2851

Hide div when user clicks browser's back button

When a user clicks a thumbnail, it opens a div that covers the whole screen, and the document title and URL both change.

$('.view-overlay').show();
$('html,body').css("overflow","hidden");

// once AJAX is done, in success:

$('.view-overlay').append(data);
window.history.pushState('page2', title, url);
document.title = title;

When the user clicks the back button, I want to reverse that, with the following JS to execute:

$('.view-overlay').empty().append('<div class="view-close">x</div>').hide();
$('html,body').css("overflow","auto");
window.history.pushState('page1', "previous title", "previous url");
document.title = "previous title";

I tried onbeforeunload but I'm not sure if that's how it can be used

Upvotes: 2

Views: 3734

Answers (1)

LostMyGlasses
LostMyGlasses

Reputation: 3144

With window.onpopstate you detect events such as the back button being pressed.

EDIT: in your example, you could do:

window.onpopstate = function() {
    $('.view-overlay').empty().append('<div class="view-close">x</div>').hide();
    $('html,body').css("overflow","auto");
    window.history.pushState('page1', "previous title", "previous url");
    document.title = "previous title";
}

However, you don't need to manually set the title or the URL, since they were in the history stack and the browser will automatically update them.

Upvotes: 3

Related Questions