Elastic Trail and Frameset

[arcane0wl]

I noticed that the code for Elastic Trail ("http://www.dynamicdrive.com/dynamicindex13/trailer2.html") calls you to put the code directly after the body tag. But what if your page is built with frameset tags and not a body tag? Is this even possible?

[jscheuer1]

You would need to put it on each page within the frameset and, even then the balls or whatever image you use would bounce off of the walls of the frames, not of the window itself. See also:

http://www.dynamicdrive.com/forums/s...ad.php?t=17152

for a way to link the script to multiple pages. Alternatively, you could use iframes instead of frames, then you could have the script just on the top page. Or, you could have it be active only in the larger frame(s) in the frameset.

[arcane0wl]

okay, thank you so much!

[jscheuer1]

You're welcome and I just thought that I would add that, if you are using other scripts, the elastic cursor exposes many variables to the global object and may therefore conflict with other variables from other scripts. I have two versions of the external script that I've been playing with that do not do this. Here is one:

/*
Elastic Trail script (By Philip Winston @ pwinston@yahoo.com, URL: http://www.geocities.com/pwinston/)
TOS featured on Dynamicdrive.com
For this and 100's more DHTML scripts, visit http://dynamicdrive.com
Updated by jscheuer1 in http://dynamicdrive.com/forums for modern browsers & DOCTYPES
*/

function elastic_trail(){

with(document){
write('<div class="dot" id="dot0">\n')
write('<img src="bullet.gif" height="11" width="11">\n')
write('</div>\n')
write('<div class="dot" id="dot1">\n')
write('<img src="bullet.gif" height="11" width="11">\n')
write('</div>\n')
write('<div class="dot" id="dot2">\n')
write('<img src="bullet.gif" height="11" width="11">\n')
write('</div>\n')
write('<div class="dot" id="dot3">\n')
write('<img src="bullet.gif" height="11" width="11">\n')
write('</div>\n')
write('<div class="dot" id="dot4">\n')
write('<img src="bullet.gif" height="11" width="11">\n')
write('</div>\n')
write('<div class="dot" id="dot5">\n')
write('<img src="bullet.gif" height="11" width="11">\n')
write('</div>\n')
write('<div class="dot" id="dot6">\n')
write('<img src="bullet.gif" height="11" width="11">\n')
write('</div>\n')
}

var nDots = 7;

var Xpos = 0;
var Ypos = 0;

  // fixed time step, no relation to real time
var DELTAT = .01;
  // size of one spring in pixels
var SEGLEN = 10;
  // spring constant, stiffness of springs
var SPRINGK = 10;
  // all the physics is bogus, just picked stuff to
  // make it look okay
var MASS = 1;
// Positive XGRAVITY pulls right, negative pulls left
// Positive YGRAVITY pulls down, negative up
var XGRAVITY = 0;
var YGRAVITY = 50;
// RESISTANCE determines a slowing force proportional to velocity
var RESISTANCE = 10;
  // stopping criterea to prevent endless jittering
  // doesn't work when sitting on bottom since floor
  // doesn't push back so acceleration always as big
  // as gravity
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
  // BOUNCE is percent of velocity retained when 
  // bouncing off a wall
var BOUNCE = 0.75;

/////////////////Stop Editing the Script///////////////

var iecompattest=function(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

var PX = document.layers? '' : 'px';

elastic_trail.prototype.dot=function(i) 
{
    this.X = Xpos;
    this.Y = Ypos;
    this.dx = 0;
    this.dy = 0;
    if (document.layers) 	
       this.obj = document['dot' + i];
    else if (document.all)
       this.obj = document.all['dot' + i].style;
    else if (document.getElementById)
       this.obj = document.getElementById('dot' + i).style;
    else
    return;
}

var dots = new Array();

    for (var i = 0; i < nDots; i++)
        dots[i] = new this.dot(i);    
    
    // set their positions
    for (i = 0; i < nDots; i++) {
        dots[i].obj.left = dots[i].X+PX;
        dots[i].obj.top = dots[i].Y+PX;
    }
    var cacheobj=this;
        setInterval(function(){cacheobj.animate();}, 20);

// just save mouse position for animate() to use
function MoveHandler(e)
{
    Xpos = e.pageX;
    Ypos = e.pageY;	  
    return true;
}

// just save mouse position for animate() to use
function MoveHandlerIE() {
    Xpos = window.event.x + iecompattest().scrollLeft;
    Ypos = window.event.y + iecompattest().scrollTop;	  
}

if (typeof window.event!='undefined')
    document.onmousemove = MoveHandlerIE;
else {
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = MoveHandler;
}


elastic_trail.prototype.vec=function(X, Y)
{
    this.X = X;
    this.Y = Y;
}

// adds force in X and Y to spring for dot[i] on dot[j]
elastic_trail.prototype.springForce=function(i, j, spring)
{
    var dx = (dots[i].X - dots[j].X);
    var dy = (dots[i].Y - dots[j].Y);
    var len = Math.sqrt(dx*dx + dy*dy);
    if (len > SEGLEN) {
        var springF = SPRINGK * (len - SEGLEN);
        spring.X += (dx / len) * springF;
        spring.Y += (dy / len) * springF;
    }
}


elastic_trail.prototype.animate=function() {	
    // dots[0] follows the mouse,
    // though no dot is drawn there
    var start = 0;
        dots[0].X = Xpos;
        dots[0].Y = Ypos;	
        start = 1;
    
    for (var i = start ; i < nDots; i++ ) {
        
        var spring = new this.vec(0, 0);
        if (i > 0) {
            this.springForce(i-1, i, spring);
        }
        if (i < (nDots - 1)) {
            this.springForce(i+1, i, spring);
        }
        
        // air resisitance/friction
        var resist = new this.vec(-dots[i].dx * RESISTANCE,
            -dots[i].dy * RESISTANCE);
        
        // compute new accel, including gravity
        var accel = new this.vec((spring.X + resist.X)/MASS + XGRAVITY,
            (spring.Y + resist.Y)/ MASS + YGRAVITY);
        
        // compute new velocity
        dots[i].dx += (DELTAT * accel.X);
        dots[i].dy += (DELTAT * accel.Y);
        
        // stop dead so it doesn't jitter when nearly still
        if (Math.abs(dots[i].dx) < STOPVEL &&
            Math.abs(dots[i].dy) < STOPVEL &&
            Math.abs(accel.X) < STOPACC &&
            Math.abs(accel.Y) < STOPACC) {
            dots[i].dx = 0;
            dots[i].dy = 0;
        }
        
        // move to new position
        dots[i].X += dots[i].dx;
        dots[i].Y += dots[i].dy;
        
        // get size of window
        var height, width;
        if (window.innerWidth) {
            height = window.innerHeight + window.pageYOffset;
            width = window.innerWidth + window.pageXOffset;
        } else {	
            height = iecompattest().clientHeight + iecompattest().scrollTop-8;
            width = iecompattest().clientWidth + iecompattest().scrollLeft;
        }
        
        // bounce off 3 walls (leave ceiling open)
        if (dots[i].Y >=  height - DOTSIZE - 1) {
            if (dots[i].dy > 0) {
                dots[i].dy = BOUNCE * -dots[i].dy;
            }
            dots[i].Y = height - DOTSIZE - 1;
        }
        if (dots[i].X >= width - DOTSIZE) {
            if (dots[i].dx > 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = width - DOTSIZE - 1;
        }
        if (dots[i].X < 0) {
            if (dots[i].dx < 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = 0;
        }
        
        // move img to new position
        dots[i].obj.left = dots[i].X+PX;			
        dots[i].obj.top =  dots[i].Y+PX;		
    }
}
}
new elastic_trail();

[arcane0wl]

Okay, I dont know if I am just computer illiterate with iframes but when my mouse goes over the iframe, the trail stays where the mouse was last on the page. Can this be fixed?

[jscheuer1]

I hadn't considered that but, of course it makes perfect sense. When the cursor moves over the iframe, it no longer is over the page with the trail script on it. I'm not sure if I can come up with a solution for that as I think it would be a major project and I don't really have the time for it right now. But, I will play with it and see.