moving one box over another

[Cartoper]

I would like to design a web page as follows:

There is a box (box A) with some things in it that the user can click
on. When an item is clicked, another box (box B) moves in from the
right side of box A. I don't want box B to exist outside of A, simply
start on the right side and then cover up all of B.

I am going to be targetting Firefox 2.x only, well if it works in IE7
and Safari 3, great, but the kiosk is going to be running Firefox, so
I would like to use the latest techniques. I get the impression that
what I want to do might be acheivable with CSS2 and limited
JavaScript, I could be wrong.

If this is a JavaScript animation, I am sure I could figure out the
details, I would like the general idea of how best to do it, though.
Do you simply loop through moving it one pixel at a time with a
sleep? Also, how to I keep box B contained within box A?

Cartoper

[Ben C]

On 2007-08-31, Cartoper <ca******@gmail.comwrote:

I would like to design a web page as follows:

There is a box (box A) with some things in it that the user can click
on. When an item is clicked, another box (box B) moves in from the
right side of box A. I don't want box B to exist outside of A, simply
start on the right side and then cover up all of B.

I am going to be targetting Firefox 2.x only, well if it works in IE7
and Safari 3, great, but the kiosk is going to be running Firefox, so
I would like to use the latest techniques.

I get the impression that
what I want to do might be acheivable with CSS2 and limited
JavaScript, I could be wrong.

Not wrong.

If this is a JavaScript animation, I am sure I could figure out the
details, I would like the general idea of how best to do it, though.
Do you simply loop through moving it one pixel at a time with a
sleep?

There's no sleep in JavaScript. Instead you use setInterval, which
causes a function to be called periodically. In the function you update
the position of the div you're moving (by setting style.left for
example).

You can achieve the same result with setTimeout and keep resetting it,
but setInterval is much better.

Something like this:

var timer;

function tick()
{
// Change boxB's style.left to what it was before -5px until it gets
// to zero. When it has reached 0, clear the timer with a call to
// clearInterval(timer)
}

timer = setInterval(tick, 32);

Also, how to I keep box B contained within box A?

You can give A overflow: hidden, which I think is what you must mean
here since you want box B to behave like a sliding door that appears
from nowhere?

[Cartoper]

On Aug 31, 3:19 am, Ben C <[e-mail]:

Also, how to I keep box B contained within box A?

You can give A overflow: hidden, which I think is what you must mean
here since you want box B to behave like a sliding door that appears
from nowhere?

Can you give me a little more detail on this? Would I define both
div's next to each other or would I define B in side of A? I do plan
to turn this into an ajax page where the user can keep doing this to
drill down into a menuing system. (Think iPod menu system, fore that
is the insperation<grin>)

Cartoper

[Ben C]

On 2007-08-31, Cartoper <ca******@gmail.comwrote:

On Aug 31, 3:19 am, Ben C <[e-mail]:

Also, how to I keep box B contained within box A?

You can give A overflow: hidden, which I think is what you must mean
here since you want box B to behave like a sliding door that appears
from nowhere?

Can you give me a little more detail on this? Would I define both
div's next to each other or would I define B in side of A?

I was assuming B was inside A. But you can do it how you like.

I do plan to turn this into an ajax page where the user can keep doing
this to drill down into a menuing system. (Think iPod menu system,
fore that is the insperation<grin>)

Sounds good.