Question

I’m positioning a DIV using the jQuery offset() function. To avoid having the DIV flash in the incorrect position, I’m hiding the DIV prior to the positioning and then showing the DIV again afterwards. However, there is a synchronization issue and on some platforms (e.g. iPhone) I can still see the flash. What’s the best way to emulate a callback function for the offset() function?

$('div').hide();
y = Math.round(($(window).height() - $('div').outerHeight())/2);
$('div').offset({top : y});
$('div').fadeIn();

EDIT

Also, it is important that this element is still visible if JavaScript is disabled.

Answer 1

You could render your <div> element outside of the viewport from the get-go, then reposition it right before hiding it and proceed to set its offset and fade it in:

CSS:

.outside-viewport {
    position: absolute;
    left: -10000px;
}

Javascript:

var $div = $("div.outside-viewport");
$div.css({
    position: "relative",
    left: "0px"
}).hide().offset({
    top: ($(window).height() - $div.outerHeight()) / 2
}).fadeIn();