Javascript question

[RegisterRants]

I would like to draw a spiral of words on-screen. Example: I want the word "Hi" to appear in a spiral, multiple times.

 

[Dan]

function spiral() {
	document.getElementById('spiral').style.top = (Math.sin(i)*10);
	document.getElementById('spiral').style.left = (Math.cos(i)*10);
	i += 1;
	setTimeout('spiral()',50)
}

That's the best I could do :x

 

[RegisterRants]

Nope. Here is your code in action:

http://discussingtech.com/spiral.html

 

[Dan]

<div id="spiral" style="position: absolute; top: 0; padding-left: 30px;">yo</div>
<script type="text/javascript">
var i = 0;
function spiral() {
	document.getElementById('spiral').style.top = (Math.sin(i)*10);
	document.getElementById('spiral').style.left = (Math.cos(i)*10);
	i += 1;
	setTimeout('spiral()',50)
}

window.onload = function () { spiral(); }
</script>

 

[RegisterRants]

Works. So far.

The problem is that I dont want the previous one to disappear when the next one is drawn.

 

[Dan]

Previous what and next what? :X

 

[RegisterRants]

Your script makes the dancing word. I dont want it to dance, I want it to create a spiral. In other words, I want the text/images to stay still once it is generated.

 

[Dan]

Can you explain what you want?

You are saying barely anything and when I do what you ask for, there's a whole new part of something you want it to do that you've never said before.

 

[RegisterRants]

Im trying to explain this...its a bit difficult to explain. Im sorry if it was phrased wrong before.

Your code, shown in action here, has the word 'yo' move around in what appears to be a spiral. However, your code is written so that the actual div moves. What I need is something that can create another <div> with this new positioning, and do that multiple times, so that the word 'yo' does not disappear every time.

 

[RegisterRants]

I think I almost have it

Here is the code I have, the result can be viewed at http://www.domainrealty.info/forum/spiral.html

<center><div id="spiral0" style="position: absolute; top: 0; padding-left: 300px; padding-top: 300px;"><div id="contain"></div>yo</div></center>
<script type="text/javascript">
var i = 0;
var divs = new Array();
var x = 0;
function spiral() {
	for(x = 0;x <= divs.length;x++) {
		document.getElementById('spiral'+x).style.top = (Math.sin(divs[x])*100);
		document.getElementById('spiral'+x).style.left = (Math.cos(divs[x])*100);
	}
	y = x + 1;
	document.getElementById('contain').innerHTML += '<div id="spiral'+y+'">yo<\/div>';
	document.getElementById('spiral'+y).style.top = (Math.sin(i)*100);
	document.getElementById('spiral'+y).style.left = (Math.cos(i)*100);
	divs[y] = i;
	i += 1;
	setTimeout('spiral()',500)
}

window.onload = function () { spiral(); }
</script>

What am I doing wrong?