Solved

Javascript(mouse trailer effect )

Posted on 2000-04-02
10
229 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

 

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

734 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