CEWP showing up in IE and in FF, but not in Chrome or Safari

Question

I'm implementing the nivo-slider in a Content Editor Web Part, and it shows up and works in Firefox and in Internet Explorer. I'm referencing a text document through the content link, and this is what's in the text doc:

<script type="text/javascript">
$(document).ready(function() {
    $('#slider2').nivoSlider({
        effect:'fade', // Specify sets like: 'fold,fade,sliceDown,slideInLeft'
        slices:15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed:250, // Slide transition speed
        pauseTime:5000, // How long each slide will show
        startSlide:0, // Set starting Slide (0 index)
        directionNav:true, // Next & Prev navigation
        directionNavHide:true, // Only show on hover
        controlNav:false, // 1,2,3... navigation
        controlNavThumbs:false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav:true, // Use left & right arrows
        pauseOnHover:false, // Stop animation while hovering
        manualAdvance:false, // Force manual transitions
        captionOpacity:0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next' // Next directionNav text
    });
});
</script>
<table border="1">
    <tbody>
        <tr>
            <td colspan="4">
                <div class="s4-notdlg" id="slider2">
                    <img src="/SiteAssets/Images/Slides/picture1.jpg" alt="">
                    <img src="/SiteAssets/Images/Slides/picture2.jpg" alt="">
                    <img src="/SiteAssets/Images/Slides/picture3.jpg" alt="">
                    <img src="/SiteAssets/Images/Slides/picture4.jpg" alt="">
                    <img src="/SiteAssets/Images/Slides/picture5.jpg" alt="">
                </div>
            </td>
        </tr>
    </tbody>
</table>

As I said before, this works perfectly in IE and FF. It just doesn't work correctly in Chrome and Safari. I'm wondering what's going on and how I can fix this so it displays properly in Chrome/Safari. Thanks in advance, AA

Answer 1

Interestingly enough, just changing it from $(document).ready(function() { to $(window).load(function() { made it work on all browsers.