By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,238 Members | 1,661 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,238 IT Pros & Developers. It's quick & easy.

Moving layers and control speed

P: n/a
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
Share this Question
Share on Google+
8 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
"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

P: n/a
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

P: n/a
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

This discussion thread is closed

Replies have been disabled for this discussion.