PDA

View Full Version : How do I get the "Circling text trail" script to work with Html-kit?



PlayerArc
09-11-2008, 07:49 PM
1) Script Title:
Circling text trail
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex13/circletext.htm
3) Describe problem:
I need help in getting this script to work for a web site I am creating:

<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='Andrew/'s Thrill Zone/: For all of your thrill ride and roller coaster reviews';

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=.3;

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

jscheuer1
09-12-2008, 02:39 PM
That script is outdated. Your message is too long, and its string syntax causes errors. Use this version:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<script type="text/javascript">

/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// your message here
var msg = "Andrew's Thrill Zone & Reviews";

var font = "'comic sans ms', verdana, arial";
var size = 24; // number of pixels size for font
var color = "#000000";

//This is the multiplier for the diameter
var diameter = 10;

// 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 = 0.3;

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

// The larger this divisor is, the closer together the letters will be
var letter_spacing = 5;

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

if (!window.addEventListener && !window.attachEvent || !document.getElementById) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), inv = 20, unv = inv,
currStep = 20, ymouse = a + 20, xmouse = a * 2 + 20, y = [], x = [], Y = [], X = [],
props = '<span style="font-family:' + font + ';font-size:' + size + 'px;color:' + color + ';">',

mouse = function(e){
if (!e || isNaN(e.pageY)) noPY.approved = true;
ymouse = e && !isNaN(e.pageY)? e.pageY + 20 : event.y; // y-position
xmouse = e && !isNaN(e.pageX)? e.pageX + 20 : event.x - 20; // x-position
},

makecircle = function(){ // rotation properties
if(noPY.approved) noPY();
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = y[i] + a * Math.sin((currStep + i) / letter_spacing) - 15 + 'px';
d.left = x[i] + a * Math.cos((currStep + i) / letter_spacing) * 2 + 'px'; // remove * 2 for just a plain circle, not oval
};
},

drag = function(){ // makes the resistance
if(abstime.l && abstime.l > 0)
abstime(abstime.a || false);
y[0] = Math.round(Y[0] += ((ymouse) - Y[0]) * speed);
x[0] = Math.round(X[0] += ((xmouse) - X[0]) * speed);
for (var i = n; i > 0; --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();
setTimeout(drag, unv);
},

noPY = function(){
var b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
s = document.getElementById('outer').style;
s.top = b.scrollTop + 'px';
s.left = b.scrollLeft + 'px';
},

abstime = function(be){
abstime.l--;
if(be) abstime.b = new Date();
else abstime.e = new Date();
if (abstime.b && abstime.e && abstime.l && abstime.l > 0){
abstime.ms = Math.abs(abstime.b.valueOf() - abstime.e.valueOf());
unv = abstime.ms > inv? unv - 1 : abstime.ms < inv? unv + 1 : unv;
abstime.ar[abstime.ar.length] = abstime.ms;
}
else if(abstime.ms) unv = Math.round(eval(abstime.ar.join('+')) / abstime.ar.length);
abstime.a = !abstime.a;
};

abstime.l = 100;
abstime.ar = [];

// writes the message & sets initial values for positioning arrays
document.write('<div id="outer" style="position:absolute;top:0;left:0;z-index:30000;"><div style="position:relative;">');
for (var i = n; i > -1; --i){
document.write('<div id="iemsg' + i + '" style="position:absolute;top:0;left:0;height:' + a +
'px;width:' + a + 'px;text-align:center;font-weight:normal;cursor:default;">' + props + msg[i] +
'<\/span><\/div>'); y[i] = x[i] = Y[i] = X[i] = 0;
};
document.write('<\/div><\/div>');

if (window.addEventListener){
window.addEventListener('load', drag, false);
document.addEventListener('mousemove', mouse, false);
}
else if (window.attachEvent){
window.attachEvent('onload', drag);
document.attachEvent('onmousemove', mouse);
};

})();

</script>
</body>
</html>

There could be other problems.

PlayerArc
09-14-2008, 06:12 PM
Thank you for helping me with the "Circling text trail" problem jscheuer1!