title: Combined JS-libraries
body: <p>I use two different kinds of JS libraries, but apparently, there is an error when using both.  </p>
  
  <p>The two things I use are <code>Mootools</code> and <code>JQuery UI</code> </p>
  
  <pre><code>&lt;!-- Agenda slider --&gt;
  &lt;script type="text/javascript" language="javascript" src="js/mootools-1.2.1-core.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="js/mootools-1.2-more.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="js/lofslidernews.mt12.js"&gt;&lt;/script&gt;
  &lt;!-- Datepicker --&gt;
  &lt;script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="js/ui/jquery.ui.datepicker.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>When I use this snippet, the <code>Agenda slider</code> failed to work. However, when I delete this line  </p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"&gt;&lt;/script&gt;  
  </code></pre>
  
  <p>The <code>Agenda slider</code> works again, but the <code>Datepicker</code> refuses to work...</p>
  
  <p>How can I combine both scripts and end up with two working javascript-based elements?</p>
  
  <p><strong>EDIT</strong><br>
  The only JS included in the <code>.php</code> files are those three little snippets  </p>
  
  <pre><code> &lt;script language="javascript"&gt;
      $(document).ready(function() {
              $.featureList(
          $("#tabs li a"),
          $("#output li"), {
              start_item  :   1
          }
      );
  
      // Alternative
      $('#tabs li a').featureList({
          output          :   '#output li',
          start_item      :   1
      });
      });
    &lt;/script&gt;
    &lt;script&gt;
      $(function() {
          $( "#datepicker" ).datepicker();
      });
    &lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      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') );
      &lt;/script&gt;
  </code></pre>