jquery and mootools conflict

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.

Those all look like jQuery lines, so replace each $ with jQuery.

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?

Yes, they should be all that's needed.

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);
                }
              );
            }
          }
        );
      }
    }
  });
};

Select allOpen in new window

Do not do jQuery.(, use jQuery( without the dot.

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?

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?

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.

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()});

Select allOpen in new window

If necessary, put the jQuery.noConflict() call in a separate script block in the appropriate location.

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...

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!!!!

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


>"<

Thank you~~~~~~~~

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.

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!