Question

I need to show a DIV containing a slideshow only when the DOM is fully loaded.

I used this script:

    <script type="text/javascript">
    $(window).load(function() {
        new Image("images/layout/wallpaper.jpg");
        new Image("images/layout/plates.png");

        $('#slideshow').css('display', 'block');
        $('#slideshow').nivoSlider({
            effect: 'fade',
            animSpeed: 500,
            pauseTime: 3000,
            directionNav: false,
            directionNavHide: false,
            controlNav: false,
            keyboardNav: false,
            pauseOnHover: false
        });
    });
    </script>

The #slideshow DIV is defined as display: hidden. In Internet Explorer the DIV never shows.
How can I solve this?

====================================

Edited to:

    $(document).ready(function () {
        $(window).load(function() {
            new Image("images/layout/wallpaper.jpg");
            new Image("images/layout/plates.png");

            $('#slideshow').nivoSlider({
                effect: 'fade',
                animSpeed: 500,
                pauseTime: 3000,
                directionNav: false,
                directionNavHide: false,
                controlNav: false,
                keyboardNav: false,
                pauseOnHover: false
            });
            $('#slideshow').css('display', 'block');
        });
    });

Still no difference.
This is the CSS for the #slideshow DIV:

#slideshow {
    z-index: 0;

   height: 457px;
   width: 660px;
   position: relative;
}

The “display: none;” property is defined as inline.

Answer 1

It may well be this simple :

$('#slideshow').show()

Also, any reason you’re using document.load event and not:

$(document).ready(function (){