[JS] Javascript/jQuery fadetoblack-fadetowhite help

[leafypiggy]

Hey guys, I suck at javascript, just plain horrible at it.

I'm working on a client's site, and he want's an effect that I can't get.

All the links for the page are contained in the homepage using XMLHTTPRequest in ajax, I got that figured out, but I'm trying to make it so that the content area fades out to a low opacity, shows a loading bar image (which I have) and then fades to normal opacity.

Any help would be appreciated. 500 credits if you make me something that works, and is what I and the client are looking for.

The site: http://24.61.155.176/josepharm/

[misson]

Here's a basic example. I'll set up a live test page and post a link later.

<div>
  <div id="content">...</div>
  <div id="loading"><div class="vcenter"><img src="/images/loading" alt="loading..."/></div></div>
</div>
<script type="text/javascript">
$('#loading')[0].fadeSpeed=500;
function loadContent(url) {
    url =url.replace(/.*(#|\?page=)/, contentBase);
    var loading = $('#loading');

    var start = new Date;
    loading.fadeIn(loading[0].fadeSpeed);
    $('#content').load(url, function() { 
            loading.stop(true, true);
            loading.fadeOut(Math.min(loading[0].fadeSpeed, (new Date) - start)); 
        });

    return false;
}
</script>

Keep in mind that AJAX isn't always appropriate for a web page:

• Where and when to use Ajax in your applications
• When to use AJAX programming?
• Google: when to use ajax

A big issue with AJAX is that it won't work with user agents that don't support JS (e.g. Lynx, search engine spiders, screen readers and browsers w/ js disabled). It also breaks browser history and bookmarking.

Note the above always displays the "loading" panel, even if the content loads very quickly. It's possible to have other behaviors (such as canceling the fadein if the content loads quickly), but it's a little trickier.


Edit: Live loading fadein/out page is now available. To simulate network load, the "About" page has a 3 second delay.

"Bio" and "About me" are really the same thing. Having both pages seems terribly self-involved. You should drop one of them.

Examine the source to see one way to achieve graceful degradation when JS isn't supported or enabled. History and bookmarking aren't supported. The one thing you won't see in the source is the following bit of PHP:

<div id="main">
    <div id="content"><?php 
function setContent($page) {
    if (file_exists($url="content/${page}.html")) {
        include($url);
        throw new Exception();
    }
}
try {
    if (isset($_REQUEST['page'])) {
        setContent($_REQUEST['page']);
    } 
    if (isset($_SERVER['PATH_INFO'])) {
        $url=explode('/', $_SERVER['PATH_INFO']);
        setContent($url[0]);
    }
    setContent('welcome');
} catch (Exception $e) {
}
?>
    <!--#content--></div>
<!--#main--></div>

Edit 2: There's now an alternate version supporting bookmarking and history. It relies on a patched version of jQuery history plugin. The above implementation of loadContent has been changed to reflect the new page.

If you want to download everything to disect and play with, get the zipped source archive.