Expanding a html page using javascript - javascript

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).

Related

Page to Page Transition

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.

Force an infinite scroll page to load several pages

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?

Reload/Refresh IFrame without have a white flash?

I have a iFrame which loads many different pages, the initial load is always fine as i hide the IFrame until content is loaded then only do i display the IFrame.
My problem is now i have some pages which need to postback to grab information out the database dependent on what a user has on that page.
When this happens i get a white page while content is loaded. I cant hide the page as this would look worse then having a white loading page, i just need it to sit still with no flash while its drop down box populates.
I'm up for any solution using JS JQ or C# and my project is in ASP.
How i call my page refresh:
window.location.reload(true);
I call the refresh from inside the iFrame (Name: IFrameDam)
I am able to hid my IFrame from with in its self if this sparks any idea's:
$('#IFrameDam', window.parent.document).hide();
You can use Ajax request instead iframe and update the contents inside iframe parent div with id #IFrameDam and set the timer to resend ajax request and update without white screen. This behavior is same for almost any browser whereas iframe loads a whole new page inside current page leaving a blank space when not loaded.
here's how you can achieve this using ajax and jquery.
Just put iframe src path after "request_page" and refresh time after "time" variables.
Follow this link: http://jsbin.com/EYIKAnAb/1/edit?js

Is it possible to place a loader image inside an iframe while its loading its content?

I'm working inside a Facebook tab iframe content page and since it takes a few seconds to appears the iframe content of my site I'm wondering If I can place a loading gif inside the iframe to show first (maybe as a body background image) while its loading the rest of the content.
I see that the iframe ussually cames with all the images. So I'm wondering If there's any way to do this or the content of the iframe loads and is displayed all together.
I tried the image as body background and it didn't work. Both came together.
You can't modify the contents of an iframe that comes from a different domain.
But, you can use absolute positioning from your main window to put an image over the top of the embedded iframe which can probably accomplish what you want without a lot of complication or change of your main page design.
Here's an example: http://jsfiddle.net/jfriend00/DajS4
If your code is in the iframe and you want something displayed before your page loads into the iframe and you don't control the parent, then there is nothing to do. You can't do anything dynamically until your code is loaded and by then the page will already be starting to show.
All you can do is to make something on your page load very, very quickly (perhaps like a small image in the first tag of the page) that should be one of the first things to show and then when your page successfully finishes loading, you would hide that small image. Other than making something show quickly, you can't do anything until you load so you can't show anything before you load. It would have to be the parent window that created you that did something earlier.
Umm,
I understand what you are trying to achieve. but the only way i know to achieve this would be to use ajax to load all your content.
Set the ajax function to run on page load. And in the body of the page place one of those gif loaders..
hope u understand what im trying to say!
You can use AJAX to load your page.
<div id="loading">loading..</div>
<div id="content" style="display:none"></div>
$(function() {
$('#content').load('http://url', function() {
$('#loading').hide();
$(this).show();
}
});
note: the location of all your javascript should be at the bottom of the page to improve load speed.

How does the GMail "Loading..." banner work?

I am trying to replicate a feature of GMail in my own application.
When changing folders in GMail, the display will stay on screen and a small loading banner will appear on the top of the site.
This is desirable, since it prevents the screen from going all white and disturbing the users workflow on postback.
I have tried to disassemble this using Firebug, and I feel that I'm getting close.
The GMail site consists of a 100% sized Iframe which contains the entire interface.
After this frame is a div that contains the loading banner. The div is invisible and is placed behind the Iframe.
What script gets executed that move the banner in front of the Iframe?
Thank you,
Martin Wiboe
GMail is built entirely using AJAX; there are no regular postbacks at all.
It creates a <div> before sending the AJAX request asking for the contents of the folder, then hides the <div> when it receives a reply.
You can easily duplicate it using jQuery.
You can accomplish what you are trying to do with AJAX and a callback handler. On the AJAX post, you will make the loading div visible. On a successful postback, you will hide it.

Categories