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/dynamici...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">

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

Code:

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

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

Thread Tools

Search Thread

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

The Following User Says Thank You to jscheuer1 For This Useful Post:

Thanks

Bookmarks

Bookmarks

Posting Permissions