We Keep Coding

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.

Layout breaks while page loading

I am using the a slider to display some WordPress posts. When I open the page, it hangs for some seconds (time varies) during that time, the layout breaks (for example all posts in slider become visible instead of first post), but as soon the page loads every thing gets back to normal.
I think this is because the jQuery code loads late. Is there anything I can do about that?
I'm currenly using this:
jQuery(document).ready(function() {
jQuery("#foo1").carouFredSel();
});
Also how can I check with the Firebug that what is causing this? (which resource is taking time to load), because it happens so quickly that I don't get time to see on Firebug.

you can hide it and make its display:none . till it loads then show it
<script>
jQuery(document).ready(function() {
jQuery("#foo1").carouFredSel();
jQuery("#foo1").show();
});
</script>
<div id="foo1" style="display:none"></div>

Firebug has a net panel that will allow you to view requests/responses made and received by the browser.
I'm assuming that it is most likely not jQuery. After you visit the site a few times it should be in your cache.

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.

Preloading page between two asp.net pages

I posed a question that related where I could display "Page loading" in asp.net page using jQuery. But, I had no luck.
So, say I have page1 and it navigates to page2 and page2 doesn't some heavy data access. Is there any way I could show the "preloading" page while the page2 is finished.
I want to navigate from Page1 -> "Preload" -> Page2(once page2 is completed).
I want to know if this is possible using Javascript in the code behind.
Thanks.

The way you would typically do this is have a page that shows the message and uses AJAX, in my example using jQuery, to load the other page onto the current page.
<body>
<div id="content">
Page loading
</div>
<script type="text/javascript">
$(function() {
$('#content').load('/url/to/other/page');
});
</script>
</body>
I've omitted loading jQuery itself.
Note: you could do this on a single page by having it generate different content based on some query parameter. You don't need to actually have a separate "loading" page -- though you could probably make that work for several different pages as well.

If using JavaScript is OK, redirect the user to the Preload page, and then use JavaScript to take the user to Page2. This will make the Preload page stay visible while Page2 is loading.
(Also, "JavaScript in the codebehind"? Don't tell me you're using JScript.NET or something as your server side language)

No matter what you do, to begin loading Page2 you'll have to navigate away from Page1 (unless you get complicated and wrap your pages in another container on a single page and navigate within your container).
Otherwise the default content for Page2 should be a "Preloading" message that gets taken away once the document has finished loading its content.

Is a possible solution to have an almost empty page with a few placeholder divs in the right places containing a loading image. Then run web service calls to populate each placeholder in jquery/javascript?

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.