jquery and mootools conflict

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

xenia27Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ZylochCommented:
Include the Mootools library before the jQuery library. Before your code, do

jQuery.noConflict();

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
xenia27Author Commented:
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
ZylochCommented:
Those all look like jQuery lines, so replace each $ with jQuery.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

xenia27Author Commented:
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
ZylochCommented:
Yes, they should be all that's needed.
0
xenia27Author Commented:
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
ZylochCommented:
Do not do jQuery.(, use jQuery( without the dot.
0
xenia27Author Commented:
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
ZylochCommented:
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
xenia27Author Commented:
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
ZylochCommented:
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
xenia27Author Commented:
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
ZylochCommented:
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
ZylochCommented:
If necessary, put the jQuery.noConflict() call in a separate script block in the appropriate location.
0
xenia27Author Commented:
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
xenia27Author Commented:
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
xenia27Author Commented:
But why it's not like bouncy effect shown in this link..
http://www.getintothis.com/pub/projects/rb_menu/


>"<
0
xenia27Author Commented:
Thank you~~~~~~~~
0
ZylochCommented:
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
xenia27Author Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.