• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 446
  • Last Modified:

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 Tinsley
Steve Tinsley
  • 2
  • 2
1 Solution
For the measurement from the bottom just take the element.height() and subtract the offset.top
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.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now