Question

I have got a little problem with repositioning a div that should serve as an infobox.

I am for example executing an AJAX call and on success I get a message from the server. This message is set as the div‘s containing text. As these messages have different lengths I have to reposition the div to have it stay in the center of the parent div.

I am trying to achieve this by using $("#infobox").position({of: $("#parent_field"). The first time it is shown it is in the exact center. But when it is displayed several times in a row it moves further to the bottom right each time.

All this said here is the jsfiddle for my problem. Just click Display Infobox several times to see the problem in action.

Answer 1

This is, I think, a consequence of hiding the element, as it runs, the offset co-ordinates are added as an inline-style, then the second and subsequent times the function is run it adds together the original offsets required to the ones that are stored inline.

I don’t know if this is relevant but jQuery UI/API/1.8/Position says:

Note: jQuery UI does not support positioning hidden elements.

However:

adding the following, clearing the style attribute, into the function after the fadeout has completed, resets it and stops the compounding offsets.

$("#infobox").removeAttr("style");

Forked fiddle example