Using jquery to animate this (link included)

Question

Hi there,
I'm in the completion stages of a website for a client. Still
some things to
fix (like activating the form) but essentially, this is the
heart of the
site and how it will work.
http://www.vilverset.com/main.php
As you can see by clicking the main navigation, the only
things changing are
2 divs :
DIV ID="bg" (height:490px, width:100%)
This is the div in the background containing the large
background image.
DIV ID="textbox" (height:490px, width:depends on the page)
This is the div with text content and a semi-transparent
white background
(used a png for this so I could retain the opaque white
outline).
Everything else is always the same no matter what page we're
at. I am
currently using PHP includes to include those parts.
I could technically deliver the site as-is once it's
completed, but I keep
imagining nice sliding-door effects that this particular
layout seems to be
crying out for.
What I had in mind :
Each time you click a link...
...the "textbox" div would slide out from view (left to
right)
...a new "bg" div would slide into view over the current one
(right to left)
...a new "textbox" div would slide into view (right to left)
Would this not reek of awesomeness? How difficult would this
be using jquery
libraries/tutorials?
If the caveat would be that I'd have to pre-load all the
content, I don't
mind. As long as it's loading it in the background after
displaying what
needs be displayed on the front landing page (that we see
that landing page
before it finishes loading all the other non-visible divs).
But ideally, it would load the content only once the option
is clicked.

Answer 1

This is a bit different - and a quick example - but it is
100% accessible to
search engines and, more importantly, to assistive readers.
http://www.projectseven.com/testing/customers/mike-noob
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/apm
An Accessible & Elegant Accordion
"Mike" <[email protected]> wrote in message
news:[email protected]...
> Al,
>
> I'm almost dead certain that the .animate function of
jQuery's library
> will do the trick, here. I just can't wrap my brain
around the proper
> syntax.
>
> There would also be overlapping issues... for instance,
if I make panel 2
> slide over panel 1 when clicking the 2nd link, I need to
have panel 1
> slide back over panel 2 when clicking the 1st one again.
>
> This means that once a panel slides into view, whatever
was underneath
> needs to be hidden, then z-indexed over the pane that
just appeared, then
> placed outside the viewport as it awaits the call to
slide back into view.
>
> But how do you do any of that without, at the very
LEAST, triggering a
> horizontal scrollbar? You can't place a div outside the
viewport without
> creating one, can you?
>
> Here's the original link again :
>
http://www.vilverset.com/main.php
>
> Mike
>
> "Al Sparber - PVII" <[email protected]>
wrote in message
> news:[email protected]...
>>
>> "Mike" <[email protected]> wrote in message
>> news:[email protected]...
>>>
>>> Would this not reek of awesomeness? How
difficult would this be using
>>> jquery libraries/tutorials?
>>>
>>> If the caveat would be that I'd have to pre-load
all the content, I
>>> don't mind. As long as it's loading it in the
background after
>>> displaying what needs be displayed on the front
landing page (that we
>>> see that landing page before it finishes loading
all the other
>>> non-visible divs).
>>>
>>> But ideally, it would load the content only once
the option is clicked.
>>
>> This is an interesting question and there are no
simple answers. I'm
>> going to play with some ideas later today and I'll
post back with some
>> solutions you could consider.
>
>