Question

I’m writing my first JQuery UI plugin, a time range picker (where “time range” is something like “last Thursday 3:16 AM till tomorrow 5:19 PM”). The basic concept is that an <input type="text"> with a human-readable description is visible at all times. Just like with the datepicker found in JQuery UI, a popup with the interactive controls is shown when the user clicks in the text field.

However, I have trouble reproducing the popup pattern. To get the placement right, I wanted to make my popup <div> a child of the <input> element, but that seems to be impossible. But how can I get the placement and animations right without making the popup a child of the always-shown text input element? Is there a pattern for doing this (in JQuery)?

Answer 1

You should be able to get a reference to the text input. jQuery has functionality to get the position of this element so you can position your div relative to this position.

http://api.jquery.com/position