Combined JS-libraries

Question

I use two different kinds of JS libraries, but apparently, there is an error when using both.

The two things I use are Mootools and JQuery UI

<!-- Agenda slider -->
<script type="text/javascript" language="javascript" src="js/mootools-1.2.1-core.js"></script>
<script type="text/javascript" language="javascript" src="js/mootools-1.2-more.js"></script>
<script type="text/javascript" language="javascript" src="js/lofslidernews.mt12.js"></script>
<!-- Datepicker -->
<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.datepicker.js"></script>

When I use this snippet, the Agenda slider failed to work. However, when I delete this line

<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>

The Agenda slider works again, but the Datepicker refuses to work...

How can I combine both scripts and end up with two working javascript-based elements?

EDIT
The only JS included in the .php files are those three little snippets

 <script language="javascript">
    $(document).ready(function() {
            $.featureList(
        $("#tabs li a"),
        $("#output li"), {
            start_item  :   1
        }
    );

    // Alternative
    $('#tabs li a').featureList({
        output          :   '#output li',
        start_item      :   1
    });
    });
  </script>
  <script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
  </script>
  <script type="text/javascript">
    var _lofmain =  $('lofslidecontent45');
    var _lofscmain = _lofmain.getElement('.lof-main-wapper');
    var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');
    var object = new LofFlashContent( _lofscmain, 
                                      _lofnavigator,
                                      _lofmain.getElement('.lof-navigator-outer'),
                                      { fxObject:{ transition:Fx.Transitions.Quad.easeInOut,  duration:800},
                                         interval:3000,
                                         direction :'hrleft' } );
        object.start( true, _lofmain.getElement('.preload') );
    </script>

Answer 1

Here's some jQuery documentation explaining how to use other libraries in conjunction with jQuery.

From the docs:

 <html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     var $j = jQuery.noConflict();

     // Use jQuery via $j(...)
     $j(document).ready(function(){
       $j("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

So, for your particular case, try:

<!-- Agenda slider -->
<script type="text/javascript" language="javascript" src="js/mootools-1.2.1-core.js"></script>
<script type="text/javascript" language="javascript" src="js/mootools-1.2-more.js"></script>
<script type="text/javascript" language="javascript" src="js/lofslidernews.mt12.js"></script>
<!-- Datepicker -->
<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>
<script>
 var $j = jQuery.noConflict();
</script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.datepicker.js"></script>

Then, don't forget to change all references from $ to $j when you are trying to use jQuery rather than MooTools.

Combined JS-libraries

Question

1 answers

solution1
2 ACCPTED 2011-08-19 13:01:02

Combined JS-libraries

Question

1 answers

solution1 2 ACCPTED 2011-08-19 13:01:02

solution1
2 ACCPTED 2011-08-19 13:01:02