Moving layers and control speed

Fabri

I have to move 2 layers (one from up to center and one from bottom to
center) and I found this way:

<div id="up" style="position:absolute;left:10px;top:-20px">Up</div>
<div id="down" style="position:absolute;left:10px;top:200px">Down </div>

function movediv(){
var u = document.getElementById("up")
var d = document.getElementById("down")
u.style.top = "100px";
d.style.top = "100px";
}

It doesn' work...because:

1) They don't move at "the same time"...I would like to obtain
simultaneous move.

2) I can't control speed so moving is invisible!

Any help much appreciated.

Best Regards.

--
Fabri
(Lattepiù, chi può darti di più?)

Jul 23 '05 #1

Subscribe Post Reply

1735

Paul R

Here is a quick version to play with.

The important thing is to use [window].setInterval() to move the div a
short distance frequently. It's simplest to save status information for
each DIV in a separate object, which I've called moveableDiv.

movediv() now calls moveabit() every 5 milliseconds, which bumps the div
up or down a pixel. Enjoy!

<html><head>
<script language="JavaScript">
function moveableDiv(name, startpoint)
{
this.obj = document.getElementById(name);
this.whereAmI = startpoint;
this.timer = 0;
this.movecount = 0;
}

var md = new Array(2);

function movediv()
{
md[0] = new moveableDiv("up", -20);
md[1] = new moveableDiv("down", 200);

md[0].timer = setInterval("moveabit(md[0], 1, 200)", 5);
md[1].timer = setInterval("moveabit(md[1], -1, 200)", 5);
}

function moveabit(which, howmuch, howmanytimes)
{
if(which.movecount++ == howmanytimes)
{
clearInterval(which.timer);
return;
}

which.whereAmI += howmuch;

if(which.obj.style)
which.obj.style.top = which.whereAmI + "px";
else
which.obj.setAttribute("style", "top: " + which.whereAmI + "px");
}
</script>
<style>div {position:absolute;left:100px;}</style>
</head>
<body>
<div id="up" style="top:-20px">Up</div>
<div id="down" style="top:200px">Down</div>
<a href="javascript:void(0)" onclick="movediv()">click</a>
</body>

Jul 23 '05 #2

Fabri

AWESOME!

I'll look into your code :-))

Can I ask you what is it href="javascript:void(0)" ??

Great job Paul.

--
Fabri
(Lattepiù, chi può darti di più?)

Jul 23 '05 #3

Paul R

Fabri wrote:

AWESOME!

I'll look into your code :-))

Can I ask you what is it href="javascript:void(0)" ??

Great job Paul.

It's a convenient way of stopping a hyperlink fetching another page or
reloading the current one. In JavaScript, void(x) means ignore x's
return value (if any). As an alternative, I could have written

<a href="javascript:void(movediv())">

and skipped the onclick altogether; it's a matter of style.

Cheers.

Jul 23 '05 #4

Fabri

Paul R wrote:
[CUT]

:-)

Paul...isn't it possible to modify speed in your script? nope eh?
--
Fabri
(Lattepiù, chi può darti di più?)

Jul 23 '05 #5

Paul R

Fabri wrote:

Paul R wrote:
[CUT]

:-)

Paul...isn't it possible to modify speed in your script? nope eh?

You can't go faster than 1 move per millisecond, but you can go a bigger
distance with each move:

setInterval("moveabit(md[0], 50, 20)", 5);

where 50 is 50px.

Jul 23 '05 #6

Grant Wagner

"Paul R" <no*********@email.address> wrote in message
news:2T**************@newsfe4-gui.ntli.net...

Fabri wrote:
Paul R wrote:
[CUT]

:-)

Paul...isn't it possible to modify speed in your script? nope eh?

You can't go faster than 1 move per millisecond, but you can go a
bigger distance with each move:

setInterval("moveabit(md[0], 50, 20)", 5);

where 50 is 50px.

You can't even go 1 move per millisecond on some operating
systems/platforms:

<url: http://mindprod.com/jgloss/time.html />

It seems unlikely that the resolution of setInterval() or setTimeout()
in a scripting language running in a browser would be better than the
resolution of the timer available on the underlying operating system.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #7

Dr John Stockton

JRS: In article <7o***************@newsfe5-gui.ntli.net>, dated Tue, 8
Feb 2005 13:45:39, seen in news:comp.lang.javascript, Paul R
<no*********@email.address> posted :

movediv() now calls moveabit() every 5 milliseconds, which bumps the div
up or down a pixel.

In which combinations of browser and OS and computer have you
demonstrates that five milliseconds is achieved, as opposed to ten or
more? What do you get in Win98?

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
Web <URL:http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
PAS EXE etc : <URL:http://www.merlyn.demon.co.uk/programs/> - see 00index.htm
Dates - miscdate.htm moredate.htm js-dates.htm pas-time.htm critdate.htm etc.

Jul 23 '05 #8

Paul R

Dr John Stockton wrote:
....

In which combinations of browser and OS and computer have you
demonstrates that five milliseconds is achieved, as opposed to ten or
more? What do you get in Win98?

I haven't demonstrated any such thing. On my Win 2000 box it does indeed
get no quicker than 10ms.

If you're suggesting that my postings should be accurate to within 5
thousandths of a second, I shall certainly try harder ;-)

Jul 23 '05 #9

by: GD | last post by:

I'm using a script that works great on IE, but not on mozilla. the original one worked also on N4, but i'd like it to be funcional with mozilla. this is the orginal script: ...

Javascript

moving to C# from VC++ 6 - how does app speed compare?

by: mt | last post by:

Hi, W H A T I am considering moving my windows app written in Visual C++ 6.0 to C# .NET. Q U E S T I O N I was wondering if application speed will be a problem in .NET when compared to a...

C# / C Sharp

C# GDI+ layers control problem

by: pei_world | last post by:

hi I want to know how to create multiple layers in C#. and how can I control them? for example, how to delete one icon from drawed image layer? any example will be good pei

C# / C Sharp

Moving controls dynamically

by: VMI | last post by:

I'm working on an web app and I'm interested in moving a TextBox from one position in the page to another (in the same page) when a user clicks on a checkbox (i.e. display additional textbox when...

ASP.NET

Moving Forms

by: bwadley | last post by:

Hi, Im fairly new to VB.NET and am hoping someone can help me with what is probably a simple problem. I have an MDI app, when I open a child form, I want it centered to the parent. So I put...

Visual Basic .NET

Questions from a Technical Manager Moving from 1.1 to 2.0

by: Chris S | last post by:

We are moving from ASP.Net 1.1 to ASP.Net 2.0. As we do not have the luxury of spending weeks trying out different techniques, I'd like to rely on some tried and true methods, but need some...

ASP.NET

Help! How many layers in my app?

by: Burt | last post by:

There's an architect at my 200 person company that advocates having many layers in all my C# apps. He wants web services, use case handlers, facade layers, data gateways, etc. When I ask why all...

C# / C Sharp

DHTML moving an image

by: cjparis | last post by:

Hello everyone. If anyone can give me a hand I would be gratefull Am doing a site which requires a moving element and have used DHTML to do it. Have a simple Browser detect script to sort IE...

General

Animating one object moving in front of another

by: Peter Webb | last post by:

I want to animate one object moving in front of another. I cannot re-render the background as the object moves, as it would be extremely time consuming. This is what I would like to do. I draw...

C# / C Sharp

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Moving layers and control speed

Similar topics