Run Multiple Scripts after Page Loads

Question

I have the following javascripts:

<script type="text/javascript">
        $('#HomeSlideShow ul.images').jSlideshow({
            auto: true,
            delay: 15,
            indicators: '#HomeSlideShow ul.indicators'
        });
</script>

And:

<script type="text/javascript">window.onload = function () {
document.getElementById('Features').style.visibility = 'Visible';
};</script>

I would like to combine the first script into the onload function of the second script. So that both scripts run once the page is loaded.

Answer 1

This will run once the DOM has been loaded. http://api.jquery.com/ready/

$(document).ready(function() {

        $('#HomeSlideShow ul.images').jSlideshow({
            auto: true,
            delay: 15,
            indicators: '#HomeSlideShow ul.indicators'
        });

        document.getElementById('Features').style.visibility = 'Visible';

});

or the short hand for .ready()

$(function() {

            $('#HomeSlideShow ul.images').jSlideshow({
                auto: true,
                delay: 15,
                indicators: '#HomeSlideShow ul.indicators'
            });

            document.getElementById('Features').style.visibility = 'Visible';

});

Answer 2

<script type="text/javascript">
    $(function() {
        $('#HomeSlideShow ul.images').jSlideshow({
            auto: true,
            delay: 15,
            indicators: '#HomeSlideShow ul.indicators'
        });

        $('#Features').css({ visibility: 'Visible' });
    });
</script>

Use jQuery to add as many things to run on page load as you like. It could just as easily be done like this:

<script type="text/javascript">
    $(function() {
        $('#HomeSlideShow ul.images').jSlideshow({
            auto: true,
            delay: 15,
            indicators: '#HomeSlideShow ul.indicators'
        });
    });
</script>

...

<script type="text/javascript">
    $(function() {
        $('#Features').css({ visibility: 'Visible' });
    });
</script>