Moving with javascript

Painfall · 12-30-2010, 07:59 PM

Hello everyone. I am trying to make a flag with css and then move it with javascript.

Code:

<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, 08:45 PM

You could make a moveObjectLeft function and call it when the flag gets to the end like this:

Code:

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, 09:36 PM

NO NO NO NO!!!

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

Code:

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

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

Code:

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

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

Code:

<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

Code:

moveObjRight("bar3");

Note the quotes around "bar3" !!!

Painfall · 12-30-2010, 09: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

Code:

document.body.offsetWidth

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

gusblake · 12-30-2010, 10:34 PM

Something like this:

Code:

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

Then change 900 to max_left

Old Pedant · 12-30-2010, 11:12 PM

But there's no reason to have both a move left and move right.

Code:

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');">

...