Question

I am trying to position an Absolute DIV using Jquery, depending on where the user is clicking on the page.

At the moment this works just great

$('#window').css('left', jsEvent.pageX);
$('#window').css('top', jsEvent.pageY);

This positions the element exactly where my mouse has clicked the screen…

Until you scroll down that is. That is why I am trying to achieve something that will take the amount of pixels from the top of the page into account. I thought something like this…

$('#window').css('top', jsEvent.pageY + scrollTop());

would do the trick, unfortunately it doesn’t work.

Any hints?

Thanks,

Tim

Answer 1

This definitely works in Firefox. As such, it should work in Chrome, Safari and Opera. IE however, I’m not entirely sure. Give it a shot.

$('#window').css({
    left: e.clientX
    , top: e.clientY + document.documentElement.scrollTop
});

EDIT: This new version should work in most, if not all browsers.

var rxp = /webkit/gi;

$('#window').css({
   left: e.clientX
   , top: e.clientY + rxp.test(window.navigator.userAgent) ? document.body.scrollTop : document.documentElement.scrollTop
});