Ajax Open, Close Effect

Question

Can someone tell me how to do an animation like this:

http://dageniusmarketer.com/DigitalWonderland/Animation

inside my current site, which is

dageniusmarketer.com/DigitalWonderland/

I would like for the window where you see all the text content, to open and close as you go thru the navigation links to open up a new page (close the old content, open the new content). Im not a programmer by trade, just a newbie, who copied in some ajax code for the current window setup. All the current window code is in the index.html. I dont know what I would need to add to my current code though to make it work in the way that i am asking. Can anyone point me in the right direction?

Thanks

Answer 1

Give scriptaculous a try. Here are some demos. Effect.Grow and Effect.Shrink seem to fit your needs. Note you won't be doing this with a window, more likely a DIV.

Answer 2

I see in the source of your website that you are using some really old-school looking Javascript to get the AJAX effect working. Keeping your current request in mind with the fact you've already got some advanced Javascript needs on your website, I recommend you check out jQuery - you could then do something like this (simplified, of course, but perhaps it is enough to get you on your way):

<ul id='menu'>
    <li><a href="pages/Home.html" class="home"><span>Home</span></a></li>
    <li><a href="pages/About.html" class="about"><span>About</span></a></li>
    <li><a href="pages/Services.html" class="services"><span>Services</span></a></li>
    <li><a href="pages/Portfolio.html" class="portfolio"><span>Portfolio</span></a></li>
    <li><a href="pages/Contact.html" class="contact"><span>Contact</span></a></li>
</ul>

And then let you replace the montrocity you have for Javascript with this:

$(function() {
    $('a', '#menu').click(function() { // when someone clicks on a menu link...
        // get the page contained in the links href attribute....
        $.get($(this).attr('href'), function(html) {
            // once the content is here, animate the content div...
            $('#MainContent').animate({
                height: '20px' // make the div smaller....
            }, 'fast', function() {
                // when it is all the way down, update the div with the new
                // html, and animate it back up....
                $(this).html(html).animate({
                    height: 'auto'
                }, 'fast');
            });
        });
        return false;
    });
});

This will make your website:

1. More cross-browser compatible, as jQuery abstracts any incompatibilities out.
2. More standards/best-practices compliant (ie, no inline Javascript)
3. More accessible to people with Javascript disabled. As it is right now if I don't have Javascript enabled (~5% of people) and I click on any of your menu links nothing will happen. With this solution at the very least the page content will show up, although you could do some server-side code to make it so that the whole page shows if the request is not coming from Javascript.