Facebook has two ways to display somebody's timeline: starting from the very top, showing the full banner, and semi-scrolled, so the banner is cut in half and the profile picture is very close to he floating navigation.
However, the semi-scrolled state seems very natural, there is no delay. The page does not suddenly jump when the content is loaded.
How is this feature implemented in general? Simple window.scroll seems not to be cutting it as it's too slow (has to wait for the content to load to actually have something to scroll) and rather hinders user experience.
You assume in your question the initial loading of the page. That assumption is wrong, because the "page", so to speak, is already loaded.
When you are visiting one facebook page, and then navigate to someone's timeline, it's not a full page refresh in the browser, switching from one page to another. Rather, it's all done via ajax. The "previous" page is not really unloaded by the browser, and the "next" page is loaded via ajax.
As for the url changing, that's a different topic (history pushState).
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.
Good day,
I have taken over a Drupal site that uses iframes for the main content area. I have a minor issue that I'd like to correct.
When a user clicks a link to a page that has a lot of content, then uses the browser's back button to navigate to the previous page, the old content appears, but the iframe's src does not change. I'm using some javascript to set the height of the page dynamically, so when the previous page has less content, there's a huge amount of empty space between the content and the footer.
Here's a diagram that hopefully illustrates what I'm working with:
So upon returning to the previous page, via the browser back button, the footer is pushed way down below because the source has not changed, and therefore the page isn't rendered again.
I've not really used iframes because they aren't great to work with. I'm wondering, is there a way to force the source of the iframe to change when using the browser back button?
I think this question was asked in a similar form before but I didn't get a clear understanding how to implement it properly.
I have a site, which has different pages on their own urls, like '/contact', '/about', '/products'.
What's the technique to put a top bar on the top like this one http://nanobar.jacoborus.codes/?
Here is what I need:
User clicks a link on the page.
JavaScript handles the click, shows the progress bar, starts growing it then passes the event to browser.
Browser starts loading the page. At this moment, page clears and becomes white and blank.
As the progress bar was in some position that is not zero, say, 63%, and now there is no information on the new page about where it was.
So, I can technically run some function on every page, like showGrowingProgressBar(value), but since I don't know where it left, I cannot put it in the same progress state as where it left.
How do I make it look natural, like the user didn't leave the page, but more like an SPA experience?
I guess you want to build an one page web application where things load in the same page without refreshing.
You can use AJAX to do this. you can populate a particular div with the new html without refreshing.
It can be handled more easily using Angular JS. You can define routes for every page and can also have templates for different page, and can load that template when user clicks on the link. It will just replace the container div with new html codes and you can also handle the urls easily.
Turbolinks seems to be what you are looking for. It dynamically loads your pages and shows a loading indicator.
Turbolinks makes navigating your web application faster. Get the performance benefits of a single-page application without the added complexity of a client-side JavaScript framework. Use HTML to render your views on the server side and link to pages as usual. When you follow a link, Turbolinks automatically fetches the page, swaps in its , and merges its , all without incurring the cost of a full page load.
Your approach is:
User clicks a link on the page.
JavaScript handles the click, shows the progress bar, starts growing it then passes the event to browser.
Browser starts loading the page. At this moment, page clears and becomes white and blank.
As the progress bar was in some position that is not zero, say, 63%, and now there is no information on the new page about where it was
Your approach should be:
User clicks a link on the page.
JavaScript handles the click, browser starts loading the page. At this moment, page clears and becomes white and blank.
New page shows the progress bar, starts growing it then passes the event to browser. The growth can be picturized by the no. of API call completed divided by total no. of api calls, required for that page.
How would one go about staying on the CURRENT page until the NEXT page is fully loaded.
I've experimented with stuff like making the body
<body style='display: none'>
And then displaying it with Jquery upon full load but that's not what I'm looking for.
I would like for the user to stay on the current page (probably display a loader graphic BUT keeping the content of the current page - no blank pages etc) while the next loads and then.... BAM you pop the full page for display. Otherwise the page jumps around as it loads.
all tutorials or plugins do either the above or some like http://github.hubspot.com/pace/docs/welcome/ show a loading bar on the NEXT page while it's being fully loaded... but this still lets you see the elements jump around.
YOUTUBE has this (same as pace above) BUT it stays on the CURRENT page, shows the loader and then moves on to the next whereas pace goes to the next page and then shows a loader while the rest of the page gets loaded.
I hope I am making sense.
Thank you.
you need to use AJAX to load the page.
I think this is a good tutorial on how to do it: http://tutorialzine.com/2009/09/simple-ajax-website-jquery/
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.