I am trying a new functionality for my web site. I want to do simple navigation by hiding/showing <div> elements.
For example, when a user clicks a "details" button on some product, I want to hide the main <div> and show the <div> containing the details for the product.
The problem is that to go back to the previous "page", I have to undo all the display/visibility style changes, which is ok if the user clicks the "close" button in the newly opened <div>. But most users will hit the BACK button.
Is there a way to make the BACK button go back to the previous "state" of the page i.e., undo the visibility/display changes?
Thanks.
Yes. What you're looking for is called AJAX browser history.
There are a few open implementations out there, like RSH as well as plugins/modules for frameworks like jQuery and YUI.
to answer the question of your title (that's what I was looking for)
Using the BACK button to revert to the previous state of the page
and from the link from #reach4thelasers's answer, you have to set up a timer and check again and again the current anchor:
//On load page, init the timer which check if the there are anchor changes each 300 ms
$().ready(function(){
setInterval("checkAnchor()", 300);
});
because there's no Javascript callback triggered when the BACK button is pressed and only the anchor is changed ...
--
by the way, the pattern you're talking about is now known as Single Page Interface !
You need to add an anchor to the URL whenever a change is made
www.site.com/page.html#anchor1
This will allow the browser to maintain the pages in its history. I implemented it in my current site after following this tutorial, which works great and gives you a good understanding of what you need to do:
http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/
Your example in the comments won't work, because it works like this:
Page Loaded
Page Changed, Add Anchor to URL (back button takes you back to back to 1)
Page Changed, Anchor Changed (back button button takes you back to 2)
Page Changed, Anchor Changed (back button button takes you back to 3)
.... and so on and so on..
If there is, it sounds like a pretty evil thing to do from a UX perspective. Why don't you design a "back" button into your application, and use design to make it obvious to the user that they should use your application's back button instead of the browser.
By "use design," I mean make your application look like a self-sufficient user interface inside of the browser, so the user's eye stays within your page, and not up on the browser chrome, when they are looking for controls to interact with your app.
You can do this with anchors, which is how it's done in a lot of flash applications, or other apps that don't go from page to page. Facebook uses this technique pretty liberally. Each time the user clicks on a link that should go in their history, change the anchor on the page.
So say my home page link is:
http://www.mysite.com/#homepage
For the link that works your javascript magic, do this:
My Other Page
This will send the user to http://www.mysite.com/#otherpage where clicking the back button will go back to http://www.mysite.com/#homepage. Then you just have to read the anchors with
window.location.hash
to figure out which page you're supposed to be on.
Take a look to this tutorial based on ItsNat a Java web framework focused on Single Page Interface web sites
Related
Hi I'm wondering if there is a way to give window.history.go(-1) a default back page? If you enter a page directly from another site and someone clicks the back button, I don't want to direct them back to the referring site, I'd rather redirect them back to a search page within my application. I notice on some sites they are somehow reading the previous session, is that an option or no? Thanks
may be try something like this:
Back
I think you might be interested in the window onbeforeunload event.
Have a look at this thread: using onbeforeunload event, url change on selecting stay on this page
Is it possible to have a button on a webpage that will be named 'Back' and do window.history.back() if the user has navigated to the page from another page on your website and otherwise have some other title and be a direct link if the user navigated to your page from another website or went to the page directly.
Google plus on mobile seems to have this behaviour. When you click on a post in your stream then it has a 'back' button on the post page. However, if you go to the post page directly then it has a 'stream' button on the post page.
This seems tricky to implement because you don't have access to the urls in window.history.
Have you any chance of adding an ext lib like BBQ? It's a package used to manage the history behavior in your page.
I have done this before. You can do this with an anchor in the link. The anchor needs to have every get parameter of your application (i.e. application state) stored. Your application should be able to parse the anchor. To intercept the back button look here: stackoverflow.com/questions/136937/is-there-a-way-to-catch-the-back-button-event-in-javascript.
#benmmurphy I also had the same problem, then I used the following, which worked perfectly for me. You have to paste it on the page, from where you want to go back.
GO BACK
Hope this will help you.
A website contains a "random" link, which loads a url that returns a 307 redirecting to the url we want. It works fine: click it and you load a random page. The problem is that each time you click it, the browser assumes you're loading the same page: so if you're on the homepage, then you follow the random link 5 times, then you press back, you'll be taken all the way back to the homepage, with no way to find the random pages you were just looking at. I want to modify this behavior so that users can access previous random pages via the back and forward buttons.
I don't own the website, so I can't just change the redirect code.
Here's what I've tried, all of which has failed.
Predicting what would be redirected to. While somewhat possible, there would be no way to avoid failure in up to .1% of clicks, and it would react very poorly to unexpected events, like a page that's published a day late, let alone a sit structure change.
Loading the 307 page via ajax. The request stops at readystate == 2 and I can't access the location header.
Cancel the click event and instead set location.href = random_link.href. This has no effect - the new page still doesn't go into history.
Have the new page call history.pushState. This successfully adds the page to history, but I can't find a way to distinguish between new pages and ones being opened via the back button, so the history quickly becomes very corrupted.
Keeping my own history in localStorage. As above, I can't tell when the back button is being used.
I'm working on a solution that I'm pretty sure will work, involving loading the page in an iframe over the existing page and using a background process and messaging to work around the fact that content injections from chrome extensions can't access window.parent from within iframes. And using the history API to reflect the current iframe's URL in the address bar, and get the back and forwards buttons to apply to the current iframe where appropriate.
While I'm pretty sure the last solution can be made to work, it's a hideously complex and heavyweight approach to what seems like a simple problem. So I thought I'd ask you guys before I continue: any other ideas?
Have you tried storing the locations in localStorage, then hi-jacking the back button ?
I am sure you know how localStorage works, for hi-jacking the back button you can refer to this : Is there a way to catch the back button event in javascript?
T.
Most resources suggest using onclick handler with trackEvent() for tracking outgoing links. BUT this way does not work with all navigation methods! It won’t work if you click with middle button (except Chrome) or control-click (except Chrome and FF) to open new tab, if you right-click and select new tab or window from context menu or if you drag link to another tab. Is such cases onclick is simply not called. You can check it with very simple link:
GO
Putting JavaScript in href attribute breaks the link in all cases when new tab or window is opened.
Putting onclick in span that looks like a link, will not allow users to decide if they want to open in new tab or not.
Finally, going through a redirect page, which tracks outgoing event, causes problems with back navigation – when users try to go back, they get back to the redirect page and then JS again redirects to the destination page. They need to click back twice … quickly.
Is there a better way, which would be both accurate and user friendly?
Context menu can't be detected by using JS. So if you want to catch that you need to use the redirect method. To fix the back button problem, redirect using location.replace to remove the tracking page from the back-button history.
I don't know any details about Google Analytics. In general, to track users' external navigation:
<a ping> is made for this purpose. If ping is not available, fall back to changing the links to go through a redirect page. Use a 302 redirect to prevent it from showing up in history; if you can't, try javascript:window.location.replace().
Suppose I have a page open in a browser and I go to my address bar and enter another page. Then I hit the back button to go to my original page. I'd like to write some Javascript code that can detect this scenario and respond to it.
As best I can tell neither the ready event, the onload, nor any inline Javascript on the page itself is re-executed in this scenario. Is there anything else I can do?
Cross-browser support is important here. jQuery based solutions preferred but not required.
Edit for clarity: the navigation I'm assuming is Page A -> Page B -> back to page A where I'm assuming that Page B may or may not be under my control.
You should try to give the user a cookie on both pages, the navigated to page and the page itself, with dates and times and compare see if they're close, or if they show that he's been on one page, been on another, and then redirected.
Another option is to give the user a cookie when he is redirected
In Firefox, you can check for the DomContentLoaded event. For a cross-browser solution, a little more work is required:
http://dean.edwards.name/weblog/2005/09/busted/