Detlef
06-21-2001, 06:40 PM
Hi,
I found the following script:
<!-- This script has been in the http://www.javascripts.com Javascript Public Library! -->
<!-- Note that though this material may have been in a public depository, certain author copyright restrictions may apply. -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>DynamicMovement</TITLE>
<script language="JavaScript">
<!--
// [DynamicMovement v1.2]
//
// date: 10/26/98
//
// This script ables you to easily move
// objects dynamically around the screen.
//
// NEW! for version 1.2:
//
// Cross-browser functionality, the script
// now delivers DynamicMovement to both
// MSIE 4.x and Netscape 4.x
//
// Commercial use prohibited.
//
// (C) Copyright Jari Aarniala, 1998
// [foo@dlc.fi - www.dlc.fi/~foo]
IE4 = navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) >= 4;
NS4 = navigator.appName.substring(0,8) == "Netscape" && parseInt(navigator.appVersion) >= 4;
// checkBrowser() -- Checks whether the browser is new enough for some DynamicMovement ...
function checkBrowser(){
if(IE4 || NS4){
return true;
}
return false;
}
// movableObj() -- Creates a new movable object
function movableObj(startX, startY, endX, endY, delay, speed, refId){
this.sX = startX; this.sY = startY; this.eX = endX;
this.eY = endY; this.de = delay; this.sp = speed;
this.ref = refId;
xL = endX - startX;
yL = endY - startY;
with (Math){
if(abs(xL) > abs(yL)){
this.xS = (xL > 0)?1:-1;
this.yS = (yL > 0)?abs(yL / xL):-abs(yL / xL);
this.howManySteps = abs(xL / speed);
} else if(abs(yL) > abs(xL)){
this.yS = (yL > 0)?1:-1;
this.xS = (xL > 0)?abs(xL / yL):-abs(xL / yL);
this.howManySteps = abs(yL / speed);
} else {
this.yS = (yL > 0)?1:-1;
this.xS = (xL > 0)?1:-1;
this.howManySteps = abs(xL / speed);
}
}
this.startMovement = startMovement;
}
// startMovement() -- starts the movement
function startMovement(){
if(checkBrowser()){
if(IE4){
ref = document.all(this.ref).style;
} else {
ref = document[this.ref];
}
doDynamicMovement(this.sX, this.sY, this.eX, this.eY, this.de, this.xS, this.yS, ref, this.sp, this.howManySteps);
}
}
// doDynamicMovement() -- does the Dynamic Movement
function doDynamicMovement(curX, curY, eX, eY, sp, xS, yS, ref, speed, hS){
if(Math.floor(hS - 1) != 0){
hS--;
curX += xS * speed;
curY += yS * speed;
ref.left = Math.round(curX);
ref.top = Math.round(curY);
setTimeout("doDynamicMovement(" + curX + ", " + curY + ", " + eX + ", " + eY + ", " + sp + ", " + xS + ", " + yS + ", ref, " + speed + ", " + hS + ")", sp);
} else {
setPos(eX, eY, ref);
}
}
// setPos() -- sets the end position accurately when doDynamicMovement has done its job
function setPos(x, y, ref){
ref.left = x;
ref.top = y;
}
// -->
</script>
</HEAD>
<BODY bgcolor="white">
<table width="600">
<tr><td>
<font face="Verdana, Arial">
<h3>DynamicMovement</h3>
<font size="1">
v1.2 - 10/26/98 - Author: <a href="http://www.dlc.fi/~foo/">Jari Aarniala</a>
</font>
<p>
<font size="2">
<h5>Introduction</h5>
DynamicMovement brings you some very cool
DHTML functionality in both Netscape 4.0
MSIE 4.0 (or in higher versions of course).
It`s made for creating cool movement to
your pages. You can basically move any
object that is positioned absolutely
from any point to another.
<p>
In the example here we move a DIV from
point (-100,-100) to (80,180).
<p>
<form>
<input type="button" onClick="dynaText.startMovement()" value="Do the movement!">
</form>
<p>
Another example of the script in action (for MSIE 4.0 only),
my personal site <a href="http://www.dlc.fi/~foo/">
<fooweb></a>
<p>
<h5>How to define movable objects?</h5>
Using DynamicMovement is pretty simple and
easy.
<p>
First you`ll have to have a page with some
images, divs etc. that you`d like to move.
Here`s the code for the div we move:
<pre>
<div id="wow" style="position: absolute; left: 10; top: 10; width: 300;
font-family: Verdana, Arial; font-size: 20pt">
Dies ist dynamische Bewegung...
</div>
</pre>
Then you create movable objects from these
by doing this (this should be done after
the page has loaded, so place the script
at the end of the page or use onLoad) :
<pre>
<script language="JavaScript">
<!--
dynaText = new movableObj(10,10,80,180,10,10,"wow");
// -->
</script>
</pre>
<p>
The syntax is the following:
<p>
<pre>
theNameForTheObject = new movableObj(start x-point, start y-point,
end x-point, end y-point, the amount of pixels to be jumped at once,
the delay between the jumps (in milliseconds), the id of the object)
</pre>
<p>
<h5>How to start DynamicMovement?</h5>
After you`ve created the object(s) you can
start the movement by this statement (in this
case the dynaText-object):
<p>
<pre>
dynaText.startMovement();
</pre>
<p>
This can be done anywhere you want, e.g. in an
event handler (as in this example), after a
page has loaded etc. In our example the movement
starts when the button is clicked.
<p>
<pre>
<input type="button" onClick="dynaText.startMovement()" value="Do the movement!">
</pre>
<p>
Hope you understood! Comments <a href="mailto:foo@dlc.fi">here</a> ...
<p>
p.s. You can define as many movable objects at a time as you want,
and they can also be moved at the same time ...
<p>
p.p.s. If you`d like to use this script on multiple pages, you might
want to consider putting the script in an separate file. E.g.
DynaMove.js ...
</font>
<div id="wow" style="position: absolute; left: 10; top: 10; width: 150px;
height: 30px"><img src="download.gif" width="150" height="30"> </div>
</font>
</td></tr>
</table>
<script language="JavaScript">
<!--
// Here we define the movable object
dynaText = new movableObj(10,10,80,180,5,5,"wow");
// -->
</script>
</BODY>
</HTML>
<!-- Tommy Raven (Min) says Moo. -->
It works nicely, but I canīt manage to move more
than one object at the same time.
Anybody can help?
I found the following script:
<!-- This script has been in the http://www.javascripts.com Javascript Public Library! -->
<!-- Note that though this material may have been in a public depository, certain author copyright restrictions may apply. -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>DynamicMovement</TITLE>
<script language="JavaScript">
<!--
// [DynamicMovement v1.2]
//
// date: 10/26/98
//
// This script ables you to easily move
// objects dynamically around the screen.
//
// NEW! for version 1.2:
//
// Cross-browser functionality, the script
// now delivers DynamicMovement to both
// MSIE 4.x and Netscape 4.x
//
// Commercial use prohibited.
//
// (C) Copyright Jari Aarniala, 1998
// [foo@dlc.fi - www.dlc.fi/~foo]
IE4 = navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) >= 4;
NS4 = navigator.appName.substring(0,8) == "Netscape" && parseInt(navigator.appVersion) >= 4;
// checkBrowser() -- Checks whether the browser is new enough for some DynamicMovement ...
function checkBrowser(){
if(IE4 || NS4){
return true;
}
return false;
}
// movableObj() -- Creates a new movable object
function movableObj(startX, startY, endX, endY, delay, speed, refId){
this.sX = startX; this.sY = startY; this.eX = endX;
this.eY = endY; this.de = delay; this.sp = speed;
this.ref = refId;
xL = endX - startX;
yL = endY - startY;
with (Math){
if(abs(xL) > abs(yL)){
this.xS = (xL > 0)?1:-1;
this.yS = (yL > 0)?abs(yL / xL):-abs(yL / xL);
this.howManySteps = abs(xL / speed);
} else if(abs(yL) > abs(xL)){
this.yS = (yL > 0)?1:-1;
this.xS = (xL > 0)?abs(xL / yL):-abs(xL / yL);
this.howManySteps = abs(yL / speed);
} else {
this.yS = (yL > 0)?1:-1;
this.xS = (xL > 0)?1:-1;
this.howManySteps = abs(xL / speed);
}
}
this.startMovement = startMovement;
}
// startMovement() -- starts the movement
function startMovement(){
if(checkBrowser()){
if(IE4){
ref = document.all(this.ref).style;
} else {
ref = document[this.ref];
}
doDynamicMovement(this.sX, this.sY, this.eX, this.eY, this.de, this.xS, this.yS, ref, this.sp, this.howManySteps);
}
}
// doDynamicMovement() -- does the Dynamic Movement
function doDynamicMovement(curX, curY, eX, eY, sp, xS, yS, ref, speed, hS){
if(Math.floor(hS - 1) != 0){
hS--;
curX += xS * speed;
curY += yS * speed;
ref.left = Math.round(curX);
ref.top = Math.round(curY);
setTimeout("doDynamicMovement(" + curX + ", " + curY + ", " + eX + ", " + eY + ", " + sp + ", " + xS + ", " + yS + ", ref, " + speed + ", " + hS + ")", sp);
} else {
setPos(eX, eY, ref);
}
}
// setPos() -- sets the end position accurately when doDynamicMovement has done its job
function setPos(x, y, ref){
ref.left = x;
ref.top = y;
}
// -->
</script>
</HEAD>
<BODY bgcolor="white">
<table width="600">
<tr><td>
<font face="Verdana, Arial">
<h3>DynamicMovement</h3>
<font size="1">
v1.2 - 10/26/98 - Author: <a href="http://www.dlc.fi/~foo/">Jari Aarniala</a>
</font>
<p>
<font size="2">
<h5>Introduction</h5>
DynamicMovement brings you some very cool
DHTML functionality in both Netscape 4.0
MSIE 4.0 (or in higher versions of course).
It`s made for creating cool movement to
your pages. You can basically move any
object that is positioned absolutely
from any point to another.
<p>
In the example here we move a DIV from
point (-100,-100) to (80,180).
<p>
<form>
<input type="button" onClick="dynaText.startMovement()" value="Do the movement!">
</form>
<p>
Another example of the script in action (for MSIE 4.0 only),
my personal site <a href="http://www.dlc.fi/~foo/">
<fooweb></a>
<p>
<h5>How to define movable objects?</h5>
Using DynamicMovement is pretty simple and
easy.
<p>
First you`ll have to have a page with some
images, divs etc. that you`d like to move.
Here`s the code for the div we move:
<pre>
<div id="wow" style="position: absolute; left: 10; top: 10; width: 300;
font-family: Verdana, Arial; font-size: 20pt">
Dies ist dynamische Bewegung...
</div>
</pre>
Then you create movable objects from these
by doing this (this should be done after
the page has loaded, so place the script
at the end of the page or use onLoad) :
<pre>
<script language="JavaScript">
<!--
dynaText = new movableObj(10,10,80,180,10,10,"wow");
// -->
</script>
</pre>
<p>
The syntax is the following:
<p>
<pre>
theNameForTheObject = new movableObj(start x-point, start y-point,
end x-point, end y-point, the amount of pixels to be jumped at once,
the delay between the jumps (in milliseconds), the id of the object)
</pre>
<p>
<h5>How to start DynamicMovement?</h5>
After you`ve created the object(s) you can
start the movement by this statement (in this
case the dynaText-object):
<p>
<pre>
dynaText.startMovement();
</pre>
<p>
This can be done anywhere you want, e.g. in an
event handler (as in this example), after a
page has loaded etc. In our example the movement
starts when the button is clicked.
<p>
<pre>
<input type="button" onClick="dynaText.startMovement()" value="Do the movement!">
</pre>
<p>
Hope you understood! Comments <a href="mailto:foo@dlc.fi">here</a> ...
<p>
p.s. You can define as many movable objects at a time as you want,
and they can also be moved at the same time ...
<p>
p.p.s. If you`d like to use this script on multiple pages, you might
want to consider putting the script in an separate file. E.g.
DynaMove.js ...
</font>
<div id="wow" style="position: absolute; left: 10; top: 10; width: 150px;
height: 30px"><img src="download.gif" width="150" height="30"> </div>
</font>
</td></tr>
</table>
<script language="JavaScript">
<!--
// Here we define the movable object
dynaText = new movableObj(10,10,80,180,5,5,"wow");
// -->
</script>
</BODY>
</HTML>
<!-- Tommy Raven (Min) says Moo. -->
It works nicely, but I canīt manage to move more
than one object at the same time.
Anybody can help?