...

View Full Version : Moving with javascript



Painfall
12-30-2010, 08:59 PM
Hello everyone. I am trying to make a flag with css and then move it with javascript.


<html>
<head>
<title>Flag</title>

<link rel="stylesheet" type="text/css" href="flag3.css" />

<script language="javascript">
Hmove=-100;
function moveObjRight(obj)
{
obj.style.left=Hmove;
Hmove+=4;
if(Hmove<900)
window.setTimeout("moveObjRight(" +obj.id+ ");", 0);

}

</script>

</head>
<body>
<h1>The flag of ___ by www</h1>

<div id="bar3">
<div id="bar2">
<div id="bar1">
</div>
<br />
<br />
<br />
<br />
</div>
<br />
<br />
<br />
<br />
</div>

<script language="JavaScript">
moveObjRight(bar3);
</script>


</body>
</html>
This is my code. The image is moving to the right, but i want it bounce from side-to-side in the browser window.

Any help will be appreciated. Thank you.

gusblake
12-30-2010, 09:45 PM
You could make a moveObjectLeft function and call it when the flag gets to the end like this:



function moveObjRight(obj)
{
obj.style.left=Hmove;
Hmove+=4;
if(Hmove<900)
window.setTimeout("moveObjRight(" +obj.id+ ");", 0);
else
moveObjLeft(obj);
}

function moveObjLeft(obj)
{
obj.style.left=Hmove;
Hmove-=4;
if(Hmove>0)
window.setTimeout("moveObjLeft(" +obj.id+ ");", 0);
else
moveObjRight(obj);
}


Why are you using setTimeout with a time of 0? why not just call the function directly?

Also I'm guessing you've only tested in internet explorer - HTML elements' ids are not usually global variables, so when you call moveObjxx you should really be explicit and use document.getElementById("bar3") (both at the bottom and in the setTimeout call)

Edit - two more things - 1) language=javascript isn't really used any more, it's standard to use type="text/javascript" and 2) it's a good idea to always use some unit when setting CSS values (obj.style.left=Hmove+"px")

Old Pedant
12-30-2010, 10:36 PM
NO NO NO NO!!!

The problem is that you are passing obj.id when you call the function via setTimeout:


window.setTimeout("moveObjRight(" +obj.id+ ");", 0);

But then the function is *EXPECTING* an ACTUAL OBJECT, *NOT* an ID!!!!



function moveObjRight(obj)
{
obj.style.left = Hmove;

The fix is easy: Pass *AND EXPECT* the ID as a string!



<script type="text/javascript">
Hmove=-100;
function moveObjRight( id )
{
var obj = document.getElementById(id);
obj.style.left=Hmove+ "px"; // yes! without "px" all but MSIE barf
Hmove+=4;
if(Hmove<900)
window.setTimeout("moveObjRight('" + id+ "');", 0);

}
</script>

and then start it off via


moveObjRight("bar3");

Note the quotes around "bar3" !!!

Painfall
12-30-2010, 10:45 PM
Thank you for your answer. I made the changes and everything works. There's just one thing left.

I do not want my code to rely on a fixed-width element surrounding it can I make it bounce between the browser window edges?

I think this method should help

document.body.offsetWidth
It's just that i'm not sure where to put it and how to use it.

gusblake
12-30-2010, 11:34 PM
Something like this:



var divw=document.getElementById("bar3").offsetWidth;
var max_left=document.body.offsetWidth-divw;


Then change 900 to max_left

Old Pedant
12-31-2010, 12:12 AM
But there's no reason to have both a move left and move right.



var Hmove = 0;
var Hmoveby = 4;
function moveFlag( id )
{
var obj = document.getElementById(id);

obj.style.left=Hmove + "px";

Hmove += Hmoveby;

var max_left = document.body.offsetWidth - obj.offsetWidth;
if( Hmove > max_left || Hmove < 0 ) {
Hmoveby = - Hmoveby;
Hmove += Hmoveby;
}

setTimeout('moveFlag("' + id + '");', 20);
}

....
<body onload="moveFlag('bar3');">


...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum