471,583 Members | 1,457 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,583 software developers and data experts.

moving one box over another

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

Aug 31 '07 #1
3 3200
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?
Aug 31 '07 #2
On Aug 31, 3:19 am, Ben C <spams...@spam.eggswrote:
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

Aug 31 '07 #3
On 2007-08-31, Cartoper <ca******@gmail.comwrote:
On Aug 31, 3:19 am, Ben C <spams...@spam.eggswrote:
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.
Aug 31 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by Hemant Shah | last post: by
1 post views Thread by =?Utf-8?B?UmljaA==?= | last post: by
7 posts views Thread by bwmiller16 | last post: by
4 posts views Thread by =?Utf-8?B?R1Q=?= | last post: by
15 posts views Thread by mcjason | last post: by
reply views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by lumer26 | last post: by
reply views Thread by lumer26 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.