PDA

View Full Version : still need help with circular text trail



andi
01-06-2005, 03:32 PM
Hi anyone who can teach a teacher
I use schoolnotes.com and I guess it's different from websites that you can create. We don't use <head> or <body> but we can add codes to enhance the appearance of the webpage. I want to add the circular text tail on mine but I haven't been able to get it to work. I set up a test webpage for anyone who is interested in trying to help a teacher. Please reply if you are up to the challenge. :)
Thanks!!
Andi

cr3ative
01-06-2005, 04:14 PM
*raises hand*

I'll have a look. Either post the address here or PM me.

cr3ative

andi
01-06-2005, 04:29 PM
THANKS!!
go to www.schoolnotes.com
click on "Edit Notes"
then enter zip: 33029
account:test1
password:test2

I appreciate your time!!
andi

cr3ative
01-06-2005, 04:41 PM
Ooh, forgot to mention:

.

Can I have a link to the script used please?
Cheers.

cr3ative
(No biscuits for you - Don't double post :))

andi
01-06-2005, 04:46 PM
oh sorry this is new for me...here is the code. The directions are to put it in the <HEAD> of the page.

(PS: I know I double posted...I did that after I read that the dynamic drive code questions shouldn't be where I put mine...like I said, this is new for me)

Thanks again!

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

cr3ative
01-06-2005, 05:01 PM
Argh. *whacks head against wall*

I see what it's doing.


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

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

<br>

Unnecessary adding of <br> to scripts.

Erm, this could take longer than expected and/or be impossible.
I'll reply if I manage to make it work.

cr3ative

cr3ative
01-06-2005, 05:03 PM
Ok, I've overcome that.

It may now be possible.

cr3ative

andi
01-06-2005, 05:06 PM
I know it's possible because I've seen other teachers' webpages with it on them. Unfortunately, I don't recall which ones :( or I would email them to find out how they did it.
Thanks again for your efforts!!
andi

cr3ative
01-06-2005, 05:07 PM
http://schoolnotes.com/33029/test1.html

*dances*

It doesn't work in FireFox, and shouldn't work at all. It's a complete disgrace that what I have done actually works (I have used invalid coding practices). But it seems to work. Odd.

Anyway, all I did was insert the script block, with "Use PRE tag" checked (that's important), but the difference was that before I inserted the code block, I placed <head> at the start and </head> at the end.

cr3ative

mwinter
01-06-2005, 05:10 PM
Argh. *whacks head against wall*

I see what it's doing.


<SCRIPT LANGUAGE="JavaScript1.2"><br>
<!--//
<br>
The simple solution[1] would be to copy the code (excluding the SGML comment delimiters which needn't be there anyway) into an external file and use


<script type="text/javascript" src="trail.js"></script>(obviously changing the filename as necessary) to include the script.

Mike


[1] Well, assuming you can upload arbitrary files. If not, you'll have to remove all carriage return/line feed combinations from the script which will require every statement to end properly with a semicolon (if that isn't the case already).

cr3ative
01-06-2005, 05:11 PM
Agreed, but I couldn't find a file upload service.
edit: No, there isn't one. That's what I tried first.

edit2: What it did have however was the option to use PRE tags, which meant it didn't process the script with <br> tags.

cr3ative

andi
01-06-2005, 05:16 PM
ok
I saw it...but now it's not there....what happened???

cr3ative
01-06-2005, 05:41 PM
You need to tick the "Use PRE tags" under the notes input box.

That's important :)

cr3ative

andi
01-06-2005, 05:50 PM
ok....we're getting closer! The problem with the pre-tag is that is messes up some of the alignment of the rest of the page....is there a way of doing it without the pre-tag?

cr3ative
01-06-2005, 05:52 PM
Uhm, no.

To align your text,<br>
Do what I am doing,<br>

When you want a new line, type <br>

cr3ative

mwinter
01-06-2005, 06:00 PM
Anyway, all I did was insert the script block, with "Use PRE tag" checked (that's important), but the difference was that before I inserted the code block, I placed <head> at the start and </head> at the end.Out of interest, did you need to do that?

Mike

andi
01-06-2005, 06:03 PM
ok, I tried that and it worked...yay.......thanks...while I've got you....when I click on pre-tag, any of my marquee texts or the ones that alternate back and forth don't move. How can I fix that? Also, with the code for the mouse effect, now there's a big white space at the top. Do you think there's a way to get rid of that? This is going to be more work than I thought :)
andi

cr3ative
01-06-2005, 06:10 PM
@andi: I think that's as functional as you'll get for that script.

@mwinter: Yes, unfortunately. It wouldn't work any other way, and it's certainly not a solution I would shout about. :( edit: Because the HTML format now looks like this:



<html>
<head>
..head content
</head>
<body>
..body content 1
<head>
..script here
</head>
..body content 2
</html>


Certainly not a good solution.

cr3ative

andi
01-06-2005, 06:15 PM
Thank you very, much for your help. You earned an A+ on your assignment! :)
I really appreciate your efforts.
andi

mwinter
01-06-2005, 06:24 PM
Yes, unfortunately. It wouldn't work any other wayIt's certainly curious that a head element is necessary...

Mike

cr3ative
01-07-2005, 03:49 PM
It is very strange. Obviously, my second attempt (after external linking was ruled out) was to insert the script in the body element - this did not want to work at the time.

cr3ative