Can't call repetitive js from external file?

Question

I have a website here .

I have this script that calls the appropriate functions for the Sticky Notes to work...

//Functionality for Sticky Notes 
    $(function() {
        $("#content").stickynote({
            size             : 'large',
            containment      : 'content',
            event            : 'dblclick',
            color            : '#de5900'                
            });


        $("#newsticky").stickynote({
            size             : 'large',
            containment      : 'content',
            color            : '#de5900'
            });
        });

It's not a repetitive piece of javascript, but I'm trying to place all these head scripts in one file. You can see that I already have a few there. You can view the file here .

When I load the file onto the index page here , the scripts are called appropriately (jquery menu and two different sliders).

When I call the same file on the Sticky Notes page, I am not able to, in addition to the jquery menu not working properly.

I'm calling the same script at the bottom of the page (before the </body> tag...

<!-- All DOM Ready Scripts -->
<script type="text/javascript" src="js/scripts.js"></script>

Not sure what I'm doing wrong.

Answer 1

Try taking the code block out of $(function() { }); Additionally, if the DOM is ready (ie if you are including the script at the bottom of the file, and all nodes are in the DOM by then) - then you don't need to place your bannerRotators in the $(document).ready(function() {});

Your code should become somethinglike this:

$("#rotator1").bannerRotator({...});
$("#rotator2").bannerRotator({...});
$("#content").stickynote({...});
$("#newsticky").stickynote({...});