I'll show you a use case with Angular & ng-infinite.
I've scrolled for 2 pages, so I've pages 1, 2 and 3 loaded in my SPA.
The url reflects the page navigation, so page=3.
Now I want to refresh the page: i'd like to have in my page only items of page=3.
The problem is that the browser remembers the previous scroll position of the page reloaded.
So this is what happens: items of page=3 are correctly loaded (OK), browser remember scroll position, it goes to that position (bottom page) and this triggers nginfinite -> ajax call for the page=4 (NOT OK).
If I were on the top of the page before refreshing the page, refreshing the page wouldn't trigger nginfinite.
So it depends from the scroll position of the page before it has been relaoded.
I tried with window.scroll(0,-500000) with no success.
Any suggestions?
I think it seems like you need some browser persistence to help you out on this one.
When you refresh the page you lose everything you know about the app before the reload and so you cannot make any difference out of normal first time behaviour and undesirable reload behaviour.
Put your current Page number into localStorage and check localStorage when your app start up after reloading.
Related
The main achievement:
Load previous pages when going back from the detail product page to category/shop archive.
What I have done:
I have a WordPress/WooCommerce website where I have implemented lazy loading over shop/category pages through AJAX. Also, once the next page is loaded, the application updates the browser's URL with the pushState() method.
Case study:
Imagine you visit example.com/shop, and you scroll down. When you reach the footer, the next page is lazy loaded through AJAX and the browser's URL updates to example.com/shop/page/2. Once on page number two, you click on a product (example.com/product/lorem-ipsum), read the details, and see the pictures. Then you decide to go back by clicking the browser's back button. In that scenario, now you are back to the page example.com/shop/page/2, but the problem is that page one does not load on top of page two, so only the products of page two are showing. Once on page number two, can I automatically load the previous page/pages above the current page?
Real example:
If you visit the Nike website, you will see what I would like to achieve on my website. Please, load multiple pages scrolling down. Once done, click on a product and go back by clicking the browser's back button. Once the page is loaded again, you will appear in the exact place where you were before visiting the detail page, and you will see how the previous pages have been loaded on top of the product that has the focus (just the one you clicked).
What I have tried:
I have searched over the internet, and I haven't found anything. Maybe I do not know what to search. I have read that the window popstate event is fired when you click the back/forward button. I have tried to use this event to run some tests, but I have failed. I'm lost :(
Can you help me, please? Thanks in advance.
The issue I am having is when I am navigating between pages from the main menu page. If I navigate to 2-3 pages too quickly, the new page appears for about half a second before the page shifts back to the previous page then about half a second later it finally goes back to the page referenced in $.mobile.changePage(); For instance, from the menu page, click on the link to go to page 1, then really fast click on the button to go back to the menu page. After a few times of clicking quickly, page 1 will turn into the menu for half a second, turn back into page 1 for half a second then finally reload the menu page. I realize that in the real world most users won't navigate like this but I can't have a bug like this present as it can cause problems with loading form data. Would that be causing the issue?
I have added AJAX to a client's site to enable some simple animation of page transitions. So if we navigate to his homepage (with js enabled) at firedogcreative.com and then navigate to his edit page, and then to one of his work pages; we end up with a history something like this:
firedogcreative.com --> firedogcreative.com/#edit --> firedogcreative.com/#example1
Ajax takes care of loading the content of each of those pages in, it updates the hash in the URL bar in each case, and all works exactly as planned.
When a user clicks the back button, though, I'm not sure I understand what is happening. If they are at #example1 and hit the browser's back button, the URL bar updates to firedogcreative.com/#edit, but the page content doesn't change. If the user then reloads the page, though, it correctly reloads to #edit.
I tried adding this, which I thought would cause the pages not to cache and thus each back button call would reload the page, but it didn't seem to have an effect:
window.onbeforeunload = function () {
// stuff do do before the window is unloaded here.
};
If that worked, it would be a passable solution. The page would only ever ACTUALLY reload when the user uses the forward/back buttons, which would be fine.
So my question is, what is going on with the back button? Shouldn't onbeforeunload be causing the backbutton to reload based on the stored URL?
So my question is, what is going on with the back button?
It is going back to the previous URL.
Since changing the fragment identifier to track application state is a hack, nothing else happens.
Shouldn't onbeforeunload be causing the backbutton to reload based on the stored URL?
No. You are navigating back within the same document, so it isn't being unloaded.
You need to monitor the hashchange event and change the application state with your own JS.
Alternatively, switch to using pushState and watch the popstate event.
I want to know the visible vertical section of a webpage as early as possible while loading the page. Often, this goes from 0 to $(window).height(). But if the user has already scrolled, and then reloads the page or comes back to it, many browsers will display the page at the previous scroll position.
Is there a way to determine the scroll position remembered by the browser before the complete page is loaded? $(window).scrollTop() does only work after loading the complete page (tested in Firefox20.0).
I would be happy with a solution that works at least in the common and good browsers.
You need to set cookies.Create cookie with variable name of ur choice.Before loading the page set the cookie value.While loading the page take value from the cookie and give it as a parameter to scrooltop function.
I'm creating a infinitely scrolled page that recursively loads and append the next page's content into the current page. I think the browsing experience can be great and immersive but the current method is not without usability drawbacks.
Incomplete progressive enhancement. It is always good to support the back button and provide deep linking when using Ajax. The current implementations of infinite scroll does not support this. There is no way a state can be bookmarked.
Some ideas on improving the UX of infinite scroll. Need opinion.
Change the URL hash with each load, e.g. /!#/2 -> /!#/3
Clicking the back button should scroll the page upwards. Clicking forward button should scroll it down.
Accessing a deep link should behave like it was before Ajax. Going to and also starting at page 3 should show only page 3 content and not page 2 and 1, since the user is not asking for them.
There should still be a way for him go to page 2 and 1, like if it was regular pagination. Since page 3 is loaded with scrollTop at 0, the scroll up event is not useful. For this we might still need a clickable link.
We need to check if the requested page number is greater than the current because we should not loaded page 2's content at the end of page 3.
What do you guys think?
Interesting question. I would suggest changing the URL hash in the form of #!/from/123/to/456, and increase the to ids as page loads.
Whether you are using hash or History API rewrite to modify URL, in UX sense, URL always represent the location of current content. For example, user will expect a bookmark, hitting reload, or copying the URL to other computer and click Go, will return the same page.
The only way for your infinite scrolling page to complete the logic of URL is the URL hash I suggested above. Otherwise just leave it; Twitter doesn't update URL hash on their home page.