Question

I’m trying to develop a widget, that is a select form element replacement. It’s a block element so it may be 100% of its container. Something like this:

<element style="width: 100%">Please choose</element>
<options style="display: none">
    <option>Option 1</option>
</options>

It has an options list that opens on click and is resized and position to align it with the trigger element.

Now whenever I resize the window or something in my layout changes I need to reposition the options list. I figured that I can easily bind to window.resize() for options.width() changes. The only one problem is how to detect changes in element position to reposition the options.

Is there any event to bind to changes in position or offset?

Thank you.
Dmitry.

Answer 1

Semantically the options should be a child of the “select element”. Like, you know, with the traditional select.

<element style="width: 100%">
Please choose
<options style="display: none">
    <option>Option 1</option>
</options>
</element>

This way, you can use absolute positioning to always position options to the right place, relative to its parent. For this, you only have to specify position: relative on element (or actually any other position value than static).

---

It’s possible that you only meant your HTML as a quick example, but you’d be better off using a standard HTML tag (like div, ul, whichever fits your case most) with a special class attached to it.