Follow Mouse Script

[dylank]

Hey Daniweb;

Ive scoured the internet for scripts that make a <div> follow the mouse, and have found one that seems to work well. However, I want the <div> to stop moving when the CTRL or the SHIFT key is pressed, I dont care which. Hopefully, I can have a div that follows the mouse at an offset that contains some click-able items, so a menu is always by your mouse. Ive tried now more than a few times to put together a piece of code that can achieve this, but none have worked. Can somebody write a script that can achieve this, or point me in the right direction?

Thanks guys!

Current JS for mouse follow:

var divName = 'mouseFollow'; // div that is to follow the mouse
                       // (must be position:absolute)
var offX = 15;          // X offset from mouse position
var offY = 15;          // Y offset from mouse position

function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}

function follow(evt) {if (document.getElementById) {var obj = document.getElementById(divName).style; obj.visibility = 'visible';
obj.left = (parseInt(mouseX(evt))+offX) + 'px';
obj.top = (parseInt(mouseY(evt))+offY) + 'px';}}
document.onmousemove = follow;

The original code can be found at: http://javascript.about.com/library/blfollow2.htm

[Airshow]

Dylank,

Try this :

onload = function(){
	var divName = 'mouseFollow'; // div that is to follow the mouse
	                       // (must be position:absolute)
	var followDiv = document.getElementById(divName);
						   
	var offX = 15;          // X offset from mouse position
	var offY = 15;          // Y offset from mouse position

	function mouseX(evt) {
		if (evt.pageX) return evt.pageX;
		if (evt.clientX) return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft);
		return 0;
	}
	function mouseY(evt) {
		if (evt.pageY) return evt.pageY;
		if (evt.clientY) return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
		return 0;
	}

	function follow(evt) {
		evt = evt || window.event;
		if(evt.shiftKey || evt.ctrlKey) { document.onmousemove = null; }
		followDiv.style.visibility = 'visible';
		followDiv.style.left = (parseInt(mouseX(evt))+offX) + 'px';
		followDiv.style.top  = (parseInt(mouseY(evt))+offY) + 'px';
	}
	document.onmousemove = follow;
};

And with evt = evt || window.event; in follow, you can remove if (!evt) evt = window.event; from functions mouseX and mouseY. The statement does the same thing and passes the result through.

Airshow