PDA

View Full Version : Resolved Manipulating Element Positions



vb2java
10-11-2011, 06:46 PM
Hello all,

I have been stuck for days now. Will someone please help me? I am trying to move the letter "P" around the screen. I can move an element from left to right, up and down, on an angle, and so forth. For some reason, my brain is just shutting down when it comes to this:

Lets take a <p> tag, give it an id, and set some styles to it. Then we'll write some javascript to move the <p>"P"</p> around like this:

<!DOCTYPE HTML PUBLIC "-//w3c/DTD HTML 4.01 TRANSITIONAL//EN"
"http://www.w3.org/TR/html4/loose.dtd">

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

<style>

#a1{

position: absolute;
left: 50px;
top: 50px;

font-size: 32px;
color: #555599;
}


</style>

<script type="text/javascript">

function a1(x1){

var c=(x1);
var txt2 = document.getElementById("a1");
txt2.style.left = c
if (x1<100) x1+=1;
setTimeout('a1('+x1+')',10);
}
</script>
</head>
<body>
<p id="a1">P</p>
<script type="text/javascript">a1(50)</script>

</body>
</html>

Let us refer to the above script as "Movement One". Movement two would happen after movement one and so on. After movement four we will be back at the beginning.

Here we go:

1.) move "P" from left to right 50px by incrementing txt2.document.style.left
until we reach 100px.

2.) once txt2.document.style.left reaches 100px we then increment .style.top
until we reach 100px.

3.) once .style.top has reached 100px we then decrement .style.left until we
are back to 50px.

4.) obviously we now decrement .style.top until we reach the original
position of left: 50px; top: 50px;

One thing to note:

CSS "position: absolute; left: 50px; top 50px;"

left = x
top = y

I have thought of a few different ways to go about getting to "Movement Two". Ok here is what I've thought of doing:

1.) Passing 4 arguments to the function like this:

function a1(x1, y1, x2, y2){} x1 would be coded just like it is and then we'd code the second movement for y1 and so on.

2.) Write 4 separate functions for each movement and call/invoke the
function that follows from within the current function:

function a1(x1){

var c=(x1);
var txt2 = document.getElementById("a1");
txt2.style.left = c
if (x1<100) x1+=1;
setTimeout('a1('+x1+')',10);

a2(y1)
}

funtion a2(y1){
}

3.) Write the 4 separate functions for each movement but do not call a function from a function, rather use setInterval and call 4 functions from javascript within the <body> tag.

I like the passing of 4 arguments to one function but I am not sure if that makes things more or less complicated.

Either way, I've done work in all three methods and I cannot get from movement one to movement two. I've tried something I'll give the code for here in a second, but I get an invalid argument error when I try to use the variable txt2 to also work with the .style.top attributes within the same function like this:

function a1(x1, y1){

var c=(x1);
var txt2 = document.getElementById("a1");
txt2.style.left = c
if (x1<100) x1+=1;
setTimeout('a1('+x1+')',10);

while (x1==100){
var d = (y1)
txt2.style.top = d // !!Right here!! \\
if (y1<100) y1+=1;
setTimeout('a1('+y1+')', 10);
}

If somone could get me going, that would be great!

Thanks :-)

coothead
10-11-2011, 09:39 PM
Hi there vb2java,

here is my little attempt at a solution to your problem...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
#container {
position:relative;
width:250px;
height:185px;
border:3px double #559;
margin:auto;
background-color:#cff;
}
#a1 {
position:absolute;
left:50px;
top:50px;
font-family:'times new roman',serif;
font-size:32px;
color:#559;
}
</style>

<script type="text/javascript">

var x=50;
var y=50;
var delay=100;

function init(){
if((x>=50)&&(y==50)){x++;}
if((x==100)&&(y>=50)){y++;}
if((x<=100)&&(y==100)){x--;}
if((x==50)&&(y<=100)){y--;}
document.getElementById('a1').style.top=y+'px';
document.getElementById('a1').style.left=x+'px';
setTimeout(function(){init()},delay);
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);

</script>

</head>
<body>

<div id="container">
<span id="a1">vb2java</span>
</div>

</body>
</html>

coothead

vb2java
10-11-2011, 10:31 PM
Hi coothead,

Nice approach! Ah yes, it is so much simpler that way. Thanks very much. :-)

coothead
10-11-2011, 11:15 PM
No problem, you're very welcome. ;)

vb2java
10-11-2011, 11:22 PM
Hello again,

Is there a way to get the following approach to work?

<script type="text/javascript">

function a1(x1){

var c=(x1);
var txt2 = document.getElementById("a1");
txt2.style.left = c;
if (x1<100) x1+=1;
setTimeout('a1('+x1+')',10);
if (x1==100){ a2(50)}
}

function a2(y1){

var c=(y1);
var txt = document.getElementById("a1");
txt.style.top = c;
if (y1<100) y1+=1;
setTimeout('a2('+y1+')',10);
if (y1==100) { a3(100)}
}

function a3(x2){

var c=(x2);
var txt = document.getElementById("a1");
txt.style.left = c;
if (x2>50) x2-=1;
setTimeout('a3('+x2+')', 10);
if (x2==50) { a4(100)}
}
function a4(y2){

var c=(y2);
var txt = document.getElementById("a1");
txt.style.top = c;
if (y2>50) y2-=1;
setTimeout('a4('+y2+')', 10);
if (y2==50) { a1(50)}
}
</script>

</head>
<body>
<p id="a1">P</p>
<script type="text/javascript">a1(50)</script>


Functions a1 and a2 execute perfectly. When function a3 is called, the code behavior breaks. I believe this is because we are trying to assign two values for txt.style.left since the a1 function is never really closed or released. In other words any time the value ".left" is below 100 (which is from function "a1") the value is incremented. Then we try to do the opposite with that same value in function a3. Now, in Visual Basic I believe I would be able to use the "Exit" statement to release the values over to the next function. How can we achieve this with javascript?

My wording in the above paragraph is a bit awkward, but I think (hope) I am getting my point accross.


Thanks for reading my post(s) :-)

vb2java
10-12-2011, 03:51 PM
Hello again!

Thank you everyone for reading this post. I found one answer to the calling functions from functions methods, titled: "In the Interest of Learning".

I found this: http://www.dynamicdrive.com/forums/showthread.php?t=40003

All I needed to do was set a variable equal to the setTimeout() method:
variable = setTimeout('a1('+x1+')',10);

And use clearTimeout(variable)

Works great!