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?

Steve TinsleyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

For the measurement from the bottom just take the element.height() and subtract the offset.top

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Steve TinsleyAuthor Commented:
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
Steve TinsleyAuthor Commented:
Easier that I thought.
I just used the math.abs JavaScript command to get the positive then.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.