Circling Text Trail

**andi** · 01-04-2005, 03:39 PM

Hi
I use schoolnotes.com for my web page. I wanted to add the circling text trail. On the directions for implementing the circling text trail it says to place it in the head of the page. "Head" is not needed for Schoolnotes.com. I tried just putting the code at the beginning of the page...that doesn't work. I tried <head> and </head> before and after it...that doesn't work. Can anyone offer help??

**Nikkolus** · 01-04-2005, 08:51 PM

Hmm, I went to http://www.schoolnotes.com and it looks as if you have <head> inside there already. It also worked fine when I copied the page and put it in my own directory.

http://jamminraccoons.net/nikkolus/schoolnotes.html (I didn't copy the images)

**andi** · 01-04-2005, 09:08 PM

Nikkolus
You just copied the code and it worked??? You did nothing else??

**Nikkolus** · 01-04-2005, 09:09 PM

Nope, nothing else at all. I put the script inside <head> after </title>

**andi** · 01-04-2005, 09:13 PM

ok...can you please tell me exactly what you typed? I've been so frustrated with this
thanks! andi

**Nikkolus** · 01-04-2005, 09:16 PM

Here's the script:

Code:

<SCRIPT LANGUAGE="JavaScript1.2">
<!--//

//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more

// your message here
var msg='Dynamic Drive!';

var font='Verdana,Arial';
var size=3; // up to seven
var color='#000000';

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=.2;

// Alter no variables past here!, unless you are good
//---------------------------------------------------

var ns=(document.layers);
var ie=(document.all);
var msg=msg.split('');
var n=msg.length; 
var a=size*15;
var currStep=0;
var ymouse=0;
var xmouse=0;
var scrll=0;
var props="<font face="+font+" size="+size+" color="+color+">";

if (ie)
window.pageYOffset=0

// writes the message
	if (ns){
	for (i=0; i < n; i++)
		document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
	}
	if (ie){
		document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
		for (i=0; i < n; i++)
			document.write('<div id="iemsg" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center;font-weight:regular;cursor:default">'+props+msg[i]+'</font></div>');
			document.write('</div></div>');
	}
	(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
	ymouse = (ns)?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
	xmouse = (ns)?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
y=new Array();
x=new Array();
Y=new Array();
X=new Array();
for (i=0; i < n; i++){
	y[i]=0;
	x[i]=0;
	Y[i]=0;
	X[i]=0;
}

function makecircle(){ // rotation properties
if (ie) outer.style.top=document.body.scrollTop;
currStep-=rotation;
	for (i=0; i < n; i++){ // makes the circle
		var d=(ns)?document.layers['nsmsg'+i]:iemsg[i].style;
		d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15;
		d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2; // remove *2 for just a plain circle, not oval
	}
}

function drag(){ // makes the resistance
	scrll=(ns)?window.pageYOffset:0;
	y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
	x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
	for (var i=1; i < n; i++){
		y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
		x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

	}
	makecircle();
	// not rotation speed, leave at zero
	setTimeout('drag()',10);
}
if (ns||ie)window.onload=drag;

// -->
</SCRIPT>

I positioned it right after your code;

HTML Code:

<HTML><HEAD><TITLE>SchoolNotes</TITLE>

You should be able to see it in my source.

**andi** · 01-04-2005, 09:30 PM

Nikkolus
Ok, I tried it...still doesn't work... could you do me a huge favor....I set up an account on schoolnotes for you to try it out for me
Zip code 33029
account name test1
password test2

Can you put it there to see if it works for you THANKS!!!!
andi