Hi folks! I want to move a div according to client's mouse X,Y so I wrote that: <script> function mouseXY() { var X = event.clientX; var Y = event.clientY; document.getElementById("movingDiv").style.top=X; document.getElementById("movingDiv").style.left=Y; } window.onload=mouseXY; </script> </head> <body onmousemove="javascript:mouseXY();"> <div id="movingDiv" style="top=0;left=0;position:absolute;border-color:#000000;border:groove; width:250px;height:96px;background-color:#CCCCCC" onClick="javascript:this.style.display='none';"> </body> HTML: Well, the div moves but its not attached to the mouse X and Y. What can I do? Thanks.
The .top and .left values are for the div, i.e. they will be relative to where that div is already on the browser's display (i.e. not the whole screen!!), and if the CSS is set to relative/absolute etc etc. You need to work out the screen coordinates for the mouse, and where the browser's display is relative to the screen.
I agree with MattD to an extent. I would recommend putting that div in another div...for example <div id="interface"> <div id="movingDiv"> </div> </div> where #interface is positioned relative with a top and left of 0. You will then set movingDiv to be absolutely positioned (which you are doing already) - then get the mouse position. I got this from a search, here goes: *************************************************** <!-- ============================================================ Capturing The Mouse Position in IE4-6 & NS4-6 (C) 2000 www.CodeLifter.com Free for all users, but leave in this header //--> <html> <body> <!-- Part One: Set up a form named "Show" with text fields named "MouseX" and "MouseY". Note in the getMouseXY() function how fields are addressed, thus: document.FormName.FieldName.value //--> <form name="Show"> <input type="text" name="MouseX" value="0" size="4"> X<br> <input type="text" name="MouseY" value="0" size="4"> Y<br> </form> <!-- Part Two: Use JavaScript ver 1.2 so older browsers ignore the script. The <script> must be *after* the <form> -- since the form and fields must exist *prior* to being called in the script. //--> <script language="JavaScript1.2"> <!-- // Detect if the browser is IE or not. // If it is not IE, we assume that the browser is NS. var IE = document.all?true:false // If NS -- that is, !IE -- then set up for mouse capture if (!IE) document.captureEvents(Event.MOUSEMOVE) // Set-up to use getMouseXY function onMouseMove document.onmousemove = getMouseXY; // Temporary variables to hold mouse x-y pos.s var tempX = 0 var tempY = 0 // Main function to retrieve mouse x-y pos.s function getMouseXY(e) { if (IE) { // grab the x-y pos.s if browser is IE tempX = event.clientX + document.body.scrollLeft tempY = event.clientY + document.body.scrollTop } else { // grab the x-y pos.s if browser is NS tempX = e.pageX tempY = e.pageY } // catch possible negative values in NS4 if (tempX < 0){tempX = 0} if (tempY < 0){tempY = 0} // show the position values in the form named Show // in the text fields named MouseX and MouseY document.Show.MouseX.value = tempX document.Show.MouseY.value = tempY return true } //--> </script> </body> </html> *************************************************** It's free to use - but you have to keep the header -
<html> <head> <script type="text/javascript"> var IE = document.all ? true : false if (!IE) document.captureEvents(Event.MOUSEMOVE) // Set-up to use getMouseXY function onMouseMove document.onmousemove = getMouseXY; // Temporary variables to hold mouse x-y pos.s var tempX = 0; var tempY = 0; // Main function to retrieve mouse x-y pos.s function getMouseXY(e) { if (IE) { // grab the x-y pos.s if browser is IE tempX = event.clientX + document.body.scrollLeft; tempY = event.clientY + document.body.scrollTop; } else { // grab the x-y pos.s if browser is NS tempX = e.pageX; tempY = e.pageY; } // catch possible negative values in NS4 if (tempX < 0) { tempX = 0 } if (tempY < 0) { tempY = 0 } document.getElementById("movingDiv").style.top=tempY-200; document.getElementById("movingDiv").style.left=tempX-200; } window.onload=mouseXY; </script> </head> <body> <div id="movingDiv" style="top=0;left=0;position:absolute;border-color:#000000;border:groove; width:250px;height:96px;background-color:#CCCCCC" onClick="javascript:this.style.display='none';"> </body> </html>
Hi guys, i am a total noob at javascript, i pasted the code to my html file but the div doesnt move an inc! what am i doing wrong? <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <script> function mouseXY() { var X = event.clientX; var Y = event.clientY; document.getElementById("movingDiv").style.top=X; document.getElementById("movingDiv").style.left=Y; } window.onload=mouseXY; </script> </head> <body onmousemove="javascript:mouseXY();"> <div id="movingDiv" style="top=0;left=0;position:absolute;border-color:#000000;border:groove; width:250px;height:96px;background-color:#CCCCCC" onClick="javascript:this.style.display='none';"> </body> </html> Code (markup):
Hey.. I am new here.. anyway.. test your code and I know what is the problem.. You mix up the top and left value.. This one suppose to be like this : document.getElementById("movingDiv").style.top=Y; document.getElementById("movingDiv").style.left=X; I test it and it work
bu you should use "px". move to the left how much document.getElementById("movingDiv").style.top=Y+"px"; document.getElementById("movingDiv").style.left=X+"px"; Code (markup):