I want to place the jquery dialog box where the user clicks on the screen.

so far I have:

$("#something").click(function(e){
    $("#myDialog").dialog( "option", "position", [e.pageX,e.pageY]);
    $("#myDialog").dialog('open');
});

But this doesnt work due to some page scrolling issues. I suspect it would work if I didnt have to scroll the page down to get to the element with id="something" that I click. I think that this is because the Y (height) position is the whole page position rather than the viewable area.

Is there a way to either grab the viewable area XY co-ords or calculate the size of the viewable area and do some funky maths to correct the page XY co-ords?

Thanks.

I want to place the jquery dialog box where the user clicks on the screen.

so far I have:

$("#something").click(function(e){
    $("#myDialog").dialog( "option", "position", [e.pageX,e.pageY]);
    $("#myDialog").dialog('open');
});

But this doesnt work due to some page scrolling issues. I suspect it would work if I didnt have to scroll the page down to get to the element with id="something" that I click. I think that this is because the Y (height) position is the whole page position rather than the viewable area.

Is there a way to either grab the viewable area XY co-ords or calculate the size of the viewable area and do some funky maths to correct the page XY co-ords?

Thanks.

• javascript
• jquery
• coordinates
• screen-resolution

1 Answer 1

Try this:

$("#something").click(function(e)
{
    var x =e.pageX -$(document).scrollLeft();
    var y =e.pageY -$(document).scrollTop();
    $("#myDialog").dialog( "option", "position", [x,y]);
    $("#myDialog").dialog('open');
});