Question

I have a dynamically rendered div/span that needs to follow a particular component e.g. a textbox. Currently it is set to a particular coordinate on the page and it is shown as appearing right beneath the textbox. But it no longer appears that way when a div above the textbox gets collapsed/expanded (i.e. it goes above/under the textbox).

Think of it as a search result area appearing under a search result box after clicking the search button, but the search result area moved when a random div above the search text box collapsed/expanded.

I’m pretty sure that a bit of javascript would fix this. I tried googling for it, but struggling to come up with decent keywords (and my search phrase didn’t really return me much).

The div/span in question is rendered in jQuery dynamically. I was wondering what does the quick solution look like?

Thanks.

Answer 1

I “think” I understand your question… can you not wrap the textbox and div/span in another div and position that instead so it follows?

A javascript solution is not very pretty as you’d have to re-position the “results” div every time another div was collapsed or anything changed on the page that would affect the position of the textbox. If that is what you want to do then you could use the offset() function.

var myInputOffset = $('#MyTextBoxID').offset(); // Get the position of the input field relative to the document
$('#MyDivID').css({top: myInputOffset.top + 50; left: myInputOffset.left }); // Position the div

NB: The div should be positioned absolute and the 50 is an arbitrary number to shift it down lower than the input field.