I am attempting to position a div using the jQuery offset() function. The goal is to have it placed at a fixed offset from another element within the DOM. This is taking place in a complex environment with nested divs.
What's puzzling is that when I call this function twice, I get two different results. It seems odd to me, as there shouldn't be any reason for such behavior. However, I am relatively new to jQuery so I might be missing something obvious.
In my understanding,
var pos = $(document.getElementById(someElementInTheDOM)).offset();
$(document.getElementById(MyDiv)).offset( pos );
should consistently position MyDiv in the same spot every time, even if the code is called multiple times. This is how it behaves correctly in this fiddle. Try clicking on the magnifying glass several times - everything works fine.
However, when I introduce the properties display:none and display:block, things start to go awry. I simplified the scenario in a fiddle found here. To see what I mean, click the magnifying glass, click it again, repeat once more, close the div using the white "X", then click on the magnifying glass one more time.
Any insights into what might be causing this issue?