PDA

View Full Version : Getting a div block to follow the mouse

zpagra
09-08-2002, 08:55 PM
This is the code for a mouse following script.
I've tried loads of things, but it won't work:

<DIV ID=d STYLE="POSITION: absolute; WIDTH: 30px; HEIGHT: 30px; BACKGROUND-COLOR: red;"></DIV>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- HIDE --
var go;
var mx;
var my;

if(document.all){
document.onMouseMove = init;
}

function init(){
var ex = event.clientX;
var ey = event.clientY;

var dl = parseInt(document.d.style.posleft);
var dt = parseInt(document.d.style.postop);

var dx = Math.round((ex - dl) / 20);
var dy = Math.round((ey - dt) / 20);

var mx = dl + dx;
var my = dt + dy;
go = window.setInterval("move()", "50");
}

function move(){
document.d.style.posleft = mx+ "px";
document.d.style.postop = my+ "px";
}
// -- HIDE -->
</SCRIPT>

I just want this to WORK! But it won't.
The red div block should just move to the mouse position and take 1 second to do it - faster movement for longer distances.

I'm using IE5, but would like it to work in IE4.
Any Suggestions?
nolachrymose
09-08-2002, 10:03 PM
<div id="follower" style="position: absolute; width: 30px; height: 30px; background-color: red;"></div>
<script type="text/javascript">
document.onmousemove = moveFollower;
function moveFollower(evt) {
var e = new Object();
e.clientX = (typeof evt.clientX != "undefined") ? evt.clientX : event.x;
e.clientY = (typeof evt.clientY != "undefined") ? evt.clientY : event.y;
var obj = document.getElementById("follower");
obj.style.left = e.clientX + 5;
obj.style.top = e.clientY + 5;
}
</script>

Note: works in IE 5+ and NS6+!

Hope that helps!

Happy coding! :)
zpagra
09-09-2002, 07:26 PM
Thanks very much.
Vladdy
09-09-2002, 09:02 PM
Originally posted by nolachrymose
Note: works in IE 5+ and NS6+!


ONLY when the page is not scrolled!!!
zpagra
09-10-2002, 08:32 PM
Thanks.
I just managed to create the script i wanted.
It doesn't work perfectly, but here's the source code if anyone wants it:



<HTML>
<HEAD><TITLE>Moving Element</TITLE>
</HEAD>
<BODY>
<div id="block" style="position: absolute; left: 100px; top: 100px; width: 30px; height: 30px; background-color: red;"></div>
<SCRIPT LANGUAGE=JAVASCRIPT>
<!-- HIDE --
/*
This script has a freeness to it so that the moving element does not snap directly
to your cursor, which can be annoying.

Curve shaped paths can be accomplished by varying the x and y movement insensitivity
variables. These variables are also twice the distance away from the cursor the element
must stay, in pixels.

The script also moves the element to the bottom right quadrant of where the cursor is,
faster than it does in the top left quadrant.
*/

// Try using different values for curve-shaped paths
var xs = 50; // X-movement insensitivity - slowness
var ys = 5; // y-movement insensitivity - slowness
var rr = 1; // refresh-rate (ms)


// Please leave the rest, unless you comment your changes

var go;
var ex;
var ey;
var cx;
var cy;

if(document.all){
document.onmousemove = init;
}

function init(){
ex = event.clientX;
ey = event.clientY;
go = window.setInterval("moveit(ex, ey)", rr);
}

function moveit(cx, cy){
var bl = document.getElementById("block").style;
var bx = parseInt(bl.left);
var by = parseInt(bl.top);

var a = (cx - bx) / xs;
var b = (cy - by) / ys;

if(a < 1 && a > 0){
a = 1;
}
else if(a < -1 && a < 0){
a = -1;
}
if(b < 1 && b > 0){
b = 1;
}
else if(b < -1 && b < 0){
b = -1;
}

c = Math.ceil(a);
d = Math.ceil(b);

var e = (bx + (c));
var f = (by + (d));

bl.left = e+ "px";
bl.top = f+ "px";
}

// -- END -->
</SCRIPT>

</BODY>
</HTML>


But this one only works in IE5