0

I have a page where multiple tabs (subpages) are accessed via jQuery show/hide functions. When one clicks on the logo all other tabs are hidden and the first one is shown.

I would like to attach the same show/hide flow as with $("#logo").click() to the back button. When someone would tap browser's back button the default action should be prevented and show/hide combination should be activated to display the first tab.

Does anyone has a solution?

window.onbeforeunload function does not work... https://jsfiddle.net/hqkyxz3w/3/

120382833
  • 143
  • 1
  • 10
  • can you create a snippet with relevant css and html code? – silviagreen Mar 03 '16 at 12:58
  • post the code or fiddle –  Mar 03 '16 at 13:03
  • Possible duplicate of [pain of browser back button](http://stackoverflow.com/questions/2336134/pain-of-browser-back-button) –  Mar 03 '16 at 13:04
  • https://jsfiddle.net/hqkyxz3w/2/ This is a basic demo... Once I have page 1 shown I want to hide it when i click back button... But the alert placeholder works for the initial location change, not when going back.. – 120382833 Mar 03 '16 at 13:47

2 Answers2

1

This is usually done using URL's hash (that's everything after #) and window.history.pushState() method.

When the user clicks on a tab/logo:

  1. Change location.hash to whatever you want.
  2. Call window.history.pushState() to add state to browsers history. See https://developer.mozilla.org/en-US/docs/Web/API/History_API for more detailed explanation what parameters it requires.
  3. Call your function that hides/shows appropriate tabs.

Then, when you press the browser's back button you want the tabs to change so you need to know when the URL's hash has changed.

  1. See this answer how to listen to hash change events: On - window.location.hash - Change?
  2. Check current hash and call the same function from bullet point 3 in the previous paragraph that hide/shows tabs.
Community
  • 1
  • 1
martin
  • 93,354
  • 25
  • 191
  • 226
  • There is actually no links on the site, everything is on index.html .. So there is no redirection to a certain page via a href (no #page1).. Tab content is changed with clicking on div's with certain ID's or classes.. Click on the logo acts the same.. Considering that do we stil have a solution? – 120382833 Mar 03 '16 at 13:12
  • That's all right. You don't want to redirect the user anywhere, you just want to change the URL's hash so you're able to navigate using browsers back/forward buttons. This is functionality is unrelated to what elements, IDs, classes you use. You'll use different hashes only to be able to restore the tabs state. – martin Mar 03 '16 at 13:15
  • Thanks.. So I have this for now: https://jsfiddle.net/hqkyxz3w/1/ How do I add function to hide #page1 on back button? – 120382833 Mar 03 '16 at 13:34
  • https://jsfiddle.net/hqkyxz3w/2/ Actually this uses calls up alert when I click on tab, but it should work after you tap back button not all the other buttons.. – 120382833 Mar 03 '16 at 13:41
0

Here is the half working version... I have used location.hash and history.pushState to change it on clicking the tab and then window.onpopstate to hide the page..

https://jsfiddle.net/hqkyxz3w/4/

The problem still exists because the onpopstate also fires when clicking the tab and not only when tapping back button.. Here is the example:

https://jsfiddle.net/hqkyxz3w/5/

$("#tab1").click(function(){
location.hash = 'something';
history.pushState({extraData: "something"}, '', 'new-hash'); 

    $("#page1").show();
});

$("#logo").click(function(){
    $("#page1").hide();
});

window.onpopstate = function() {
alert('How to exclude it on clicking page one?');
$("#page1").hide();
 };
120382833
  • 143
  • 1
  • 10