Change browser button behavior for my web app?
I am creating a web page "as an application". The actual page is wider than the browser viewport, which is hidden from overflow. Clicking on different links changes the CSS to animate into different sections. Here's a very simple demo: http://smartpeopletalkfast.co.uk/pos/
At this point, I am working on a demo, not a production site. I want to intercept the Back in Browser button, so if you navigate to a section, you will return to the previous section rather than leaving the web page. In an ideal world, this would happen with the same animations used to navigate through sections.
Can this be achieved? From research I don't think it can be intercepted and disabled by default browser button.
I know they have a lot of posts about disabling the browser button on this site and usually the answer is DONT! However, navigating to different sections on my page is like navigating to separate pages, so I think what I'm trying to achieve is in line with what users expect.
As you usually get something similar with AJAX based applications, the HTML5 history API is used. As I understand it, you need to add the snippet urls to your browser history so that something like mysite.com # section2. I'm not sure if this will work for me, as horizontal scrolling is not based on fragmentary links like vertical scrolling. Maybe I could use JavaScript to detect when the url ends with a snippet like # section2 and change the CSS so that the second section is in the viewport? I guess there would be no way to spice it up?
source to share
Use HTML anchor tags when clicking the navigation button (on your page). Thus, scrolling to where the anchor is located (top, left). This will cause the browser and forward buttons to navigate to the anchors.
Take them for example:
Code for the button:
<a href="#filters">Filters <</a>
<a href="#map">Map ></a>
Just change the binding of the forward and backward buttons on your page as it matches where the user is going. This makes the browser keep track of where the user is on your page.
Even if you don't add actual anchor links to get the hash tags to work, you can still use the javascript property window.location.hash
to navigate the user yourself.
source to share
The idea of changing the native behavior of the back button in the browser is definitely a red flag signaling that something is approaching wrong, and in fact it is not possible, cross browser.
I would handle unload
event
for the browser to try and transition smoothly between states.
source to share
I agree with Gabe that trying to change the behavior of the back button is usually a red flag; however, after reading what you are trying to do, I see no problem. (This might be a terminological thing and you are not trying to change the behavior of the back button, you are trying to add state to the browser history so the back button can navigate through it).
You want to use jQuery BBQ , which manages the state in the url hash (part after #
). Listen to the event hashchange
and animate between your panels accordingly:
$(window).on('hashchange', function() {
var page = $.bbq.getState('page');
// animate to `page`
});
Now you don't even need to attach event handlers to the next page button - just a link:
<a href="#page=map">Map</a>
source to share