[JS] Javascript/jQuery fadetoblack-fadetowhite help

Discussion in 'Scripts, 3rd Party Apps, and Programming' started by leafypiggy, Jul 9, 2009.

  1. leafypiggy

    leafypiggy Manager of Pens and Office Supplies Staff Member

    Messages:
    3,819
    Likes Received:
    162
    Trophy Points:
    63
    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/
     
  2. misson

    misson Community Paragon Community Support

    Messages:
    2,572
    Likes Received:
    72
    Trophy Points:
    48
    Here's a basic example. I'll set up a live test page and post a link later.
    Code:
    <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:
    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:
    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.
     
    Last edited: Jul 9, 2009

Share This Page