Move object with a for loop

A

AC

Hello,
I am completely new to javascript and am trying to create a function
that will move a textbox 250px to the left and 250px to the right,
using a for loop. I can't figure out how to add the i value to the top
and left values.
Below is the code. Can somebody please help?

Thanks in advance.
Regards,
A. Crawford


<html>
<head>

<script type="text/javascript">
<!--


function moveit() {
for(i=0;i<=50;i=i+10){

counter.cffield.style.top += i + 'px';
counter.cffield.style.left += i + 'px';

}
}

//-->
</script>

</head>
<body>

<form name="counter">
<input type="button" value="Move" onclick="moveit()">
<input type="text" name="cffield" value="" size="25"
style="position:absolute;top:0px;left:65px">

</form>

</body>
</html>
 
J

Janwillem Borleffs

AC said:
I am completely new to javascript and am trying to create a function
that will move a textbox 250px to the left and 250px to the right,
using a for loop. I can't figure out how to add the i value to the top
and left values.
Below is the code. Can somebody please help?
Click to expand...

function moveit() {
var object = document.forms['counter'].elements['cffield'].style;
for (i=0;i<=50;i += 10){
object.top = parseInt(object.top) + i + 'px';
object.left = parseInt(object.left) + i + 'px';
}
}

The parseInt calls are required because style.left & style.top contain
strings, and string + number = 0 + number.


JW
 
A

AC

AC said:
Hello,
I am completely new to javascript and am trying to create a function
that will move a textbox 250px to the left and 250px to the right,
using a for loop.
Click to expand...

This makes no sense, do you mean 250px left and up?

[snip]


<script type="text/javascript">
<!--
Click to expand...
function moveit() {
for(i=0;i<=50;i=i+10){
Click to expand...
counter.cffield.style.top += i + 'px';
counter.cffield.style.left += i + 'px';
Click to expand...
}
}
Click to expand...

moved=false
function moveit() {
if(!moved){
for(var i=0;i<=250;i+=10){
var x=document.forms["counter"].cffield.style;
x.top = i + 'px';
x.left = i + 'px';

}
}
moved=true;
}

It will move really fast!

Mick
Click to expand...

Thank you for responding Mick.
Actually, it should have stated 250px to the right and 250px down.
Sorry for the confusion.
A. Crawford
 
A

AC

AC said:
I am completely new to javascript and am trying to create a function
that will move a textbox 250px to the left and 250px to the right,
using a for loop. I can't figure out how to add the i value to the top
and left values.
Below is the code. Can somebody please help?
Click to expand...

function moveit() {
var object = document.forms['counter'].elements['cffield'].style;
for (i=0;i<=50;i += 10){
object.top = parseInt(object.top) + i + 'px';
object.left = parseInt(object.left) + i + 'px';
}

}

The parseInt calls are required because style.left & style.top contain
strings, and string + number = 0 + number.

JW
Click to expand...

Thank you JW. This worked nicely.
A. Crawford
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Reversing output of user input by using while loop... 2
Move a Form action="ThatPage.php" to an <input type="??" > inline 1
Help with Visual Lightbox: Scripts 2
Help with Loop 0
Help with my responsive home page 2
Can someone pls help me with a little algorithm script 1
Help with code 0
I am trying to detect Which image id="" was clicked ? 22

Members online

Total: 2,019 (members: 2, guests: 2,017)
Robots: 166

Forum statistics

Threads
474,159
Messages
2,570,879
Members
47,414
Latest member
GayleWedel

Latest Threads

Top