Prevent multiple JQuery scripts from breaking the code

Question

Both of these scripts need to use the jQuery library, but they are overriding each other. How do I make 2 or more jQuery/Javascript code that use the same library run at the same time? I'm trying to get script.js and the youtube js to both work.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css"
rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.youtubepopup.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("a.youtube").YouTubePopup({
            autoplay: 1,
            draggable: true,
            hideTitleBar: true
        });
    });
</script>

I've tried inserting noConflict, but this breaks both.

<script type="text/javascript">
    $.noConflict();
    jQuery(function () {
        jQuery("a.youtube").YouTubePopup({
            autoplay: 1,
            draggable: true,
            hideTitleBar: true
        });
    });
</script>

I'm a designer figuring out javascript through trial and error, so hopefully someone can explain what I'm doing wrong. Thank you!

EDIT: Here is the script.js file

$(function () {
    function filterPath(string) {
        return string.replace(/^\//, '').replace(/(index|default).[a-zA-Z]{3,4}$/, '').replace(/\/$/, '');
    }
    var locationPath = filterPath(location.pathname);
    var scrollElem = scrollableElement('html', 'body');
    // Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
    $('a[href*=#]').each(function () {
        // Ensure it's a same-page link
        var thisPath = filterPath(this.pathname) || locationPath;
        if (locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/, '')) {
            // Ensure target exists
            var $target = $(this.hash),
                target = this.hash;
            if (target) {
                // Find location of target
                var targetOffset = $target.offset().top;
                $(this).click(function (event) {
                    // Prevent jump-down
                    event.preventDefault();
                    // Animate to target
                    $(scrollElem).animate({
                        scrollTop: targetOffset
                    }, 400, function () {
                        // Set hash in URL after animation successful
                        location.hash = target;
                    });
                });
            }
        }
    });
    // Use the first element that is "scrollable"  (cross-browser fix?)
    function scrollableElement(els) {
        for (var i = 0, argLength = arguments.length; i < argLength; i++) {
            var el = arguments[i],
                $scrollElement = $(el);
            if ($scrollElement.scrollTop() > 0) {
                return el;
            } else {
                $scrollElement.scrollTop(1);
                var isScrollable = $scrollElement.scrollTop() > 0;
                $scrollElement.scrollTop(0);
                if (isScrollable) {
                    return el;
                }
            }
        }
        return [];
    }
});

Answer 1

Solved!

Following Joseph's instructions closer, I moved the script.js below the in-page user script so the 2 scripts required for youtube to work are grouped together.

<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.youtubepopup.min.js"></script>
<script>
$(function () {
    $("a.youtube").YouTubePopup({
        autoplay: 1,
        draggable: true,
        hideTitleBar: true
    });
});
<script src="script.js"></script>
</script>

Thanks everyone!

Answer 2

From what I can tell, noConflict doesn't help unless you got another library in the page that you are not telling us (like dojo or mootools). There must be something wrong with the order. always have this order in your scripts and css:

• external styles
• in-page styles
• script libraries
• script plugins
• external user scripts
• in-page user scripts

and so (urls shortened for clarity):

<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.youtubepopup.min.js"></script>
<script src="script.js"></script>
<script>
    $(function () {
        $("a.youtube").YouTubePopup({
            autoplay: 1,
            draggable: true,
            hideTitleBar: true
        });
    });
</script>

Or, there must be something that prevents execution in script.js. Try validating the script with JSLint to check

Answer 3

Do it like this might help, if you are sure that another library will also use jQuery's $ sign:

<!--jQuery-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!--jQuery UI-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<!--A jQuery plugin-->
<script type="text/javascript" src="js/jquery.youtubepopup.min.js"></script>
<script type="text/javascript">
    $.noConflict();    //Relinquish $
</script>
<!--Another library-->
<script type="text/javascript" src="js/script.js"></script>

<!--Do stuff here-->
<script type="text/javascript">
    jQuery(function() {
        jQuery("a.youtube").YouTubePopup({
            autoplay: 1,
            draggable: true,
            hideTitleBar: true
        });
    });
</script>