Question

This is a follow up question to How can I stop an IFrame reloading when I change it's position in the DOM? if you want the background.

I have an inline div <div id="leaderboard-slot"></div> (with a fixed width and height) and another div (“leaderboard-loader”) further down the page with the actual content for that div.

For various reasons (see previous thread), I am unable to simply do an appendChild or similar.

Instead, I’m hoping to position leaderboard-loader such that it takes up the space “reserved” by leaderboard slot. I’ve used some jQuery methods to do this:

var loader = $('leaderboard-loader');
var dest = $('leaderboard-slot');
var pos = dest.getPosition();
loader.setStyle('top', pos.y + 'px');
loader.setStyle('left', pos.x + 'px');

which I fire on document load and resize. However, if other elements within the page cause a reflow, then the target div moves, but the loader doesn’t.

Is there a safe way of doing this – it needs to work when I know nothing else about the page (ie I can’t just make this call on any other methods that might cause a reflow, because I don’t know what those are).

Any help would be much appreciated – thank you 🙂

Answer 1

I’m starting to regret my answer now. Hopefully you can find something better than the absolute positioning workaround. But, in the spirit of kludgey solutions, you could call the repositioning script on a timer. sigh.