Populating a div with jQuery - screen shift problem

I am using jQuery to populate a div element in an aspx page. It is working however there is a negative side effect.

The page loads and the div is small..then when the jquery runs the page shifts down 1 line height ~12pt's. This makes the page look like it is being shifted up and down just after loading.

I can make the div a constant height (and this helps) h开发者_Python百科owever is there a way to have the div loaded with it's content before the page loads? (avoiding this page shift effect)

thx

Yes, you can include the content with the rest of the page. Then you should set the CSS property visibility to equal "hidden". Then, with javascript, change the visibility property to equal "visible".

Here's a quick example using jQuery:

<div id="container" style="visibility: hidden;">
<!-- Content is in here -->
</div>

<script type="text/javascript">

function eventWasTriggered(){
  $("#container").css("visibility", "visible");
}

</script>

Hope that helps :-)

P.S. you don't really want to use the inline style as I did, its just to give an example.