Question

I am trying to popup a div whenever a span with id toolpopup is clicked (div should appear at those coordinates) and it works fine for the spans which are at the top of the page. But when i scroll down and click the span the div is created but not at the desired coordinates. What could be possibly wrong? I am trying it on Firefox 7.0.1

$("#toolpopup").live("click", function(event) {
    var X = event.clientX;
    var Y = event.clientY;
    $("#popup").css('position', 'absolute');
    $("#popup").css("top", Y);
    $("#popup").css("left", X);
    $("#popup").css("display","block");
});

Answer 1

I’m not sure that properly understand your task, but may be you need to append into X and Y a document scroll offset, because:

MDN https://developer.mozilla.org/en/DOM/event.clientX:
event.clientX

Returns the horizontal coordinate within the application’s client area
at which the event occurred

In my code I get scroll offset as:

var xOffset=Math.max(document.documentElement.scrollLeft,document.body.scrollLeft);
var yOffset=Math.max(document.documentElement.scrollTop,document.body.scrollTop);

Then you can set X and Y as:

$("#toolpopup").live("click", function(ev) {
    var X = ev.clientX+xOffset;
    var Y = ev.clientY+yOffset;