Home/ Questions/Q 8679809
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T21:04:32+00:00

I want to covert a point, positioned in one DIV into a point wrt

  • 0

I want to covert a point, positioned in one DIV into a point wrt another DIV.

I have a following html in place 

    <html>
        <head>
           <link href="default.css" rel="stylesheet" />
           <script src="default.js"></script>
        </head>
        <body>
             <div id="complete_canvas" >
                 <div id="myDIV"></div>
                 <div id="otherDIV"></div>
             </div>
        </body>
    </html>

the default.css has following in it

#complete_canvas 
{
    width:100%;
    height:100%;
    position:absolute;
}
#myDIv{
    position:absolute;
     left:100px;
     top:100px;
     width:760px;
     height:100px;
}

in the default.js i am adding event listeners for 

    var canvas = getElem("complete_canvas");

    canvas.addEventListener("mousedown", onTouchDownOnDOMCanvas, false);

now, the point i get in onTouchDownOnDOMCanvas function is wrt to complete_canvas DIV.
i want this point wrt to myDIV div element.
so, for eg:, if i click at 100px , 100px (in complete_canvas) then i wrt to myDiv it will be 0 , 0

is there a way to do that conversion ?

thanks,

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Using jquery

    $("#complete_canvas").click(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
    //Calculations here
});

    Using Javascript

    <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function getClickPosition(event){
    pos_x = event.pageX;
    pos_y = event.pageY;
    alert(pos_x + " " + pos_y);
}
</script>
</head>
<body onclick="getClickPosition(event)">
    <!-- Other HTML here -->
</body>
</html>
    • 0