1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

I want to move a div according to client's mouse X,Y

Discussion in 'JavaScript' started by Betty_S, Jan 21, 2007.

0
  1. #1
    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?:confused:

    Thanks.
     
    Betty_S, Jan 21, 2007 IP
  2. MattD

    MattD Peon

    Messages:
    161
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    MattD, Jan 21, 2007 IP
  3. datropics

    datropics Peon

    Messages:
    309
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    0
    #3
    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 &lt;script> must be *after* the &lt;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 -
     
    datropics, Jan 21, 2007 IP
  4. s.khanna

    s.khanna Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    <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>
     
    s.khanna, Apr 29, 2011 IP
  5. straris

    straris Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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):
     
    straris, Nov 11, 2012 IP
  6. keikoku90

    keikoku90 Greenhorn

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #6
    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 :D
     
    keikoku90, Jan 23, 2013 IP
  7. Kuna

    Kuna Well-Known Member

    Messages:
    426
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    105
    #7
    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):
     
    Kuna, Feb 16, 2013 IP