Javascript question

RegisterRants · 12-26-2006, 06:42 PM

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 · 12-26-2006, 07:58 PM

Code:

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 · 12-26-2006, 08:09 PM

Nope. Here is your code in action:

http://discussingtech.com/spiral.html

Dan · 12-26-2006, 08:16 PM

Code:

<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 · 12-26-2006, 08:39 PM

Works. So far.

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

Dan · 12-26-2006, 08:42 PM

Previous what and next what? :X

RegisterRants · 12-26-2006, 08:45 PM

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 · 12-26-2006, 08:59 PM

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 · 12-26-2006, 09:04 PM

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 · 12-26-2006, 11:21 PM

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

Code:

<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?

12-26-2006, 06:42 PM	THREAD STARTER #1 (permalink)
RegisterRants Senior Member Join Date: Oct 2006 Location: NJ Posts: 1,152 Follow @jrberlinsky	Javascript question I would like to draw a spiral of words on-screen. Example: I want the word "Hi" to appear in a spiral, multiple times. __________________ Web Development

12-26-2006, 07:58 PM	#2 (permalink)
Dan Buy my domains. Join Date: Feb 2006 Posts: 2,796	Code: 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

12-26-2006, 08:09 PM	THREAD STARTER #3 (permalink)
RegisterRants Senior Member Join Date: Oct 2006 Location: NJ Posts: 1,152 Follow @jrberlinsky	Nope. Here is your code in action: http://discussingtech.com/spiral.html __________________ Web Development

12-26-2006, 08:39 PM	THREAD STARTER #5 (permalink)
RegisterRants Senior Member Join Date: Oct 2006 Location: NJ Posts: 1,152 Follow @jrberlinsky	Works. So far. The problem is that I dont want the previous one to disappear when the next one is drawn. __________________ Web Development

12-26-2006, 08:45 PM	THREAD STARTER #7 (permalink)
RegisterRants Senior Member Join Date: Oct 2006 Location: NJ Posts: 1,152 Follow @jrberlinsky	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. __________________ Web Development

12-26-2006, 08:42 PM	#6 (permalink)
Dan Buy my domains. Join Date: Feb 2006 Posts: 2,796	Previous what and next what? :X

12-26-2006, 08:59 PM	#8 (permalink)
Dan Buy my domains. Join Date: Feb 2006 Posts: 2,796	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.

12-26-2006, 09:04 PM	THREAD STARTER #9 (permalink)
RegisterRants Senior Member Join Date: Oct 2006 Location: NJ Posts: 1,152 Follow @jrberlinsky	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. __________________ Web Development

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)