473,605 Members | 2,734 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 3279
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(t imer)
}

timer = setInterval(tic k, 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<gri n>)

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<gri n>)
Sounds good.
Aug 31 '07 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
8896
by: Hemant Shah | last post by:
Folks, I need to move HOME directory of an instance to another directory. What is the best way of doing it? Is changing password file enough? or dies DB2 store this info in it's own config? I am running UDB 8.2 on Linux and AIX. Thanks.
2
13599
by: Wayne Aprato | last post by:
I've read most, if not all, of the posts on moving average and still can't find a simple solution to my problem (if a simple solution exists!) I have a table with 2 fields: Hours and Injuries. I have a query based on this table which shows these 2 fields and calculates a third field: Frequency Rate, based on a formula which uses the Hours and Injuries fields. Is there a simple way of A: using yet another calculated field in the query...
3
3026
by: Just Me | last post by:
If I move the mouse cursor over a control and stop moving I get a MouseHover event. If I then move the cursor while staying within the control and then stop moving I do not get another MouseHover event. To get a Mousehover I must leave and reenter the control. I'd like to get an event each time the cursor stops moving.
0
1403
by: Jeff Waskiewicz | last post by:
Here is what I am trying to accomplish. I have an MDI application on the left side of the client area I have a borderless form that holds a treeveiw for navigation. When an item is selected from the treeview it opens a seperate form. Similar to an MDI Windows Explorer. Now, I want to prevent any for form from being moved into the area occupied by the navigation form. I used the following code do do that... Private Sub...
1
2466
by: =?Utf-8?B?UmljaA==?= | last post by:
In a database search application (vb2005), the user wants to be able to scroll through records using the mousewheel. The data display form contains textboxes for the main data and a datagridview for the detail data for each main record. The form also contains btnBegining, btnPrevious, btnNext, btnEnd. In the btnNext.MouseWheel event I can increment/decrement the main data currencymanager position of the main dataset (depending on...
7
4149
by: bwmiller16 | last post by:
Folks - DB2 V9.2 on SUSE 9 Is there a way other than moving the entire /sqllib/db2dump/ (Default database path (DFTDBPATH) = /home/db2inst1 to move just STMMLOG out of there to another location away from where it is? I'd like to either 1). Move STMMLOG without moving db2diag 2). Prohibit the making of the stmm.1.log file(s).
4
1367
by: =?Utf-8?B?R1Q=?= | last post by:
I have a Form which has a great number of events. I thought I would organize the project by moving some of the code into multiple '.cs' files (since the Form.cs was getting huge). When I move them, it seems that Visual Studio can no longer find them when I open a Button object (for example) and double click on the previously created event. On top of this, Visual Studio creates a new event that is blank. I know the program can 'see' my moved...
0
1267
by: xpnet | last post by:
Hi, I am using Mutliview control, and want to move a user control from one view to another view based on user selection. I can do this by placing a "Placeholder" control in each views. Based on the user selection, remove the control from the placeholder and add to annother placeholder as: Me.divViewHome.Controls.Remove(Me.DiySearchSide1) Me.divViewResults.Controls.Add(Me.DiySearchSide1) For the first time when moving the usercontrol to...
15
2427
by: mcjason | last post by:
I saw something interesting about a grid pair puzzle problem that it looks like a machine when you find each that work out the way it does and say with all the others that work out the way they do together overlapping common pieces but say connected each working out as connected, but together as connected it's connected with the others connected. a whole machine where connected together is a condition of the machine together as...
5
2696
by: adarshyam | last post by:
Hi friends, I have an interesting problem in vb.net. And I am struggling to get a solution for this..m trying for the past 3days.. Itís to calculate moving average for the inputs given by the user.. The following are the steps.. 1, get 2user inputs in textbox(1st input is number is periods, 2nd is moving range) 2, after getting both the user inputs, the user will click on an input button which must dynamically generate rows for the number...
0
8001
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, weíll explore What is ONU, What Is Router, ONU & Routerís main usage, and What is the difference between ONU and Router. Letís take a closer look ! Part I. Meaning of...
0
7934
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
8069
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
5886
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Duprť who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5445
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
3912
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
3958
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2438
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1537
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.