Page to Page Transition - javascript

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.

Related

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?

Expanding a html page using 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).

Stay on Current page UNTIL the Next page has FULLY loaded

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/

Multiple iFrames: block parent page until user finishes his job with the current frame

My requirement is to show 3 third party pages using iFrames. I need to show these 3 third party pages, 1st one on click of image, 2nd one on click of anchor where these two are present in the content page holder body portion and 3rd one on the click of anchor in Header party of the page which is in master.
Right now, i'm using 3 iFrames for each one of them.
My Problem is when still one iFrame is open, I'm able to click on the other iFrames which should not be ideally. I mean if one frame is open, the parent page should not be accessible to the user until he finishes save or close the iFrame. Even i tried jQuery blockUI, but the loading message is appearing on the iFrame which is unpleasant for the user to access the iFrame.
1) I need clarification how to achieve the functionality, only the iFrame which is opened at present is accessible and make the parent page unaccessible until user completes his action on the iFrame opened currently. Blocking the parent page till user finishes his job with opened iFrame.
parent.window.$.blockUI(); //but it is making the iFrame visibility hided by the msg
Please provide me some feasible solution to achieve the above functionality.
2) can i use single iFrame and dynamically change the src attribute using javascript? or maintain separate iFrames individually to avoid dilemma in using frame ID's.
Please advice me, i achieved all the functionality with frame except these two things. If these are achieved then the functionality will be perfect without any hassles for the user to access the UI.
jQuery dialog option modal=true solved my first problem. As of now i kept individual frames for the 2nd one..

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.

Categories