jQuery offset top doesn't work correctly

javascript jquery raphael offset
ahmadali shafiee picture ahmadali shafiee · Aug 23, 2012 · Viewed 51.3k times · Source

I'm trying to create an script draw something in an element by mouse and I'm using Raphaeljs to do that.

For correct drawing I need to find top and left of ‍input‍‍ element. I'm using var offset = $("#input").offset(); to get left and top.

But the top value isn't correct. It's 10px lower than ‍‍the real top distance. I think the 10px maybe change in different resolutions then I can't add 10px to it normally then I want to know how can I fix the problem!

I uploaded my test here.

Answer

Kevin Nielsen picture Kevin Nielsen · Aug 23, 2012

The jQuery .offset() function has this limitation:

Note: jQuery does not support getting the offset coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.

The body in this case has a 10px top border, which is why your drawing is off by 10 pixels.

Recommended solution:

var offset = $("#input").offset();
x = x - offset.left - $(document.body).css( "border-left" );
y = y - offset.top + $(document.body).css( "border-top" );

Related questions

jQuery SVG vs. Raphael

I'm working on an interactive interface using SVG and JavaScript/jQuery, and I'm trying to decide between Raphael and jQuery SVG. I'd like to know What the trade-offs are between the two Where the development momentum seems to be. I …

Read More
how to include javascript libraries in my own script

I have written some functions in javascript and I've put them in a separate JS file (visualisations.js). The functions I've written use several other javascript libraries, at the moment these libraries are all included in my HTML page, so …

Read More
How can I add an <image> element to the SVG DOM

I have a web page with a jpg image that the user draw an SVG doodle on top of using Raphael. I want to allow the user to save a merged rasterised version of this when they are done (i …

Read More