Link to home
Start Free TrialLog in
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:

<script>


$(document).ready(function() {

$('#dragThis').draggable(
    {    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);
			
			

        }
    });
});
	
	
	
</script>

Open in new window


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

User generated image
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
ASKER CERTIFIED SOLUTION
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Steve Tinsley

ASKER

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.

$("#blah").click(function(){
     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
Easier that I thought.
I just used the math.abs JavaScript command to get the positive then.