style.posLeft-10 !!!

**merhaba** · Feb 4th, 2005, 06:39 PM

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>

**visualAd** · Feb 5th, 2005, 04:04 AM

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";
    }
}

**merhaba** · Feb 5th, 2005, 05:21 AM

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>

**visualAd** · Feb 5th, 2005, 06:06 AM

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">
	<!--
		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 = (parseInt(car1.style.left) -  10) + 'px';
			}
		}
	//-->
	</script>
	</head>
	
	<body onload="move()">
		<input type=text id="car1" name="car1" size=5 value="car1" style="position:absolute; left: 20px;">
	</body>
</html>

**merhaba** · Feb 5th, 2005, 08:50 AM

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

**visualAd** · Feb 6th, 2005, 01:11 PM

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">
	<!--
		aa=setInterval("move()",100);

		var forward = true;
		
		function move()
		{
			var car1=document.getElementById('car1');

			var newLeft;
			var upper = screen.availWidth-200;
			
			if (forward) // check which way we are going
			{
				newLeft = parseInt(car1.style.left) + 10;
			}
			else
			{
				newLeft = parseInt(car1.style.left) - 10;
			}
				

			if (newLeft > 0 && newLeft + parseInt(car1.style.width) < upper)
			{
				car1.style.left = newLeft;
			}
			else
			{
				forward = (! forward);
			}
		}
	//-->
	</script>

**merhaba** · Feb 9th, 2005, 03:17 PM

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

<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>

Thread: style.posLeft-10 !!!

Thread Tools

Display

style.posLeft-10 !!!

Re: style.posLeft-10 !!!

Re: style.posLeft-10 !!!

Re: style.posLeft-10 !!!

Re: style.posLeft-10 !!!

Re: style.posLeft-10 !!!

oh no !!! now it is working

Posting Permissions