Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1172
  • Last Modified:

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

0
xenia27
Asked:
xenia27
  • 11
  • 9
3 Solutions
 
ZylochCommented:
Include the Mootools library before the jQuery library. Before your code, do

jQuery.noConflict();

Replace all $() for jQuery calls with jQuery().
0
 
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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 11
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now