Results 1 to 2 of 2

Thread: Will this script work in an external file?

  1. #1
    Join Date
    Feb 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Will this script work in an external file?

    1) Script Title: Elastic Trail Script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ailer2_dev.htm

    3) Describe problem: There is no problem with the script
    itself. My problem is that i want to put this cursor trail on
    several pages of my website, without having to put the
    script on every single page. I have tried putting the script
    in an external js file, but i couldn't get it to work.
    So, i need to know if that script can be put in a js file, or an
    htm file, and what i would need to do, to make it work.
    Thanks...KaTT....

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,997
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    demo page:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title>Elastic Trail Script - Updated NS4+ (to NS7.2) IE4+ FF1.0.7+ Opera8+</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="elastic.css" type="text/css">
    </head>
    <body>
    <script type="text/javascript" src="elastic.js">
    /*
    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
    Originally and still good in IE4+, early Netscape
    */
    </script>
    
    
    </body>
    </html>
    elastic.css
    Code:
    .dot {
    position: absolute;
    height: 11px;
    width: 11px;
    }
    #dot0 {
    visibility: hidden;
    }
    elastic.js
    Code:
    /*
    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
    Originally and still good in IE4+, early Netscape
    */
    
    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///////////////
    
    function iecompattest(){
    return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
    }
    
    var PX = document.layers? '' : 'px';
    
    var dots = new Array();
    
        for (i = 0; i < nDots; i++)
            dots[i] = new 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;
        }
            setInterval("animate()", 20);
    
    
    
    function dot(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;
    }
    
    
    // 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;
    }
    
    
    function vec(X, Y)
    {
        this.X = X;
        this.Y = Y;
    }
    
    // adds force in X and Y to spring for dot[i] on dot[j]
    function springForce(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;
        }
    }
    
    
    function animate() {	
        // 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 (i = start ; i < nDots; i++ ) {
            
            var spring = new vec(0, 0);
            if (i > 0) {
                springForce(i-1, i, spring);
            }
            if (i < (nDots - 1)) {
                springForce(i+1, i, spring);
            }
            
            // air resisitance/friction
            var resist = new vec(-dots[i].dx * RESISTANCE,
                -dots[i].dy * RESISTANCE);
            
            // compute new accel, including gravity
            var accel = new 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;		
        }
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •