This is bugging me.
I’m getting the absurd value of -32567 for offset().left on an element with nothing more that 200 margin. offset().top works fine.
The code:
(function( $ ) {
$.fn.draw = function( options ) {
var settings = $.extend( {
'width' : null,
'height' : null,
'color' : '#000'
}, options);
return this.each(function() {
var o = settings;
var obj = $(this);
var offset = $(obj).offset();
var c = o.color;
var w = o.width;
var h = o.height;
var i = 0;
var t, l = 0;
$(obj).css('overflow','hidden');
$(obj).css('position','relative');
if(w != null){
$(obj).css('width',w);
}
if(o.height != null ){
$(obj).css('height',h);
}
$(obj).mousemove(function(e){
var $mark = $('<div class="mark" id="mark'+i+'"/>');
l = (e.pageX) - (offset.left);
t = (e.pageY) - offset.top;
$(this).append($mark);
$("#mark"+i).css({
'position' : 'absolute',
'top' : t,
'left' : l,
'width' : '3px',
'height' : '3px',
'background' : c
});
i++;
});
});
};
})( jQuery );
I was making a fun little plug that would turn any block element into a drawing pad. It worked when I was just using the mouse position on the entire page with the box located at 0,0.
Now that I’m trying to allow it to be anywhere on the browser is where the problem arises.
You can find it (not working) at: http://hangerdev.com/zacksplayground/
Sorry if I’m incoherent. I should sleep.
Missing $(document).ready() likely, typing $(“#box”).offset().left in console returns 200 for me, even though the alert says -32k.