There's a page that has infinite scroll and it loads the next page when you scroll to the bottom of the current page, like twitter and facebook.
I want to force the page to load several pages instead of just one every time I reach the bottom.
I see in chrome's console that something new pops up into the elements and then disappear almost immediately. I managed to capture some of that element before it disappeared: <iframe class="hidden_elem" name="transport_frame_9" src="/ajax/pagelet/...
, The number in transport_frame_9 increases on every load.
Also I tried to look in the <script> tags of the page for clues but couldn't find anything useful.
Is it even possible to invoke this script to load several pages? Or maybe there's a way to fool the page to think I reached the bottom several times? Like setting a some scrolledToBottom property to true?
Related
I have two different pages.
index.html
page2.html
I have a button on index.html which would take us to page2.html,
but its a direct transition. Where as I was looking for a fade in transition to happen when first page switches to second page.
I don't have to come back to first page so we don't need any transition from second to first.
Could anyone please help.
Thank you
There would be three ways to really make this happen. You can't transition from one page to another if the browser is loading the new page in the address bar besides using a fade out and a fade in on the new page. However, there are two other ways to get animation of page loads running. The first of which is completely inadvisable because it uses an iframe and can complicate communication between the frame and the page it's loaded on.
Here are the three algorithms:
Add a fade in animation on the "body" element when the pages first load and make all links on the pages trigger via javascript. When the Javascript navigate function is called, fade the page, and then execute the location change on the animation callback. Since all of the pages have a fadeIn, this would appear that the page is "transitioning".
(inadvisable) - iterate an ID and on each new request, load a hidden iframe above all of the content and give it the incremented ID. also before creating the frame apply an onLoad handler to the frame and make it animate the frame when it's loaded.
Use AJAX to load your content into a container and you can animate it based on when the ajax request starts and gets a response.
I assume you were looking for algorithms, not code samples. Hence the verbiage.
When I scroll down the mouse, more content are loaded in html page. Is there any way that I can expand the whole html page so that all content will be loaded in one go?
window.scrollTo(0,document.body.scrollHeight);
The above code helps me to get the new content of html page but also it redirect me to the bottom of page. Is there any way to stay on top of the page and using scrollto function or any other way to get the whole content in one go?
Mostly there are ajax requests being sent for the content to get loaded, so I don't think there's any way to get all content in one go.
As we scroll down & reach the bottom an ajax request is sent for more content and it repeats. Since, there's no way to combine all ajax requests in one go, unless you have write permission to the webpage, all that can be done is scrolling.
Of course, scroll back up when scrolled down, might appear like a bit of flickering in some browsers(may be not).
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/
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).
I am using an Android WebView to show some HTML content (a String with HTML tags to be precise) generated at runtime. The content has basically an HTML <table ...> showing various stuff and the rows of this table are generated by my program. The HTML content is loaded in my WebView by calling the loadDataWithBaseUrl() method.
Now everytime I generate a new row, I create a new <tr></tr> and modify the HTML string to add the newly created row to the table.
Obviously I have to recall the loadDataWithBaseUrl() method to reload the HTML and show the latest row.
Now there are a few problems here:
First) Every time loadDataWithBaseUrl() is called, the WebView scrolls to the top of the page
Second) I want to scroll the WebView after it is loaded all the way to the bottom of the page so that the latest generated row is always shown.
Now the actual problem:
If I try to call WebView's pageDown(true) method after the page has finished loading, I will get a nasty animation and the user has to wait for the WebView finish scrolling to the bottom of the page.
As there seems to be no way whatsoever to disable this jumping up and down behavior, I resorted to JavaScript and I am scrolling the page all the way to the bottom after the page has loaded (calling a function on window.onload)
Now I am facing another problem! Still there is a flicker caused by the WebView reloading the page which results in scrolling all the way up and the JavaScript function scrolling the page immediately to the bottom.
I have spent countless hours in the past few days and still haven't figured out a way to achieve my desired results. Is there a way to solve this issue? (Workaround/different strategy maybe?) The culprit is obviously the innate behavior of the WebView that scrolls to the top when it finishes loading the page.
Can you try something like this:
if (_webView.getScrollY() + _webView.getHeight() > _webView.getContentHeight())
_webView.scrollTo(0, _webView.getContentHeight() - _webView.getHeight());
There are some threads running on how to make scrolling and page turns e-ink friendly:
http://github.com/aarddict/android/issues/28#issuecomment-3512595
http://www.mobileread.com/forums/showthread.php?p=1929476#post1929476