JS & Moving Objects

They have: 330 posts

Joined: Apr 2000

I have tried to create a javascript which onClick will move an object 200 pixels, if it has already been moved, it moves it back.

Here is my code, it doesn't work.

function toggle()
{
var z = document.all.test1.style;

if( z.pixelTop = 0 ) Then
{
if ( z.pixelTop < 200 ) z.pixelTop +=2;
}
else
{
if ( z.pixelTop <= 200 ) z.pixelTop -=2;
}
}
'

thank you for any help.

dk01's picture

He has: 516 posts

Joined: Mar 2002

Quote:

function toggle()
{
var z = document.all.test1.style;

if( z.pixelTop = 0 ) Then
{
if ( z.pixelTop < 200 ) z.pixelTop +=2;
}
else
{
if ( z.pixelTop <= 200 ) z.pixelTop -=2;
}
}
'

The thing that popped out at me was that you had "Then" after the first if statement. Try it out after removing the "Then".
-dk

Abhishek Reddy's picture

He has: 3,348 posts

Joined: Jul 2001

Yes, "Then" is the ASP alternative for {}.

Not only that but when comparing values in JS, use double equal signs. i.e. "=="

if( z.pixelTop == 0 )
'

as opposed to

if( z.pixelTop = 0 )
'

They have: 330 posts

Joined: Apr 2000

That makes sense. I am coding in ASP 99% of the time which is why I got confused there. I'll give that a shot. Thanks.

They have: 330 posts

Joined: Apr 2000

Well, that kind of fixed it, but not quite 100% yet.

Now when I click on the image it just shakes by 5 pixels up & down. How would I tell it to continue moving down until it reaches 200. Then the next time I click it I want it to move back to 0.

That's got to be easy right? I don't care about NN or any other validation stuff because I know my audience for this will be IE 5.0 only.

Thanks for any help.

Abhishek Reddy's picture

He has: 3,348 posts

Joined: Jul 2001

What's the rest of the script like? Where are you calling it? Do you have a setTimeout somewhere that calls this function? Smiling

They have: 330 posts

Joined: Apr 2000

I have changed the code so many times I have no idea what it started like, but here's the final (incorrect) product. It still doesn't work, please help.

<html>
<head>
<style>
#test1 { position: absolute;
left: 0;
top: 0;
z-index: 2;
background-color: #FFFF00; }

#test2 { position: absolute;
left: 0;
top: 0;
z-index: 1;
background-color: #FF0000; }
</style>
&lt;script&gt;
function open()
{
var z = document.all.test1.style;

if ( z.pixelTop < 200 ) z.pixelTop +=5
}
&lt;/script&gt;
</head>
<body>
<img id="test1" src="" height="50" width="50" onClick="setInterval('open()', 5)">
<div id="test2"><img src="" height="50" width="50" onClick="setInterval('close()', 5)"><br>Testing...</div>
</body>
</html>
'

Thanks for any help.

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.