Recursive DHTML animation - Having trouble moving a layer....
ok, i've read the tutorials on animation plenty of times, and it makes
perfect sense - but i've tried to implement it numerous times and it's just
not working. here's the code:
<script language="javascript">
<!--
var sub;
function move(m) {
if (document.layers) {
sub=document.layers[m]; }
else {
sub=document.all(m).style; }
x=parseInt(sub.left);
if (x<=150) {
x+=5;
sub.left=x;
setTimeout('move('+m+')', 100); } }
-->
</script>
....
....
....
<a href="#" onClick="move('asdf'); return false"><img src="menu/html.gif"
width="150" height="25" border="0"><br> </a>
....
....
....
<div id="asdf" style="position:absolute; left:0px; top:131px; width:150;
height:23; z-index:3; background-color: #FF3333; layer-background-color:
#FF3333;; visibility: visible"></div>
for some reason, ie5 is telling me that an "object is required" at line 15
(this line: sub=document.all(m).style; ).
i've no idea what to do from
here....thanks for your help
-Ben
Ben C
-"The exception...is to tap the unexceptional."
benc posted this at 04:49 — 6th August 1999.
They have: 33 posts
Joined: Jul 1999
first of all - thanks a lot pj - that script cetainly worked. but here's the problem - i'm gonna want to do something like that for about 8 different situations - that means simply inserting the layer id in 8 different functions. *highly* inefficient in case i want to change anything. and besides that, i REALLY want to figure this out since i thought i had it
and yes - dynamic drive is sucking too =P
-benc
Ben C
-"The exception...is to tap the unexceptional."
Anonymous posted this at 17:11 — 6th August 1999.
They have: 5,633 posts
Joined: Jan 1970
I cant give you the answer your looking for but if you visit dynamicdrive.com they might be able to help you. They have many cross browser scripts that work fine. All you have to do is cut and paste and a good set of instructions are included.
----------
[email protected]
vegas.com.au/~jasper
benc posted this at 17:56 — 6th August 1999.
They have: 33 posts
Joined: Jul 1999
ok, maybe this will help in solving the problem - what does happen is the layer gets moved that first 5 pixels to the left. it's the second call (1st recursive call) of the move function that has a problem with the object. that only makes me more confused, but maybe its how i'm passing the parameter recursively that's screwing me up?
-benc
Ben C
-"The exception...is to tap the unexceptional."
benc posted this at 18:03 — 6th August 1999.
They have: 33 posts
Joined: Jul 1999
I already have talked to dynamic drive...well i should say i emailed them. haven't heard since....
benc posted this at 18:42 — 6th August 1999.
They have: 33 posts
Joined: Jul 1999
I GOT IT!!!!!
ok, i was right about the problem, and just now i figured out how to solve it: it's all in the parameter passing. take a look at the new setTimeout statement:
setTimeout('move(\''+m+'\')', 5)
stupid parameter passing rules
hope this helps someone someday
-benc
Ben C
-"The exception...is to tap the unexceptional."
John Pollock posted this at 19:27 — 6th August 1999.
He has: 628 posts
Joined: Mar 1999
Good Job Benc!
I had finally gotten it to go through the first time also, but the m variable kept coming in as [object] the second time. Now I remember why...doh!
Glad to see you got it working!
----------
Page Resource: http://www.pageresource.com
JavaScript City: http://www.javascriptcity.com
Java Script: A Beginner's Guide
Page Resource
Jim Shilt posted this at 23:32 — 6th August 1999.
They have: 268 posts
Joined: May 1999
Let me throw my hat into the ring. I modified the script from the project cool site. The advantage to this script is you can move from any location to any other location. left to right, right to left, up to down, down to up, and diag. The disadvantage is you have to make sure the distance is divisiable (sp) by the step.
<html>
<head>
<script language=JavaScript>
ie4 = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 ))
ns4 = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4 ))
if (ie4){
document.write('<link rel=stylesheet type="text/css" href="/styles/dynamic.css">')
}
else {document.write('<link rel=stylesheet type="text/css" href="/styles/dynamicNS.css">')}
if (ns4) {
layerRef="document.layers";
styleRef="";
} else {
layerRef="document.all";
styleRef=".style";
}
function moveDivision(which, startv, finishv, stepv,starth, finishh, steph, speed){
if (ie4 ¦¦ ns4){
if (startv < finishv){
eval(layerRef + '["' + which +'"]' + styleRef + '.top = startv');
startv=startv+stepv;
}
if (startv > finishv){
eval(layerRef + '["' + which +'"]' + styleRef + '.top = startv');
startv=startv-stepv;
}
if (startv == finishv){
eval(layerRef + '["' + which +'"]' + styleRef + '.top = startv');
startv=startv;
}
if (starth < finishh){
eval(layerRef + '["' + which + '"]' + styleRef + '.left = starth');
starth=starth+steph;
}
if (starth > finishh){
eval(layerRef + '["' + which + '"]' + styleRef + '.left = starth');
starth=starth-steph;
}
if (starth == finishh){
eval(layerRef + '["' + which + '"]' + styleRef + '.left = starth');
starth=starth;
}
}
setTimeout("moveDivision('"+which+"',"+startv+","+finishv+","+stepv+","+starth+","+finishh+","+steph+")",speed);
}
//-->
</script>
</head>
<body bgcolor=white onload="moveDivision('I',210,70,2,170,100,1,0); moveDivision('Love',70,210,2,100,100,1,0);">
<div id=I style="position: absolute; top: -100; left: -100;">
<img src="../Assets/Images/IBack.GIF">
</div>
<div id=Love style="position: absolute; top: -100; left: -100;">
<img src="../Assets/Images/IBack.GIF">
</div>
</body>
</html>
If you can clean this up please do and return the file to me.
Thanks
By the way the smilies are ; ) without the space
----------
My goal in life is found in Phillipians 4:8-9
My goal in life is found in Phillipians 4:8-9
shoutingrock.org/troop214
PJ posted this at 00:06 — 7th August 1999.
They have: 76 posts
Joined: Apr 1999
benc,
I had a look at your script and changed a few things, this works for me in IE5:
<html>
<head>
<title>New Page 1</title>
<script language="javascript">
<!--
var moveBox = ""
var sub;
function move(m) {
if (document.layers)
{
sub = document.layers[m];
}
else
{
sub=document.all('moveBox').style; }
x=parseInt(sub.left);
if (x<=150)
{
x+=5;
sub.left=x;
setTimeout('move('+moveBox+')', 100);
}
}
-->
</script>
</head>
<body>
<a href="#" onClick="move('moveBox'); return false">
<p><img src="menu/html.gif" width="150" height="25" border="0"><br>
</a></p>
<div id="moveBox"
style="position:absolute; left:0px; top:131px; width:150;
height:23; z-index:3; background-color: #FF3333; layer-background-color:
#FF3333;; visibility: visible"></div>
</body>
</html>
Hopefully it works for you to
Later,
PJ
JP Stones posted this at 01:11 — 7th August 1999.
They have: 2,390 posts
Joined: Nov 1998
I have also been very disapointed with the support at Dynamic Drive -I have in fact written several times and never recieved an answer...
JP
----------
The Webmaster Promotion and Resource Center.
Visit: http://www.what-next.com
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.