a part of my script:
window.addEvent('domready', function() {
new SlideoutMenu();
initialize: function()
{
// FF2 Mac screws up the menu display. give the m the basic menu
if (Browser.Platform.mac && Browser.Engine.gecko && Browser.Engine.version == 18) {
$('menu').removeClass('js_live');
return;
}
// iPhone should have normal menu
if (Browser.Platform.ipod) {
$('menu').removeClass('js_live');
return;
}
this.bg_div = $('menu');
this.menu_div = $$('#menu #opts')[0];
this.logo_lnk = $$('#logo a')[0];
if (this.logo_lnk.hasClass('home')) {
this.is_homepage = true;
}
var rbsEasing = new Fx.Transition(Fx.Transitions.Expo, 4);
this.is_open = false;
this.bgEffect = new Fx.Tween(this.bg_div, {
unit: '%',
property: 'width',
duration: 650,
transition: rbsEasing.easeOut,
onComplete:this.bgEffectComplete.bind(this)
});
this.menuEffect = new Fx.Tween(this.menu_div, {
property: 'left',
transition: rbsEasing.easeOut,
duration: 650
});
$('logo').addEvent('mouseenter', this.showMenu.bind(this));
this.mouseBindCallback = this.moveMoveCallback.bind(this);
},
bgEffectComplete: function()
{
if (this.is_open === false) {
document.addEvent('mousemove', this.mouseBindCallback);
}
this.is_open = !this.is_open;
},
showMenu: function()
{
if (this.is_open === true) {
return;
}
this.bgEffect.start(70);
this.menuEffect.start(600, $('logo').getPosition().x);
this.logo_lnk.addClass('active');
if (this.is_homepage) {
this.logo_lnk.removeClass('home');
}
},
hideMenu: function()
{
this.bgEffect.start(0);
this.menuEffect.start(600);
this.logo_lnk.removeClass('active');
if (this.is_homepage) {
this.logo_lnk.addClass('home');
}
},
moveMoveCallback: function(e)
{
var close_right = this.menu_div.getPosition().x + 370;
if (e.page.x > close_right && e.page.y > 80 && this.is_open === true) {
document.removeEvent('mousemove', this.mouseBindCallback);
this.hideMenu();
}
}
The menu worked without any problem, then
I created a photo slideshow gallery using jquery and of course the menu stopped working. When I remove jquery it works fine again. There are many sites where it says that there is a conflict between javascript and jquery and it is not recommenced to use them together, though there is a solution with
jQuery.noConflict(); which should be added after
Also I've changed $ with $j in mooTools file jsc.js and the one I created myself. Finally it worked but very weirdly, menu would pop out, but its elements were not aligned anymore and it wouldn't disappear when I moved the cursor away... I have a feeling there is a simple solution to this, it's because I lack of knowledge here I am asking for your help
never mind, solved it with
(function($){ /* your class files here */ })(document.id);