Solved

jquery and mootools conflict

Posted on 2009-07-14
20
1,148 Views
Last Modified: 2012-06-27
How can I change the codes so I can use both jquery and mootools?
The following codes are the parts I am confused and not sure how to do it...

I found couple examples but I have no clue how I can change the following parts.  Please give me some advice~
1.  $.fn.rb_menu = function(options)

2.   if(options) {

        $.extend($self.options, options);

      }

3.   var $menu = $(this);

Open in new window

0
Comment
Question by:xenia27
  • 11
  • 9
20 Comments
 
LVL 36

Accepted Solution

by:
Zyloch earned 500 total points
ID: 24847975
Include the Mootools library before the jQuery library. Before your code, do

jQuery.noConflict();

Replace all $() for jQuery calls with jQuery().
0
 

Author Comment

by:xenia27
ID: 24855432
But...how can I change these lines?
$.fn.rb_menu
$.extend($self.options, options);
$menu = $(this);
I did not understand how these lines should be modified.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 24855527
Those all look like jQuery lines, so replace each $ with jQuery.
0
 

Author Comment

by:xenia27
ID: 24856028
Just for making sure what I did is correct...
I need to add a line "jQuery.noConflict();" after jQuery js files are loaded.
Then, in the jQuery js files, I need to change $() to jQuery.

Are these steps correct?
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 24856064
Yes, they should be all that's needed.
0
 

Author Comment

by:xenia27
ID: 24856192
I don't understand what's wrong with my codes...it keeps poping up an error message said I miss some identifier at the following line..
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui-1.7.min.js"></script>
<script type="text/javascript" src="js/rb_menu.js"></script>
<div id="usermenu" class="menu clearfix">
  <div class="toggle">menu &#187;</div>  
  <div class="items">  
    <ul>
      <li><a href="">Home</a></li>

      <li><a href="">Facts</a></li>
      <li><a href="">Projects</a></li>
      <li><a href="">Press</a></li>
      <li><a href="">Jobs</a></li>
      <li><a href="">Contacts</a></li>
      <li><a href="">Log in</a></li>

    </ul>
  </div>
  <script type="text/javascript">
      jQuery.('#usermenu').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false});  <--- seems like at this line
  </script>


Any idea what's wrong?
my rb_menu.js file..

======================================================

jQuery.fn.rb_menu = function(options) {

  var self = this;
 

  self.options = {

    transition:    'easeOutBounce',

    triggerEvent:  'mouseover',

    loadHideDelay : 1000,

    blurHideDelay:  500,

    effectDuration: 1000,

    hideOnLoad: true,

    autoHide: true

  }
 

  // make sure to check if options are given!

  if(options) {

    jQuery.extend(self.options, options);

  }
 

  return this.each(function() {

    var menu = this;

    var menuItems = menu.find('.items');

    var toggle = menu.find('.toggle');
 

  	// add 'hover' class to trigger for css styling

  	toggle.hover(

  	  function() {

  		  toggle.addClass('toggle-hover');

  	  },

  	  function() {

  		  toggle.removeClass('toggle-hover');

  	  }

  	);
 

  	if(self.options.hideOnLoad) {

  		if(self.options.loadHideDelay <= 0) {

  			menuItems.hide();

  			menu.closed = true;

  			menu.unbind();

  		} else {

  			// let's hide the menu when the page is loading

  			// after {loadHideDelay} milliseconds

  			setTimeout( function() {

  				menu.hideMenu();

  			}, self.options.loadHideDelay);

  		}

  	}
 

    // bind event defined by {triggerEvent} to the trigger

    // to open and close the menu

    toggle.bind(self.options.triggerEvent, function() {

      // if the trigger event is click or dblclick, we want

      // to close the menu if its open

      if((self.options.triggerEvent == 'click' || self.options.triggerEvent == 'dblclick') && !menu.closed) {

        menu.hideMenu();

      } else {

        menu.showMenu();

      }

    });
 

    menu.hideMenu = function() {

      if(menuItems.css('display') == 'block' && !menu.closed) {

        menuItems.hide(

          'slide',

          {

            direction: 'left',

            easing: self.options.transition

          },

          self.options.effectDuration,

          function() {

            menu.closed = true;

            menu.unbind();

          }

        );

      }

    }
 

    menu.showMenu = function() {

      if(menuItems.css('display') == 'none' && menu.closed) {

        menuItems.show(

          'slide',

          {

            direction: 'left',

            easing: self.options.transition

          },

          self.options.effectDuration,

          function() {

            menu.closed = false;

            if(self.options.autoHide) {

              menu.hover(

                function(e) {

                  clearTimeout(menu.timeout);

                }, 

                function(e) {

                  menu.timeout = setTimeout(function() {

                      menu.hideMenu();

                  }, self.options.blurHideDelay);

                }

              );

            }

          }

        );

      }

    }

  });

};

Open in new window

0
 
LVL 36

Expert Comment

by:Zyloch
ID: 24856649
Do not do jQuery.(, use jQuery( without the dot.
0
 

Author Comment

by:xenia27
ID: 24856665
so I changed
jQuery.('#usermenu').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false});
to
jQuery('#usermenu').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false});

Then, I got another error message said...in my rb_menu.js
this line..var menuItems = menu.find('.items');...was not supported...
what should I do?
0
 
LVL 36

Assisted Solution

by:Zyloch
Zyloch earned 500 total points
ID: 24856697
What browser are you using? You can try wrapping your

jQuery.('#usermenu').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide:  ...

line within

jQuery(function() {
  // Your code
});

0
 

Author Comment

by:xenia27
ID: 24856768
i'm just using eclipse to debug it at this moment...there are still some bugs...and it is in my mootools file and the line is...
function init(){
      $('sideBarTab').addEvent('click', function(){extendContract()});  <---- error here
}

window.addEvent('load', function(){init()});

Is there anything I need to know to use jQuery and mootools together?
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 36

Expert Comment

by:Zyloch
ID: 24856789
I've told you all you need to know. You just need to make sure that 1) MooTools library is loaded before jQuery library, and 2) there is no MooTools code before the call to jQuery.noConflict(). Barring that, I don't know what else to tell you. There's also not much we can do without knowing what the bug is.
0
 

Author Comment

by:xenia27
ID: 24857001
does it matter if I call my mootools function with window.addEvent?
var isExtended = 0;

var height = 450;

var width = 200;

var slideDuration = 1000;

var opacityDuration = 1500;
 

function extendContract(){

	

	if(isExtended == 0){

		

		sideBarSlide(0, height, 0, width);

		

		sideBarOpacity(0, 1);

	

		isExtended = 1;

		

		// make expand tab arrow image face left (inwards)

		$('sideBarTab').childNodes[0].src = $('sideBarTab').childNodes[0].src.replace(/(\.[^.]+)$/, '-active$1');

		

	}

	else{

		

		sideBarSlide(height, 0, width, 0);

		

		sideBarOpacity(1, 0);

		

		isExtended = 0;

		

		// make expand tab arrow image face right (outwards)

		

		$('sideBarTab').childNodes[0].src = $('sideBarTab').childNodes[0].src.replace(/-active(\.[^.]+)$/, '$1');

	}
 

}
 

function sideBarSlide(fromHeight, toHeight, fromWidth, toWidth){

		var myEffects = new Fx.Styles('sideBarContents', {duration: slideDuration, transition: Fx.Transitions.linear});

		myEffects.custom({

			 'height': [fromHeight, toHeight],

			 'width': [fromWidth, toWidth]

		});

}
 

function sideBarOpacity(from, to){

		var myEffects = new Fx.Styles('sideBarContents', {duration: opacityDuration, transition: Fx.Transitions.linear});

		myEffects.custom({

			 'opacity': [from, to]

		});

}
 

function init(){

	$('sideBarTab').addEvent('click', function(){extendContract()});

}
 

window.addEvent('load', function(){init()});

Open in new window

0
 
LVL 36

Assisted Solution

by:Zyloch
Zyloch earned 500 total points
ID: 24857030
No, the point is you are using the $ alias for document.getElementById(). jQuery also uses the $ alias and overwrites that' of MooTools, up until the point jQuery.noConflict() is called, which returns control of $ to MooTools. That's why all your MooTools code needs to go after the call.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 24857033
If necessary, put the jQuery.noConflict() call in a separate script block in the appropriate location.
0
 

Author Comment

by:xenia27
ID: 24857412
why this line is not correct?
var $menuItem = $("div#usermenu").find(".items");

I am still stucking on the same problem..at this moment, I try to put my function codes into <script> section...
0
 

Author Comment

by:xenia27
ID: 24857457
finally!  I got it right...just missing a lots of jQuery to replace $...I thought we don't need jQuery inside of jQuery(function())...

Thanks for your help!!!!
0
 

Author Comment

by:xenia27
ID: 24857472
But why it's not like bouncy effect shown in this link..
http://www.getintothis.com/pub/projects/rb_menu/


>"<
0
 

Author Closing Comment

by:xenia27
ID: 31603183
Thank you~~~~~~~~
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 24859913
I'm not completely sure what you are referring to, but it is possible to use $ in jQuery even with MooTools if you do the following:

jQuery(function($) {
// Use $ for jQuery here. You cannot use MooTools in this block
});

by passing in the $ as an argument to tell jQuery to override it for that block only. There are a few other sophisticated ways to replicate this behavior that maybe your effect is using. I don't know.
0
 

Author Comment

by:xenia27
ID: 24867496
I copied the exact example codes from the link aboved and it still cannot ran just like what's on the web...

not sure whethere there is something that I need to know if I wanna use this kinda tranisition effects..

Anyway, you solved my problem.  I will try to figure out this problem by myself.  Thank you~~~  Really appreciate your helps!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now