/    Sign up×
Community /Pin to ProfileBookmark

Object moving function

Copy linkTweet thisAlerts:
Sep 15.2004

Hi

I want create a script that will allow me to animate any <div> object using dhtml by calling a function like

[code]
onClick(“animate(100,200,50,0,’txt’);”)

that applies to this:

<div id=”txt” style=”position:absolute;left:100;top:200px”>
Some text
</div>

where the function might be:

function animate(xstart,xstop,ystart,ystop,id) {

….

}
[/code]

in order animate the text to move from (100,50) to (200,0), or any set of start and finish coordinates. I’ve battled with this for hours but it just doesn’t work. I can get a straight up-down, left-right, or diagonal, but a one-function-fits-all is what’s needed for the task (fancy looking pages that look like powerpoint, and I can’t use flash).

Note that this solution is required for MSIE only.

If anyone knows a solution to this or a where I can find it I’d appreciate it.

Thanks

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@JPnycSep 15.2004 — Where's the actual functions? There's nothing there that will move anything.
Copy linkTweet thisAlerts:
@zingmatterauthorSep 15.2004 — Ok, I'll show you what I have so far but it just doesn't to it.
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;test&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;script language="javascript" type="text/javascript"&gt;


var timer;
var globalid = '';
var globalxstart = 0;
var globalxstop = 0;
var globalystart = 0;
var globalystop = 0;
var m = 0;
var mset = false;

function resetGlobals() {

globalid = '';
globalxstart = 0;
globalxstop = 0;
globalystart = 0;
globalystop = 0;
m = 0;
mset = false;


}



function moveXY(id,xstart,xstop,ystart,ystop) {

var x = 0;
globalxstart = xstart;
globalystart = ystart;
globalxstop = xstop;
globalystop = ystop;

globalid = id;
xmove = xstop - xstart;
ymove = ystop - ystart;


if (x &gt; xmove) {

<i> </i> resetGlobals();
<i> </i> return false;

} else {

<i> </i> if (! mset) {
<i> </i> m = xmove / ymove;
<i> </i> mset = true;
<i> </i> stoptimer();
<i> </i> var c = ystart - (m * xstart);
<i> </i> var j = Math.round(x * m);
<i> </i> }

<i> </i> document.getElementById(id).style.left = x + parseInt(xstart);
<i> </i> document.getElementById(id).style.top = Math.round(x * m) + c;

<i> </i> if (xmove &gt; 0) {
<i> </i> x++;
<i> </i> } else {
<i> </i> x--;
<i> </i> }

}

globalx = x;

timer=setTimeout("moveXY(globalid,globalxstart,globalxstop,globalystart,globalystop)", 1)

}


function stoptimer() {

<i> </i> clearTimeout(timer);
}

&lt;/script&gt;



&lt;div id="arrowdown"
style="position: absolute; top:200px;left:300px;z-index:100;"&gt;
&lt;img src="../images/arrow2down.gif"
width="241" height="241" alt="" border="0" name="arrowdown"&gt;
&lt;/div&gt;


&lt;form name="form1"&gt;

&lt;input type="button" name="button1"
onclick="moveXY('arrowdown','300','600','200','300');" value="animate"&gt;&lt;br&gt;

&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;

If you can make any sense of it. Maybe give an idea of what I'm trying to do (with no success)

Thanks
Copy linkTweet thisAlerts:
@zingmatterauthorSep 16.2004 — Vladdy..!!! Helper AND pleaser.

Thanks

?
×

Success!

Help @zingmatter spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...