CODEWITHSUNDEEP
javascriptjquerycssmouseevent
Starboy
Starboy

Reputation: 1635

Get mouse position relative to a zoomed out div

What I'm looking to accomplish is to get the position of the mouse in relation to a zoomed out div with matrix transform. As you will see in the fiddle below I have a red div with a width of 4000px, but since it's zoomed out it appears smaller then said 4000px. What should happen is if you click on the intersecting lines in the red div, relX should read (around) 2000 and relY should read around 325. 

$(".crazyWide").click(function(e){
    var clickPos = $(this).offset(); 
    var relX = e.pageX - clickPos.left;
    var relY = e.pageY - clickPos.top;

    //Used to display current click coords
    $(".debug").empty();
    $(".debug").prepend("relX: " + relX + " relY: " + relY);
});

Fiddle

Upvotes: 1

Views: 356

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337627

The element is shrunk to a factor of 0.12 in both directions. As such, you can calculate the relative mouse click position by dividing the relX and relY by 0.12:

$(".debug").prepend("relX: " + (relX / 0.12) + " relY: " + (relY / 0.12));

Updated fiddle

Upvotes: 1

Related Questions