style.posLeft-10 !!!

Printable View

Feb 4th, 2005, 06:39 PM
merhaba

style.posLeft-10 !!!

Hi,
My aim is to move the object(car1) as far as the right border(screen.availWidth-200)
and and then comes back to the starting point(x=10) .But it does not work !! I can't seeWhy this line"car1.style.posLeft-=10;"
does not work? I know that there are some working-script on the net javascript "space-invaders"
Could you help me?

<script>
aa=setInterval("move()",100)
function move()
{
var car1=document.getElementById('car1')
car1.style.posLeft+=10;
if(car1.style.posLeft>=screen.availWidth-200)
{
car1.style.posLeft==(screen.availWidth-200)
car1.style.posLeft-=10;
document.bgColor="pink";
}
}
</script>
<body>
<input type=text name=car1 size=5 value="car1" style=position:absolute;>
</body>
Feb 5th, 2005, 04:04 AM
visualAd

Re: style.posLeft-10 !!!

You need to sepcify your value in pixels. It's also left, not posLeft:

Code:

function move() { var car1=document.getElementById('car1') car1.style.left = parseInt(car1.style.left + 10) + 'px'; if(parseInt(car1.style.posLeft)>=screen.availWidth-200) { car1.style.left==(screen.availWidth-200) // what does this line do :confused: car1.style.left-=10 + 'px'; document.bgColor="pink"; } }
Feb 5th, 2005, 05:21 AM
merhaba

Re: style.posLeft-10 !!!

Hi again, I changed some lines just as you said .. But the following codes still does not work...

<script>
var aa=setInterval("move()",1000)
function move()
{
var car1=document.getElementById('car1')
car1.style.Left = parseInt(car1.style.Left +10) + 'px';

if(parseInt(car1.style.Left)>=screen.availWidth-200)
{

car1.style.Left-=10 + 'px';
document.bgColor="pink";
}

}
</script>
<body onload="move()">
<input type=text name="car1" size=5 value="car1" style="position:absolute;">
</body>
Feb 5th, 2005, 06:06 AM
visualAd

Re: style.posLeft-10 !!!
Your problem was with this line:

car1.style.left-=10 + 'px';

It should be:

car1.style.left = (parseInt(car1.style.left) - 10) + 'px';

The left property will return a value 23px, so to get just the number you need to use the parseInt() function. I've also added the HTML and head tag, they should really be there, your code may not work if they are not:

Make sure you also give the left syle an initial value as shown in the example otherwise the property will return null.

There were also other errors in your script too:
- Missing semicolon on line 1
- Incorrect spelling of the left property. Should be left not Left.
HTML Code:

<html> <head> <script type="text/javascript">  </script> </head> <body onload="move()"> <input type=text id="car1" name="car1" size=5 value="car1" style="position:absolute; left: 20px;"> </body> </html>
Feb 5th, 2005, 08:50 AM
merhaba

Re: style.posLeft-10 !!!

Thanks a lot visualAd,,you guys are great 8=)

Learned a lot from you..main problem was that my object (car1) stopped at the point of (x=screen.availWidth-200)... ıt supposed to travel back to its first point(starting point which is x=100) .your line did not return it back..
car1.style.left = (parseInt(car1.style.left) - 10) + 'px';
thanks
Feb 6th, 2005, 01:11 PM
visualAd

Re: style.posLeft-10 !!!
I have had a look at your code and made a couple of changes:
- Firstly I have created a global flag which indicates the direction in which the box is moving.
- The script tests whether this variable is true or false. If ture is adds 10 to the current position and if false it subtracts 10 from the current position.
- Should the new poistion exceed the bounderies of the screen width or be less than 0, the forward flag is toggled and the next time the function is called it will start moving in the oppisite direction.
This will cause the box to move constantly from left to right.

HTML Code:

<script type="text/javascript">  </script>
Feb 9th, 2005, 03:17 PM
merhaba

oh no !!! now it is working

Hey....look this one is working...successssssssss!!! :thumb:

<html>
<head>
<script>
var forwardb = true;
function move(){
var car1=document.getElementById('car1');
var newLeft;
var upper = screen.availWidth-200;

if (forwardb) // check which way we are going
{
newLeft = car1.offsetLeft+10;
}
else
{
newLeft = car1.offsetLeft - 10;
}

if (newLeft > 0 && newLeft + parseInt(car1.offsetWidth) < upper)
{
car1.style.left = newLeft+'px';
}
else
{
forwardb =(! forwardb);

}
setTimeout('move()',100);
}

</script>
</head>
<body onload="move()">
<input type="text" size="5" value="arabam" name="car1" style="position:absolute;">

</body>
</html>