Avatar of Steve Tinsley
Steve TinsleyFlag for United Kingdom of Great Britain and Northern Ireland asked on

jquery coordinates of element from bottom right

I want to create a script where the user can drag a dot on a grid (starting at bottom left).
I have started by using jQuery UI draggable and can access the coordinates from top left...

See below:


$(document).ready(function() {

    {    containment: "#grid", scroll: false,

        drag: function(){

            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $('#posX').text('x: ' + xPos);
            $('#posY').text('y: ' + yPos);


Open in new window

I want to beable to get the coords from bottom left... See example emage below...

grid example
Eventually I want the 2 coords in a form textbox seperated by a comma. This will then be submitted to a database.

Could anyone help?


Avatar of undefined
Last Comment
Steve Tinsley

8/22/2022 - Mon

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Steve Tinsley

The problem is that I want to cords from the div (which is in the middle of the browser), not the cords from the edge of the screen.

I'll just lob this one out here.  Not sure if it's a shorter/easier solution.

<input type="image" name="blah" id="blah" onclick="javascript: void(0);" src="..." />

Let the input tell you where on the image the user click.  You can then use jQ to do all the other stuff.

     foo = $("#blah").val();
     // create a dot and put it in the right place using jQ and the x/y from "foo"

That is an untested theory above but wouldn't take long to test it.

To make the dot I would have 2 divs.  One inside the other with the outer on position:realative and the inner one position:absolute (hidden,top=-10,left=-10) and when clicked I would relocate the inner div to the right x/y and unhide it.

jQuery height works with whatever element you want, not just the screen
You are already getting the top position, so you just need to get the element height and subtract
Your help has saved me hundreds of hours of internet surfing.
Steve Tinsley

Easier that I thought.
I just used the math.abs JavaScript command to get the positive then.