jQuery, Hiding elements on ready is always jumping on page load. how can this be avoided?

Question

This is the code.

I can't apply display:none;

$(document).ready(function() {
    $("#LeftNav li.navCatHead").not(":first").siblings("li").hide().end().end().first().addClass("open");
});

Answer 1

Instead of applying display:none, (calling $.hide()), how about replacing the item you are trying to hide with an empty div that is set to the same size as whatever you are trying to hide?

Answer 2

I often find that sometimes, a nice alternative to dislpay:none; is just setting the opacity to 0 on load.

$("#LeftNav li.navCatHead").not(":first").siblings("li").css('opacity','0').end().end().first().addClass("open");

But rather than have such a long string to find the selector, I would just add a new class to each one and set that to opacity:0; on page load as it will be much much faster.

Answer 3

why can't you set "display:none"? Not sure about your scenario, but you probably can reverse the work flow a little bit

instead of show list initially, then hide certain ones based on some condition, try hide(display:none) lists initially, then show certain ones based on some condition.

This way you don't end up with some elements "show then disappear".

Answer 4

This article may help a bit: http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content

Answer 5

Don't wait for document ready. You can place your jQuery code at the bottom of the page before the closing body tag or alternatively, immediately after the elements in question.

            <!-- ...other code... -->
            <li>Sibling</li>
        </ul>
        <script type="text/javascript">
            // this should work...
            $("#LeftNav li.navCatHead").not(":first").siblings("li").hide().end().end().first().addClass("open");
        </script>
        <div class='content'>more stuff.</div>
    </body>
</html>