Wrapper Div glitch/ is moving while page is loading to be centered

I have a genera开发者_StackOverflowted image slider by jQuery orbit plugin can be checked link to slider on my site. My problem is experiencing a half-second glitch on the page while the jQuery code executes to generate the div that accomades the images. The wrapper is centered by css code:

div.orbit-wrapper {
    width: 1px;
    height: 1px;
    position: relative;
    margin:0 auto;
}

The wrapper seems to move a bit from the left to reside in the center of the page. I'd prefer the wrapper not to display at all until the JavaScript has run to avoid the problem. Any ideas are highly appreciated!.

---

Instead of hiding it with display:none;, which takes it out of the content flow, simply make it invisible with this, style="visibility:hidden;" or this...

#myWrapperDiv {
    visibility:hidden;
}

Then after the page is done loading (including the images), reveal it using this...

$(window).load(function(){
    $('#myWrapperDiv').css('visibility', 'visible');
});

---

EDIT:

Your container <div> with class .orbit-wrapper is being dynamically generated by the Orbit script with CSS visibility:visible; already applied so it's never really hidden by your CSS at all. The dynamic DOM manipulation by the script is over-riding your CSS.

The solution is to apply style="visibility:hidden;" to a new wrapper <div> surrounding everything...

<div id="myWrapperDiv" style="visibility:hidden;">

    <div id="featured">
        <img src="http://dev.digitup.se/pilatessoder/wp-content/uploads/2011/08/pilates-soeder-bilder-2011-01.jpg" />
        ... {snipped} ...
    </div>

</div>

$(window).load(function(){
    $('#myWrapperDiv').css('visibility', 'visible');
});

---

I had the same problem recently. Try adding display: none; to the container div. That will prevent it from showing that split-second flash. You can change none; to block; through jQuery after loading completes with:

<script type="text/javascript">
     $(document).ready(function(){
     $('#whateverSelector').show();
});
</script>

You can either put this at the end of the document before the </body> or (better yet) before the </head>.

Perhaps the none; is being over-written somewhere in the CSS. Try adding the style inline to see if you can sort-of "force" it to work. This this in the HTML: <div class="orbit-wrapper" style="display:none;">... I hope that helps.

---

Just hide the div with display:none, in a style tag on the div, and once all the JavaScript is run just change it back to display:block.

With jQuery you can just do $(".orbit-wrapper").show(); once the page is done loading in the $(document).ready(function() { ... }); code block.