Jumping content after $(document).ready() executed

This question is related to my previous question

Vertical floating div

So first when page is load floating div appeared in left:0, top:0 and than after some delay it is getting moved to the position according with logic defined in $(document).ready()

So the question is how to avoid such kind of behavior i开发者_StackOverflows there something i can do to avoid that?

Is there any way beautify load such kind of content, to display content only after $(document).ready() or something?

You can add display:none to the style of <div> in question (in your static CSS), switching to display:block from JS ($('#divid').fadeIn() or $('#divid').show() for example) as soon as it is ready.

Taking HTML/CSS from your previous question:

<div id="twitter-right-vrtical" style="position: fixed; bottom: 415px; right: 446px; display: none">
    <img src="/Content/themes/start/images/twitter.png" title=""/>
</div>

Javascript:

$(function () {
    //set new position
    $('#twitter-right-vrtical').css({'top' : newTop, 'left': newLeft}).fadeIn();
});

or you can use jquery ".animate()" to make moving more fancy