mootools slideshow not working with JQuery. Need help !

Question

I am working on a site http://tapasya.co.in where i just impemented mootools slideshow. But I noticed that menubar that i was using stopped working, it was supposed to drop horizontaly but it is not being displayed now. I have used jquery for it. Please see the source of the web page. What can be the problem ? Mootools conflicting with javascript or some other problem.

If I tries to use $.noConflict() it throws me an error in script

Uncaught TypeError: Object function (B,C){if(B&&B.$family&&B.uid){return B}var A=$type(B);return($[A])?$[A](B,C,this.document):null} has no method 'noConflict'

I tried the given solution below. But it is not working.

    <script type="text/javascript" src="<%= ResolveUrl("~/Js/jquery-1.3.2.min.js") %>" ></script>
    <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/SlideShow/js/mootools.js") %>"></script>
    <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/SlideShow/js/slideshow.js") %>"></script>
    <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/SlideShow/js/lightbox.js") %>"></script>

    <script type="text/javascript">
    // <![CDATA[
    $.noConflict();
        var timeout    = 500;
        var closetimer = 0;
        var ddmenuitem = 0;

        function ddmenu_open(){
            ddmenu_canceltimer();
            ddmenu_close();
            ddmenuitem = $(this).find('ul').css('visibility', 'visible');
        }

        function ddmenu_close(){ 
            if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
        }

        function ddmenu_timer(){
            closetimer = window.setTimeout(ddmenu_close, timeout);
        }

        function ddmenu_canceltimer(){  
            if(closetimer){  
                window.clearTimeout(closetimer);
                closetimer = null;
        }}

        $(document).ready(function(){  
            $('#ddmenu > li').bind('mouseover', ddmenu_open)
            $('#ddmenu > li').bind('mouseout',  ddmenu_timer)
        });

        document.onclick = ddmenu_close;
    // ]]>  
    </script>

    <script type="text/javascript">     
    //<![CDATA[
      window.addEvent('domready', function(){
        var data = {
          '1.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, 
          '2.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, 
          '3.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, 
          '4.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }
        };

         // Note the use of "linked: true" which tells Slideshow to auto-link all slides to the full-size image.
         //http://code.google.com/p/slideshow/wiki/Slideshow#Options:
        var mootoolsSlideshow = new Slideshow('divbanner', data, {loader:true,captions: true, delay: 5000,controller: false, height: 370,linked: false, hu: '<%= ResolveUrl("~/Scripts/SlideShow/Images/") %>', thumbnails: true, width: 1002});
        // Here we create the Lightbox instance.
        // In this case we will use the "close" and "open" callbacks to pause our show while the modal window is visible.
    var box = new Lightbox({ 
              'onClose': function(){ this.pause(false); }.bind(mootoolsSlideshow), 
              'onOpen': function(){ this.pause(true); }.bind(mootoolsSlideshow) 
            });     
      });
    //]]>
    </script>   

Answer 1

It looks as if you're getting a conflict between MooTools and jQuery. Firefox is showing this error.

$(document).ready is not a function Line 40

MooTools uses the $ as a pointer to document.getElementById. jQuery extends $ aswell with its own methods. It looks as if MooTools is overwriting the declaration of $ by jQuery and thus removing the 'ready' method.

In order to solve this problem, have a read through this article http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/

To be quite honest with you though, mixing Javascript libraries is not a good idea. Your best move would be to find a pre-existing MooTools library to perform the task that your newly added jQuery library is supposed to.

Answer 2

<script type="text/javascript">


$.noConflict();
  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
  });
  // Code that uses other library's $ can follow here.
</script>

Answer 3

<p>jQuery sets this paragraph's color to red but MooTools sets the border color.</p>
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript">
    //no conflict jquery
    jQuery.noConflict();
    //jquery stuff
    (function($) {
        $('p').css('color','#ff0000');
    })(jQuery);
</script>
<script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript">
    //moo stuff
    window.addEvent('domready',function() {
        $$('p').setStyle('border','1px solid #fc0');
    });
</script>

Answer 4

After a lot of googling I finally got my solution

See these changes, rest will remain same

jQuery.noConflict();

    jQuery(document).ready(function($){  
        $('#ddmenu > li').bind('mouseover', ddmenu_open)
        $('

   <script type="text/javascript">
    // <![CDATA[
    jQuery.noConflict();

        jQuery(document).ready(function($){  
            $('#ddmenu > li').bind('mouseover', ddmenu_open)
            $('#ddmenu > li').bind('mouseout',  ddmenu_timer)

        var timeout    = 500;
        var closetimer = 0;
        var ddmenuitem = 0;

        function ddmenu_open(){
            ddmenu_canceltimer();
            ddmenu_close();
            ddmenuitem = $(this).find('ul').css('visibility', 'visible');
        }

        function ddmenu_close(){ 
            if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
        }

        function ddmenu_timer(){
            closetimer = window.setTimeout(ddmenu_close, timeout);
        }

        function ddmenu_canceltimer(){  
            if(closetimer){  
                window.clearTimeout(closetimer);
                closetimer = null;
        }}



        document.onclick = ddmenu_close;
        });
    // ]]>  
    </script>

    <script type="text/javascript">     
    //<![CDATA[
      window.addEvent('domready', function(){
        var data = {
          '1.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, 
          '2.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, 
          '3.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, 
          '4.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }
        };

         // Note the use of "linked: true" which tells Slideshow to auto-link all slides to the full-size image.
         //http://code.google.com/p/slideshow/wiki/Slideshow#Options:
        var mootoolsSlideshow = new Slideshow('divbanner', data, {loader:true,captions: true, delay: 5000,controller: false, height: 370,linked: false, hu: '<%= ResolveUrl("~/Scripts/SlideShow/Images/") %>', thumbnails: true, width: 1002});
        // Here we create the Lightbox instance.
        // In this case we will use the "close" and "open" callbacks to pause our show while the modal window is visible.
    var box = new Lightbox({ 
              'onClose': function(){ this.pause(false); }.bind(mootoolsSlideshow), 
              'onOpen': function(){ this.pause(true); }.bind(mootoolsSlideshow) 
            });     
      });
    //]]>
    </script>   

Refrence