Determine location at the position of mouse click

I am putting together a tool that allows people to double click and leave messages anywhere on a HTML page using jQuery. It have hit a stumbling block to do with positioning of the messages.

The code I am testing at the moment:

$('body').bind('dblclick', function(e) {

    var message = $('<div class="message">Form here</div>').css({
        'left' : e.pageX,
        'top'  : e.pageY
    });

    $(this).append(message);
});

This creates a new 'message' at the position of the mouse click. While this works to an extent, as soon as the browser window is resized the 'message' moves out of position. As I am eventually hoping to save the messages (and retrieve them) it is not ideal to have them load in a different locations for every user on every browser. I want the messages to attach to the page layout even开发者_运维技巧 if that page uses media queries.

My understanding of the problem is that I need to position the messages relative to the nearest element where the user has clicked. The question is. How do I this?

Any tips or hints would be greatly appreciated.

Update 04/07/11

Most of the answers I have had below are not really what I am after. I have uploaded an example of my page to JSfiddle to show you my setup. The problem here is making the messages attach in a relative position, so that as the browser window is re-sized the messages move along with the content.

For example. If I attach a message to the second paragraph on a page how do I get that message to stick with that paragraph, regardless of browser/device width. As far as I can tell I need to establish the nearest block level element (or element with an ID or class) that can be used to position the message relative to.

Hope that clears up the question & thanks for all your suggestions.

As far as I can tell, there are potentially several problems: the first that I can see is you need to make sure that the "body" element covers the whole page, because it will only extend as far as its box allows it to. (i realise normally, simply setting the background of a div usually lets you see its extent, but the body tag is a special case. Its background extends to the entire visible area of the browser, but it's box may not)

Secondly, it is important to set the css "position" property to "absolute" or absolute positioning won't work: This code works:

    $('body').bind('dblclick', function(e){

        var message = $('<div class="message">Form here</div>').css({
            'position' : 'absolute',
            'left' : e.pageX,
            'top'  : e.pageY
        });

        $(this).append(message);
    });

This should shows how to track mouse movements http://docs.jquery.com/Tutorials:Mouse_Position#How_do_I_find_the_mouse_position.3F

jQuery(document).ready(function(){
   $(document).mousemove(function(e){
      $('#status').html(e.pageX +', '+ e.pageY);
   }); 
})

along with this you may use resize() to change position of div

 $(window).resize(function() {
  $('body').prepend('<div>' + $(window).width() + '</div>');
});

I would suggest placing a single div on your page, with fixed width and height. Then apply your dblclick function to that div rather than the body.

You may also want to position the dynamic div elements absolutely, so they appear in the correct positions. Here is an example fiddle.

You need to position the message div:

$('body').bind('dblclick', function(e) {

    var message = $('<div class="message">Form here</div>').css({
        'left' : e.pageX,
        'top'  : e.pageY,
        'position' : 'fixed',
        'zIndex': 999999
    });

    $(this).append(message);
});

http://jsfiddle.net/PvFTN/