Manipulating Element Positions
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 :-)
CSS Codes
Reply With Quote
Bookmarks