Question

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) https://i.stack.imgur.com/3c5BH.gif

So my question 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)?

Answer 1

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;