jquery conflict with videobox and custom code

Question

Ok I have a page that uses 3 plugins and custom code.

1. Fullscreenr
2. ScrollTo
3. VideoBox

my custom code is just to change css style of items in menu(I'll post that code aswell).

My issue is that Fullscreenr and ScrollTo were working fine but when I want to add VideoBox the video popup doesn't want to work all it does is redirect to the youtube page. When I inspect the page(Chrome) it shows this error:

Uncaught TypeError: Object #<Object> has no method 'setProperty'

on this line:

this.overlay = new Element('div').setProperty('id', 'lbOverlay').injectInside(document.body);

I have tried using $.noConflict(); Now if I removed all the other plugins then it works but that doesn't work for me cause I need everything to work. Well hope somebody knows what I can do to fix this.

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/videobox.js"></script>

<!-- IF I REMOVE FROM HERE DOWN VIDEOBOX WORKS -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fullscreenr.js" type="text/javascript"></script>
<script type="text/javascript">  

    <!--
        // You need to specify the size of your background image here (could be done automatically by some PHP code)
        var FullscreenrOptions = {  width: 1024, height: 439, bgID: '#bgimg' };
        // This will activate the full screen background!
        jQuery.fn.fullscreenr(FullscreenrOptions);
    //-->
</script>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
<script type='text/javascript' src='js/init.js'></script>
<script language="javascript">

    function GotoSection(divid)
    {
        $('#realBody').scrollTo( '#' + divid, 800, {duration:3000} );
        switch(divid)
        {
            case "home":
            $("#mhome").attr('class', 'selected');
            $("#mvids").attr('class', 'non');
            $("#meventos").attr('class', 'non');
            $("#mfotos").attr('class', 'non');
            $("#mcontact").attr('class', 'non');                                                                
            break;

            case "vids":
            $("#mhome").attr('class', 'non');
            $("#mvids").attr('class', 'selected');
            $("#meventos").attr('class', 'non');
            $("#mfotos").attr('class', 'non');
            $("#mcontact").attr('class', 'non');                                                                
            break;

            case "eventos":
            $("#mhome").attr('class', 'non');
            $("#mvids").attr('class', 'non');
            $("#meventos").attr('class', 'selected');
            $("#mfotos").attr('class', 'non');
            $("#mcontact").attr('class', 'non');
            break;

            case "fotos":
            $("#mhome").attr('class', 'non');
            $("#mvids").attr('class', 'non');
            $("#meventos").attr('class', 'non');
            $("#mfotos").attr('class', 'selected');
            $("#mcontact").attr('class', 'non');
            break;

            case "contact":
            $("#mhome").attr('class', 'non');
            $("#mvids").attr('class', 'non');
            $("#meventos").attr('class', 'non');
            $("#mfotos").attr('class', 'non');
            $("#mcontact").attr('class', 'selected');                                                       
            break;  
        }

    }


</script>

If there is a better script I can use I welcome any and all suggestions aswell.

Answer 1

This will work if multiple libraries use the same $ in a webpage.

(function($){

//Write your jQuery code here as usual using $.

})(jQuery);

We define an anonymous function here, which takes jQuery as its only argument. It gets mapped to $ in the above function and your code will work just as expected. You can very well do things like this.

(function($){
    $(document).ready(function(){
        //Write your jQuery code here as usual using $.
    });
})(jQuery);

Answer 2

You must use noConflict as you are also using mootools

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/videobox.js"></script>

<!-- IF I REMOVE FROM HERE DOWN VIDEOBOX WORKS -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
  //from here you must use jQuery instead of $ or you could do

  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
  });


</script>