Javascript code conflict

Question

When I include both of these files on the same page the code doesn't seem to work. What's causing the conflict? I can't seem to figure it out. i'm new to js and still learning so any help is appreciated. thanks!

File1:

$(document).ready(function(){

    var items = $('#stage li'),
        itemsByTags = {};

    // Looping though all the li items:

    items.each(function(i){
        var elem = $(this),
            tags = elem.data('tags').split(',');

        // Adding a data-id attribute. Required by the Quicksand plugin:
        elem.attr('data-id',i);

        $.each(tags,function(key,value){

            // Removing extra whitespace:
            value = $.trim(value);

            if(!(value in itemsByTags)){
                // Create an empty array to hold this item:
                itemsByTags[value] = [];
            }

            // Each item is added to one array per tag:
            itemsByTags[value].push(elem);
        });

    });

    // Creating the "Everything" option in the menu:
    createList('All',items);

    // Looping though the arrays in itemsByTags:
    $.each(itemsByTags,function(k,v){
        createList(k,v);
    });

    $('#filter a').live('click',function(e){
        var link = $(this);

        link.addClass('active').siblings().removeClass('active');

        // Using the Quicksand plugin to animate the li items.
        // It uses data('list') defined by our createList function:

        $('#stage').quicksand(link.data('list').find('li'),
                              function() {
                                 $("a.fsand").fancybox({
                                    'overlayShow'   : false,
                                    'transitionIn'  : 'elastic',
                                    'transitionOut' : 'elastic'
                                });
                                $(".play").click(function() {
                                    $.fancybox({
                                            'padding'       : 0,
                                            'autoScale'     : false,
                                            'transitionIn'  : 'none',
                                            'transitionOut' : 'none',
                                            'title'         : this.title,
                                            'width'     : 680,
                                            'height'        : 495,
                                            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
                                            'type'          : 'swf',
                                            'swf'           : {
                                                 'wmode'        : 'transparent',
                                                'allowfullscreen'   : 'true'
                                            }
                                        });

                                    return false;
                                });  
                              });
        e.preventDefault();
    });

    $('#filter a:first').click();

    function createList(text,items){

        // This is a helper function that takes the
        // text of a menu button and array of li items

        // Creating an empty unordered list:
        var ul = $('<ul>',{'class':'hidden'});

        $.each(items,function(){
            // Creating a copy of each li item
            // and adding it to the list:

            $(this).clone().appendTo(ul);
        });

        ul.appendTo('#gal-container');

        // Creating a menu item. The unordered list is added
        // as a data parameter (available via .data('list'):

        var a = $('<a>',{
            html: text,
            href:'#',
            data: {list:ul}
        }).appendTo('#filter');
    }

    $("a#example1").fancybox({
        'overlayShow'   : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    });

});
//]]>  

File2:

this.molitorscripts = function () {

    //FILTER EFFECTS & APPEARANCE
    var filterLink = jQuery('#filter a');
    filterLink.click(function(){

        jQuery('li.box').removeClass('hideMe');

        filterLink.not(this).removeClass('active');
        jQuery(this).addClass('active');

        var activeCat = jQuery(this).html().toLowerCase().replace(/ /g,'');

        jQuery('li.postEvent').not('li.'+ activeCat).addClass('hideMe').children().stop(true,true).animate({opacity:".1"},350);
        jQuery('li.'+ activeCat).children().stop(true,true).animate({opacity:"1"},350);

        return false;
    });
    jQuery('#filter li').not(':first').prepend("/    ");


}
jQuery.noConflict(); jQuery(document).ready(function(){molitorscripts();});

Answer 1

Change the first line in the first file from

$(document).ready(function(){

to

$(document).ready(function($){

The second file uses jQuery.noConflict(), which disables the $ alias for the jQuery object. Since everything in the first file is wrapped in a document.ready handler, you can take advantage of the fact that this handler is automatically passed the jQuery object, which you can call $ locally.