I have new pages loaded via infinite scroll on my site. Each time a new page is loaded I update the url using HTML5 pushstate API:
if(history.pushState) {
history.pushState(null, null, '/page:' + current_page);
}
My urls looks like this:
http://mysite.com.com/page:1
http://mysite.com.com/page:2
http://mysite.com.com/page:3
and so on...
When the user clicks on an item in the listings (for example on page 2) and then clicks the back button he is taken back to:
http://mysite.com.com/page:2
But instead of being at the top of the page, he is at the portion from which he clicked. Since page:2 is now loaded at the very top, the part where he is loads anew
page 3 and he is looking at a post from that page instead.
Is there a way to make the user go back to the top of the page each time the back button is clicked?
I tried using anchor tags and javascript scroll on page load but neither is viable since there are several jumps before the user is taken to the top.
The best example of backbutton working with infinite scroll that I have seen is http://imgur.com but I can't figure out how they do it.
There is a library called infinite-ajax-scroll on github that seems to do what you are looking for. You can initialize it using the history option, which will update the hash of the url as you scroll the page. The only issue is that you'll have to change the way you load your data to work with the library.
jQuery.ias({
....
history:true,
....
});
You could also check out this blog post on tumbledry.org, which explains something closer to what you are trying to do, but I don't think its implemented as well.
Related
I have a situation where you scroll down a page to a certain button that clicked will lead to a new page (in the same window).
If inside the new page I implement another button that via JS returns to the starting page using history.back() it has the benefit that the user lands on the exact (scrolled down) point where he clicked the first button.
New situation:
I’d love to keep this benefit, but I can’t use history.back() instead I have to use the src of the original page. Doing so by f.e. using window.location.href = "my_starting_url"; it goes back to the original page but at the top of the page. Why? Is there a simple method to achieve the same behavior as history.back() i.e. reopening the page at the same (cached) point?
Did I explain myself sufficiently?
Thank you so much in advance!
The way I see it the best option would be the History API ( http://diveintohtml5.info/history.html ): This will allow you to fetch a new page and store the scroll position of the current one, once the user clicks on "back" you can load the previous page and set the scroll position exactly where it was.
I was curious about this since a long time ago. When we click on any link in the page, like security page or even a person's name or inbox, the url changes but the navigation bar remains as it is. It does not reload but the rest of the page does, I know things like this can be done using Jquery and by changing the elements of display but how does the url change too!
It is a combination of AJAX and the history.pushState() method which allows you to update the URL and manipulate the browser's history:
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#The_pushState()_method
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
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.
Is there anyway to force a jQm page to reload once changePage is complete?
I have a number of pages dynamically loaded into an array. All of the pages that are being loaded are a part of a list, for example "20 mobile apps of 2011". Users will need to have the ability to swipe left and right to navigate the pages.
I've added the current code here: http://jsfiddle.net/cncpts/qMe6Z/2/
Notice how the URL's are being pulled from the array. From this i'm able to pull the next URL and the previous URL but I am only able to navigate one page forward and one back.
You can test the page here by clicking then swiping the mouse left or right: http://www.cncpts.me/complex/swipe/index.php
Any ideas on how to get the URL's to refresh while maintaining the native JQM transitions.
Why don't you use the JQM pagaintion plugin? Should be exactly what you are looking for.
If you want to change the URL you will have to set the changehash option to true in order for it to change
$.mobile.changePage(next,{
changeHash:true,
reloadPage:true,
dataUrl:next
});
Here is the link to the demo