Solved

Javascript(mouse trailer effect )

Posted on 2000-04-02
10
222 Views
Last Modified: 2012-05-04
hi
  i am looking for the code of the java script.i want the script like that where ever i take my mouse on the webpage the trail of my name will go along with the cursor.
thanx
0
Comment
Question by:kshireesh
  • 4
  • 3
  • 2
  • +1
10 Comments
 

Author Comment

by:kshireesh
ID: 2678287
Adjusted points from 50 to 100
0
 

Author Comment

by:kshireesh
ID: 2678293
Adjusted points from 100 to 200
0
 
LVL 10

Expert Comment

by:kollegov
ID: 2678531
You would find a lot of this stuff here:

http://www.dynamicdrive.com/dynamicindex13/index.html
0
 

Author Comment

by:kshireesh
ID: 2678728
i did not get the right answer what i am looking for .i am looking for a code that will me a trail or text behind my cursor ,where ever i will take my cursor on the window.
0
 
LVL 1

Accepted Solution

by:
bassque earned 200 total points
ID: 2678899
Try this code
all you will have to do is make a tiny gif each which consists of a small letter on a transparent background. replace the bullet.gif 's with your letter gifs

<html>
<head>
<title></title>
</head>
<body>
<div id="dot1" style="position: absolute; visibility: hidden; height: 11; width: 11;"><img src="bullet.gif" height=11 width=11></div>
<div id="dot2" style="position: absolute; height: 11; width: 11;"><img src="bullet.gif" height=11 width=11></div>
<div id="dot3" style="position: absolute; height: 11; width: 11;"><img src="bullet.gif" height=11 width=11></div>
<div id="dot3" style="position: absolute; height: 11; width: 11;"><img src="bullet.gif" height=11 width=11></div>
<div id="dot4" style="position: absolute; height: 11; width: 11;"><img src="bullet.gif" height=11 width=11></div>
<div id="dot5" style="position: absolute; height: 11; width: 11;"><img src="bullet.gif" height=11 width=11></div>
<div id="dot6" style="position: absolute; height: 11; width: 11;"><img src="bullet.gif" height=11 width=11></div>

<script LANGUAGE="JavaScript">
<!-- hide code

/*
Elastic Trail script (By Philip Winston @ pwinston@yahoo.com, URL:http://members.xoom.com/ebullets)
Script featured on Dynamicdrive.com
For this and 100's more DHTML scripts, visit http://dynamicdrive.com
*/


// Thanks to Troels Jakobsen <tjak@get2net.dk>
// for fix which makes it work when the page is scrolled

var nDots = 7;
if (document.all&&window.print)
document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"
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;
var GRAVITY = 50;
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;

var isNetscape = navigator.appName=="Netscape";

  // always on for now, could be played with to
  // let dots fall to botton, get thrown, etc.
var followmouse = true;

var dots = new Array();
init();

function init()
{
    var i = 0;
    for (i = 0; i < nDots; i++) {
        dots[i] = new dot(i);
    }
   
    if (!isNetscape) {
        // I only know how to read the locations of the
        // <LI> items in IE
        //skip this for now
        // setInitPositions(dots)
    }
   
    // set their positions
    for (i = 0; i < nDots; i++) {
        dots[i].obj.left = dots[i].X;
        dots[i].obj.top = dots[i].Y;
    }
   
   
    if (isNetscape) {
        // start right away since they are positioned
        // at 0, 0
        startanimate();
    } else {
        // let dots sit there for a few seconds
        // since they're hiding on the real bullets
        setTimeout("startanimate()", 2000);
    }
}



function dot(i)
{
    this.X = Xpos;
    this.Y = Ypos;
    this.dx = 0;
    this.dy = 0;
    if (isNetscape) {      
        this.obj = eval("document.dot" + i);
    } else {
        this.obj = eval("dot" + i + ".style");
    }
}


function startanimate() {      
    setInterval("animate()", 20);
}


// This is to line up the bullets with actual LI tags on the page
// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why
// Still doesn't work great
function setInitPositions(dots)
{
    // initialize dot positions to be on top
    // of the bullets in the <ul>
    var startloc = document.all.tags("LI");
    var i = 0;
    for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
        dots[i+1].X = startloc[i].offsetLeft
            startloc[i].offsetParent.offsetLeft - DOTSIZE;
        dots[i+1].Y = startloc[i].offsetTop +
            startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
    }
    // put 0th dot above 1st (it is hidden)
    dots[0].X = dots[1].X;
    dots[0].Y = dots[1].Y - SEGLEN;
}

// 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 + document.body.scrollLeft;
    Ypos = window.event.y + document.body.scrollTop;       
}

if (isNetscape) {
    document.captureEvents(Event.MOUSEMOVE);
    document.onMouseMove = MoveHandler;
} else {
    document.onmousemove = MoveHandlerIE;
}


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;
    if (followmouse) {
        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,
            (spring.Y + resist.Y)/ MASS + GRAVITY);
       
        // 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 (isNetscape) {
            height = window.innerHeight + document.scrollTop;
            width = window.innerWidth + document.scrollLeft;
        } else {      
            height = document.body.clientHeight + document.body.scrollTop;
            width = document.body.clientWidth + document.body.scrollLeft;
        }
       
        // bounce of 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;                  
        dots[i].obj.top =  dots[i].Y;            
    }
}

// end code hiding -->
</script>
</body>
</html>
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2679232
Bassque: Or just change
<div id="dot1" style="position: absolute; visibility: hidden; height: 11; width: 11;">&nbsp;</div>
<div id="dot2" style="position: absolute; height: 11; width: 11;">s</div>
<div id="dot3" style="position: absolute; height: 11; width: 11;">h</div>
<div id="dot4" style="position: absolute; height: 11; width: 11;">i</div>
<div id="dot5" style="position: absolute; height: 11; width: 11;">r</div>
<div id="dot6" style="position: absolute; height: 11; width: 11;">e</div>
<div id="dot7" style="position: absolute; height: 11; width: 11;">e</div>
<div id="dot8" style="position: absolute; height: 11; width: 11;">s</div>
<div id="dot9" style="position: absolute; height: 11; width: 11;">h</div>

..
..
var nDots = 9;

The page has by the way two div3's ;-)
0
 
LVL 10

Expert Comment

by:kollegov
ID: 2679846
Here is my version :)

<html>
<head>
<script>
/* script bt Virtual_Max (http://come.to/vmax)
 * free for use untill this statement present in all copies
 */
var ex=0;
var ey=-500;
var cnt=0;
var text="Hello World"

parts = new Array();
function getDivWidth(o)
 {if(document.layers) return o.clip.width;
  if(document.all)    return o.scrollWidth;
 }

function makeDiv(dx,dy,html,classname,bg)
{this.x=0;
 this.y=-500;

 var idd=  'DD'+cnt+'l';
 var s='';
 s+='<div ID="'+idd+'" class="positioned"><center>'+html+'</center></div>'
 document.writeln(s);
 this.o=null;
 if(document.layers)
    {this.o=document[idd];
    }
 if(document.all)    
    {this.o=document.all[idd];
    }

 cnt++;
}

function moveHandler(e)
{if(e)
  {ex=e.pageX;
   ey=e.pageY;
   return routeEvent(e);
  }
 if(event)
  {ex=event.clientX+window.document.body.scrollLeft;
   ey=event.clientY+window.document.body.scrollTop;
   return true;
  }
}

function moveDiv(o,x,y)
 {var d;
  x=Math.round(x);
  y=Math.round(y);
  if(document.layers){
    o.moveTo(x,y);
  }
  if(document.all)                
    {if(x+o.scrollWidth+10>document.body.clientWidth+document.body.scrollLeft)   x=document.body.clientWidth+document.body.scrollLeft-o.scrollWidth-10;
     if(y+o.scrollHeight+10>document.body.clientHeight+document.body.scrollTop)  y=document.body.clientHeight+document.body.scrollTop-o.scrollHeight-10;
     o.style.pixelLeft=x;
     o.style.pixelTop=y;
    }
 }

var psec=-1;
function doMove()
{var cx=ex;  
 var cy=ey;
 var dx=15
 for(var i=0;i<text.length;i++)
   {p=parts[i];
    p.x+=(cx-p.x)*0.5;
    p.y+=(cy-p.y)*0.5;
    cx=p.x;
    cy=p.y;
    moveDiv(p.o, cx+dx, cy);
    dx+=getDivWidth(p.o)
   }
}


function setUp()
{s='<style>.positioned{position:absolute;'
 s+='top:-200;width:1;height:1;z-Index:100;}</style>';
 document.writeln(s);

 for(var i=0;i<text.length;i++)
   {parts[i]=new makeDiv(i*8,0,text.substring(i,i+1));}

 if(document.layers)
   {window.captureEvents(Event.MOUSEMOVE);}
   {window.onmousemove=moveHandler;}
 if(document.all)
   {document.onmousemove=moveHandler;}
 setInterval('doMove()',25);
}
</script>
</head>

<body >
<script>
 setUp()
</script>
</body>
</html>


All you need is to define
var text = "With Anything you like!"

Virtual_Max
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2679881
Very nice!!!

Michel
0
 
LVL 10

Expert Comment

by:kollegov
ID: 2680097
It's more problems to fix it for MIE :)
As soon as I changed to relative clipping stopped working! Thus I changed clipping to changing width...
One more problem remains unsolved ...
In MIE <div> act as linebreaks..
It's not a problem if this will be nested somewhere in table, but makes a bit wired positioning inside text.

-----progressbar.js-----
/* CrossBrowser progress bar
 * copyright Virtual_Max, 2000
 * http://come.to/vmax
 * Can be used/modified absolutely free untill this
 * statement presents in all copies and derivatives
 */

var barw;
var bgcolor;

function progressShow(vis)
 {
  if(document.all)
   {dddd=document.all['pbar'].style;
    dddd.visibility = vis ? "visible":"hidden";
   }
  if(document.layers)
   {dddd=document.wrapper.document['pbar'];
    dddd.visibility = vis ? "show":"hide";
   }
 }

function setupProgressBar(top,left,width,color){

s='<style>'

if(document.layers){
 tag='layer';
 s+='#pbar{width:'+width+';position:absolute;top:0;left:0;';
}

else{
 tag='div';
 s+='#pbar{width:'+width+';position:relative;top:0;left:0;';
}

s+='background-color:'+color+';clip:rect(0,0,20,0);}</style>';
document.writeln(s);

s='';
if(document.layers){
  s+='<ilayer ID="wrapper" height=25 width='+width+'>';
}

s+='<'+tag+' ID="pbar" width='+width+'></'+tag+'>';

if(document.layers) {
  s+='<spacer type="block" width='+width+' height=20>';
  s+='<ilayer>'
}


document.writeln(s);

barw=width;
bgcolor=color;
}

function showProgress(n){
 if(document.all){
  o=document.all['pbar'];
  w=Math.floor(barw*n);
  // what idot invented this order of clip ???
  // top,right,bottom,left
  o.style.clip="rect(0,"+w+",10,0)";
  o.style.width=w;
 }
 if(document.layers){
  o=document.wrapper.document['pbar'];
  w=Math.floor(barw*n);
  o.clip.width=w;
  o.bgColor=bgcolor
 }
}
------------


<html>
<head>
<script src="progressbar.js"></script>
</head>
<script>
 ims = new Array();

//preload images
 function startImageLoader(){
   args = startImageLoader.arguments
   for(var i=0;i<args.length;i++){
     ims[i]=new Image();
     ims[i].errored=false;
     ims[i].onerror=new Function("ims["+i+"].errored=true");
     ims[i].src=args[i];
   }
  updateProgress();
 }

 function updateProgress(){
   var cnt=0;
   for(var i=0;i<ims.length;i++){
     if(ims[i].complete || ims[i].errored) cnt++;
     
   }
   if(ims.length>0){
     showProgress(1.0*cnt/ims.length);
     window.status=""+cnt;
   }
   if(cnt<ims.length){
    setTimeout("updateProgress()",200);
   }
   else{
      onComplete();
   }
 }

function onComplete(){
   // do here whatever you need when
   // loading complete
   alert("Done!");
   progressShow(false);
}

</script>

<body>
loading progress:
<script>
/* set bar with top,left,width,color */
setupProgressBar(100,20,200,"#000080");
//initial state
showProgress(0);

//preload this images
//you can specify as much as needed

startImageLoader(
"http://www.geocities.com/virtual_max/vmaxtree/icons/arrow_gold.gif",
"http://www.geocities.com/virtual_max/vmaxtree/icons/arrow_cyan.gif",
"http://www.geocities.com/virtual_max/vmaxtree/icons/movie_gray.gif",
"http://www.geocities.com/virtual_max/vmaxtree/icons/folder_cyan.gif",
"http://www.geocities.com/virtual_max/vmaxtree/icons/ofolder_cyan.gif",
"http://www.geocities.com/virtual_max/vmaxtree/icons/folder_mokko.gif"
);
</script>
isn't it cool ????
</body>

</html>

0
 
LVL 10

Expert Comment

by:kollegov
ID: 2680139
Opppppsss, I again messed up windows!!!!
Last comment was for other quiestion :(
Sorry...
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now