how do i get the x and y position directly under the left bottom side of the input rectangle?

I'm thinking of implementing a custom auto-complete feature so basically my idea now is that i will make an abs positioned div and give it the position here:

(image) http://i.stack.imgur.com/3c5BH.gif

So my questio开发者_JS百科n is with a variable referencing the textbox, how do i get the x and y position directly under the left bottom side of the input rectangle?

My script must work in latest versions of IE / FF / Safari / Opera / Chrome

I know i can use a library to do it, but no i'm interested in learning how do they do it (or maybe better ways)?

This question is a lot more complicated than it seems and involves getting the position of the element relative to the document. The code to do so can be pulled from the jquery source (http://code.jquery.com/jquery-1.6.1.js -- search for "jQuery.fn.offset")

in jQuery:

var node = $('#textbox'),
     pos = box.offset(); // the complicated piece I'm using jQuery for

node.top  += node.height(); // node.offsetHeight without jQuery
node.left += node.width();  // node.offsetWidth without jQuery

The answer can be extremely simplified if you don't care about FF2 or Safari3:

var   box = document.getElementById('yourTextBox').getBoundingClientRect(),
     left = box.left,
   bottom = box.bottom;

• x = x offset
• y = y offset - ( textbox height + padding-top + padding-bottom )

Good comments! For my scenario, there is always an offset parent (which is why I use position - http://api.jquery.com/position/). In hopes that it might help someone else wanting a quick fix, here's the code:

// I have a parent item (item) and a div (detail) 
// that pops up at the bottom left corner of the parent:
var jItem = $(item);
var pos = jItem.position();
var marginTop = parseInt(jItem.css('margin-top'));
if (isNaN(marginTop)) {
    marginTop = 0;
} 
$(detail).css("top", pos.top + jItem.outerHeight() + marginTop)
    .css("left", pos.left);
$(detail).show();

Just give the box a defined width and height. Then, get its top and left property and add it with the width and height. Simple. I am gonna give you Pseodocode.

<STYLE>
object{width: 100px; height: 20px;}
</STYLE>

<SCRIPT>
x = object.left;
y = object.top;
x = x + object.width;
y = y + object.height;
</SCRIPT>