How to Get Exact Top Left Position of a Mouse Pointer Location Using jQuery - Kvcodes
X

Congrats, You are Subscribed to Receive Updates.

How to Get Exact Top Left Position of a Mouse Pointer Location Using jQuery


With help of jQuery we can find the location of a cursor  and mouse pointer location. But its not working all the place, if your container or the Division is responsive and changing its windows size based on screen resolution, It may return wrong positions.  Here is the example for existing method.

$(document).ready(function(){
  $(document).click(function(e){
     alert("Left : " + e.pageX + " Top : " + e.pageY);
  });
});

The above function will get back us with left and top position of the cursor while moving it.  But it cant give you the right location coordinates on responsive websites, So here I just altered it with my way to get exact pointer location on all size windows.

 $("kv_div_id").click(function(){
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("kv_div_id").offsetLeft;
    pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("kv_div_id").offsetTop;
    var left = (pos_x-1) ;
    var top = (pos_y-15) ;
alert( "left : "+ left + " Right :" +top);

});

That’s it, the above function will help you to get the Exact left and top position of a cursor.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts