Issue at Hand: I'm encountering an obstacle with a transformed div set up as follows:
$('#container').css('-moz-transform-origin', '0 0');
$('#container').css('-webkit-transform-origin', '0 0');
$('#container').css('-o-transform-origin', '0 0');
$('#container').css('-ms-transform-origin', '0 0');
$('#container').css('-transform-origin', '0 0');
$('#container').css('-moz-transform', 'scale(.5)');
$('#container').css('-webkit-transform', 'scale(.5)');
$('#container').css('-o-transform', 'scale(.5)');
$('#container').css('-ms-transform', 'scale(.5)');
Now, I am adding another div to this scaled container...
id('container').appendChild( follower );
However, when attempting to position this new div exactly according to the mouse cursor on the document... the follower's placement is drastically off from the actual mouse position on the document.
$( document ).mousemove( function( e ) {
var IE = document.all ? true : false;
if ( IE ) {
vx = e.clientX;
vy = e.clientY;
} else {
vx = e.pageX;
vy = e.pageY;
}
follower.style.left = xDropPos + 'px';
follower.style.top = yDropPos + 'px';
}
Any suggestions on how to resolve this issue?