Menu
Hello all,
I am moving text around using “getElementById” with CSS:
#elementID {position: absolute; top…} Ok, I’ll give you the code in just a second. Well, I wanted to rotate text in a circle, but with my elementary javascript experience, I’d better stick to straight lines for now. First, I tried writing 4 separate functions for each direction. We’ll start 50px from left, increase the left by one until we get to 150, then increase top by one, and go around the square-like coordinates. I was getting some strange behavior calling one function from another. I am sure we could do that but I went a different route and tried this:
<!DOCTYPE HTML PUBLIC “-//w3c/DTD HTML 4.01 TRANSITIONAL//EN”
“
<html>
<head>
<title></title>
<style>
#a2{
position: absolute;
left: 50px;
top: 0px;
font-size: 32px;
color: #555599;
}
</style>
<script type=”text/javascript”>
function a2over(x1, y1, x2, y2){
var c=(x1);
var txt2 = document.getElementById(“a2”);
txt2.style.left = c;
if (x1<150) x1+=1;
setTimeout(‘a2over(‘+x1+’)’,10);
while (x1==150) {
var d=(y1);
var txt3 = document.getElementById(“a2”)
txt3.style.top = d;
if (y1<150) d+=1;
setTimeout(‘a2over(‘+y1+’)’, 10);
}
}
</script>
</head>
<body>
<p id=”a2″>P</p>
<script type=”text/javascript”>a2over(50)</script>
</body>
</html>
Would somebody be so kind as to shine some light on the best way to accomplish what I am doing here?
Also, if you wouldn’t mind telling me why we get the “invalid argument” error at line: “txt3.style.top = d;” , I’d really appreciate it.
Thanks 🙂