Jquery X,Y position send over ajax.

Question

I need an example that uses jquery to send the current x,y position of a <div> (the top left pixel) to a php file using ajax where the position can then be processed.

Answer 1

For the x,y coordinates you can use the dimensions plugin (position function): http://docs.jquery.com/Plugins/dimensions

Answer 2

Assuming a recent version of JQuery, you could use the following given the ID of your div is "divName":

$("#divName").offset();

For reference: http://docs.jquery.com/CSS/offset

Answer 3

var cX = 0; var cY = 0; 
//Follow mouse around.. (platform independent, based on document dimensions, not window)
$().mousemove(function(e){ 
 cX = e.pageX;
     cY = e.pageY;
});

Then, just use the cX and cY variables as you need. It automatically accounts for scrolling offsets. Very easy/handy, DHTML never worked so well!

if you only need it on a certain element, you can grab it using the simple css style selectors, eg's:

$("#myid").mousemove...
$(".myclass").mousemove...
$("table tr").mousemove...
$(".interestingdivclass .subclass input:checkbox").mousemove...

The following question has the ajax component:

http://stackoverflow.com/questions/1008291/sending-information-back-and-forth-with-ajax