Public Forums 71,145 posts

[kymmy Friend kymmyJoin date: July 2010Posts: 17Downloads:0Uploads:0 Thanks: 9 Thanked: 11 times in 1 posts]

#157078

Anyone know if Gavick has released a 1.2mootools compatible update of his mega menu system?? Just that it is effecting any template with mega/kunena1.6 combo..

[kymmy Friend kymmyJoin date: July 2010Posts: 17Downloads:0Uploads:0 Thanks: 9 Thanked: 11 times in 1 posts]

#365460

Yahoo!!! Found it. You still need to change the DRAG.BASE.EXTEND to DRAG.EXTEND in ja.ddmod.js (line 451) and also there’s a change (it’s relevant to kyanite2 but no idea about other templates) to be done on line 197 of Mega.css (change 50px to 0) but here’s the mega.js (you will need to activate mootools 1.2 upgrade so unfortunately if you have any other 1.2 problems this will cause issues)

Tested on Firefox 3.6.12 and IE9 (normal and compat modes)

var jaMegaMenuMoo = new Class({
options: {
slide: true, //enable slide
duration: 300, //slide speed. lower for slower, bigger for faster
transition: Fx.Transitions.Sine.easeOut,
fading: false, //Enable fading
bgopacity: 0.9, //set the transparent background. 0 to disable, 0<bgopacity<1: the opacity of the background
delayHide: 500,
position: 'bottom', //position of toolbar.
rtl: 0, //right to left mode
direction: 'down',
action: 'mouseenter', //mouseenter or click
tips: true, //enable jatooltips
hidestyle: 'fastwhenshow',
//events
onItemShow: null, //function (li) {}
onItemHide: null, //function (li) {}
onItemShowComplete: null, //function (li) {}
onItemHideComplete: null, //function (li) {}
onFirstShow: null, //First child show
onLastHide: null, //All child hidden
onLoad: null //Load done
},

initialize: function(menu, options){
this.setOptions(options);
this.menu = menu;
this.childopen = new Array();

this.items = null;
this.imageloaded = false;
//window.addEvent('load', this.start.bind(this));
this.start();

},

startedcheck: function () {
this.imageloaded = true;
if (!this.items) this.start();
},

start: function () {
this.menu = $(this.menu);
//preload images
var images = this.menu.getElements ('img');
if (images && images.length && !this.imageloaded) {
var imgs = [];
images.each (function (image) {imgs.push(image.src)});
if (imgs.length) {
new Asset.images(imgs, {
onComplete: function(){
this.imageloaded = true;
this.start();
}.bind(this)
});

this.starttimeout = setTimeout (this.startedcheck.bind(this), 3000); //check if start after 10 seconds. If not, call start manual
return ;
}
}
clearTimeout (this.starttimeout);
if (this.items) return; //started already
this.items = this.menu.getElements ('li.mega');
//this.items.setStyle ('position', 'relative');
this.items.each (function(li) {
//link item
if ((a = li.getElement('a.mega')) && this.isChild (a, li)) li.a = a;
else li.a = null;
//parent
li._parent = this.getParent (li);
//child content
if ((childcontent = li.getElement('.childcontent')) && this.isChild (childcontent, li)) {
li.childcontent = childcontent;
li.childcontent_inner = li.childcontent.getElement ('.childcontent-inner-wrap');
var coor = li.getElement('.childcontent-inner').getCoordinates ();
li._w = coor.width;
li._h = coor.height;
li._ml = li.childcontent.getStyle('margin-left').toInt();
li._mt = li.childcontent.getStyle('margin-top').toInt();
li.level0 = li.getParent().hasClass('level0');
//
//li.childcontent.setStyles ({'width':li._w+50, 'height':li._h});
if (li._w) {
li.childcontent.setStyles ({'width':li._w});
li.childcontent_inner.setStyles ({'width':li._w});
}
//fix for overflow
li.childcontent_inner1 = li.childcontent.getElement ('.childcontent-inner');
li.childcontent_inner1.ol = false;
//Fix for IE: correct render at the first show
li.childcontent_inner1.setStyle ('min-height', li.childcontent_inner1.offsetHeight);
if (li.childcontent_inner1.getStyle ('overflow') == 'auto' || li.childcontent_inner1.getStyle ('overflow') == 'scroll') {
li.childcontent_inner1.ol = true;
//fix for ie6/7
if (window.ie6 || window.ie7) {
//li.childcontent_inner1.setStyle ('position', 'relative');
}

if (window.ie6) {
li.childcontent_inner1.setStyle ('height', li.childcontent_inner1.getStyle ('max-height') || 400);
}
}

//show direction
if (this.options.direction == 'up') {
if (li.level0) {
//li.childcontent.setStyle ('top', -li.childcontent.offsetHeight); //ajust top position
li.childcontent.setStyle ('bottom', li.offsetHeight);
} else {
li.childcontent.setStyle ('bottom', 0);
}
}
}
else li.childcontent = null;

if (li.childcontent && this.options.bgopacity) {
//Make transparent background
var bg = new Element ('div', {'class':'childcontent-bg'});
bg.injectTop (li.childcontent_inner);
bg.setStyles ({'width':'100%', 'height':li._h, 'opacity':this.options.bgopacity,
'position': 'absolute', 'top': 0, 'left': 0, 'z-index': 1
});
if (li.childcontent.getStyle('background')) bg.setStyle ('background', li.childcontent.getStyle('background'));
if (li.childcontent.getStyle('background-image')) bg.setStyle ('background-image', li.childcontent.getStyle('background-image'));
if (li.childcontent.getStyle('background-repeat')) bg.setStyle ('background-repeat', li.childcontent.getStyle('background-repeat'));
if (li.childcontent.getStyle('background-color')) bg.setStyle ('background-color', li.childcontent.getStyle('background-color'));
li.childcontent.setStyle ('background', 'none');
li.childcontent_inner.setStyles ({'position':'relative', 'z-index': 2});
}

if (li.childcontent && (this.options.slide || this.options.fading)) {
//li.childcontent.setStyles ({'width': li._w});
li.childcontent.setStyles ({'left':'auto'});
if (li.childcontent.hasClass ('right')) li.childcontent.setStyle ('right', 0);
if (this.options.slide) {
li.childcontent.setStyles ({'left':'auto', 'overflow':'hidden'});
if (li.level0) {
if (this.options.direction == 'up') {
li.childcontent_inner.setStyle ('bottom', -li._h-20);
} else {
li.childcontent_inner.setStyle ('margin-top', -li._h-20);
}

} else {
li.childcontent_inner.setStyle ('margin-left', -li._w-20);
}
}
if (this.options.fading) {
li.childcontent_inner.setStyle ('opacity', 0);
}
//Init Fx.Styles for childcontent
li.fx = new Fx.Styles(li.childcontent_inner, {duration: this.options.duration, transition: this.options.transition, onComplete: this.itemAnimDone.bind(this, li)});
//effect
li.eff_on = {};
li.eff_off = {};
if (this.options.slide) {
if (li.level0) {
if (this.options.direction == 'up') {
li.eff_on ['bottom'] = 0;
li.eff_off ['bottom'] = -li._h;
} else {
li.eff_on ['margin-top'] = 0;
li.eff_off ['margin-top'] = -li._h;
}
} else {
li.eff_on['margin-left'] = 0;
li.eff_off['margin-left'] = -li._w;
}
}
if (this.options.fading) {
li.eff_on['opacity'] = 1;
li.eff_off['opacity'] = 0;
//li.eff_off['margin-top'] = -li._h;
}
}

if (this.options.action=='click') {
if (li.childcontent) {
li.addEvent('click', function(e) {
var event = new Event (e);
if (li.hasClass ('group')) return;
if (li.childcontent) {
if (li.status == 'open') {
if (this.cursorIn (li, event)) {
this.itemHide (li);
} else {
this.itemHideOthers(li);
}
} else {
this.itemShow (li);
}
} else {
if (li.a) location.href = li.a.href;
}
if(!window.ie) event.stop();
}.bind (this));

//If action is click, click on windows will close all submenus
this.windowClickFn = function (e) {
this.itemHideOthers(null);
}.bind (this);
}
li.addEvent('mouseenter', function(e) {
if (li.hasClass ('group')) return;
this.itemOver (li);
if(!window.ie) e.stop();
}.bind (this));

li.addEvent('mouseleave', function(e) {
if (li.hasClass ('group')) return;
this.itemOut (li);
if(!window.ie) e.stop();
}.bind (this));
}

if (this.options.action == 'mouseover' || this.options.action == 'mouseenter') {
li.addEvent('mouseenter', function(e) {
if (li.hasClass ('group')) return;
$clear (li.timer);
this.itemShow (li);
if(!window.ie) e.stop();
}.bind (this));

li.addEvent('mouseleave', function(e) {
if (li.hasClass ('group')) return;
$clear (li.timer);
if (li.childcontent) li.timer = setTimeout(this.itemHide.bind(this, [li, e]), this.options.delayHide);
else this.itemHide (li, e);
if(!window.ie) e.stop();
}.bind (this));
}

//when click on a link - close all open childcontent
if (li.a && !li.childcontent) {
li.a.addEvent ('click',function (e){
this.itemHideOthers (null);
//Remove current class
this.menu.getElements ('.active').removeClass ('active');
//Add current class
var p = li;
while (p) {
p.addClass ('active');
p.a.addClass ('active');
p = p._parent;
}
//new Event (e).stop();
}.bind (this));
}
},this);

if (this.options.slide || this.options.fading) {
//hide all content child
//this.menu.getElements('.childcontent').setStyle ('display', 'none');
this.menu.getElements('.childcontent').setStyle ('left', -9999);
}

//tooltips
if (this.options.tips) {
this.options.tips = this.buildTooltips ();
}

//Call onLoad
if (typeof (this.options.onLoad) == 'function') this.options.onLoad.call (this);
},

position: function (li) {
//fix position for level0
//show it
li.childcontent.setStyle ('left', 'auto');
//reposition

if (li.childcontent) {

var pos = $merge (li.getPosition(), {'w':li.childcontent.offsetWidth, 'h':li.childcontent.offsetHeight});
var win = {'x': window.getWidth(), 'y': window.getHeight()};
var scroll = {'x': window.getScrollLeft(), 'y': window.getScrollTop()};

if (li.level0) {
li.childcontent.setStyle ('margin-left', (pos['x'] + pos['w'] + li._ml > win['x'] + scroll ['x']) ? win['x'] + scroll ['x'] - pos['w'] - pos['x']:li._ml);
} else {
//sub level
if (this.options.direction == 'up') {
li.childcontent.setStyle ('bottom', pos['y']+li.offsetHeight-pos['h'] - 20 < scroll ['y']?pos['y']+li.offsetHeight-pos['h'] - scroll ['y'] - 20:0);
} else {
li.childcontent.setStyle ('margin-top', (pos['y'] + pos['h'] + 20 + li._mt > win['y'] + scroll ['y'])?win['y'] + scroll ['y'] - pos['y'] - pos['h'] - 20 : li._mt);
}
}

}

},

getParent: function (li) {
var p = li;
while ((p=p.getParent())) {
if (this.items.contains (p) && !p.hasClass ('group')) return p;
if (!p || p == this.menu) return null;
}
},

cursorIn: function (el, event) {
if (!el || !event) return false;
var pos = $merge (el.getPosition(), {'w':el.offsetWidth, 'h': el.offsetHeight});;
var cursor = {'x': event.page.x, 'y': event.page.y};

if (cursor.x>pos.x && cursor.x<pos.x+el.offsetWidth
&& cursor.y>pos.y && cursor.y<pos.y+el.offsetHeight) return true;
return false;
},

isChild: function (child, parent) {
return !!parent.getChildren().contains (child);
},

itemOver: function (li) {
li = (li[0]) ? li[0] : li;
if (li.hasClass ('haschild'))
li.removeClass ('haschild').addClass ('haschild-over');
li.addClass ('over');
if (li.a) {
li.a.addClass ('over');
}
},

itemOut: function (li) {
if (li.hasClass ('haschild-over'))
li.removeClass ('haschild-over').addClass ('haschild');
li.removeClass ('over');
if (li.a) {
li.a.removeClass ('over');
}
},

itemShow: function (li) {
clearTimeout(li.timer);
if (li.status == 'open') return; //don't need do anything
//Adjust position
//Setup the class
this.itemOver (li);
//Check if this is the first show
if (li.childcontent) {
var firstshow = true;
this.childopen.each (function (li) {
if (li.childcontent) firstshow = false;
});
if (firstshow && typeof (this.options.onFirstShow) == 'function') {
this.options.onFirstShow.call (this, li);
}
}
//push to show queue
li.status = 'open';
this.childopen.push (li);
//hide other
this.itemHideOthers (li);
if (li.childcontent) {
if (this.options.action=='click' && this.childopen.length && !this.windowClickEventAdded) {
//addEvent click for window
$(document.body).addEvent ('click', this.windowClickFn);
this.windowClickEventAdded = true;
}
//call event
if (typeof (this.options.onItemHide) == 'function') this.options.onItemHide.call (this, li);
}

if (!$defined(li.fx) || !$defined(li.childcontent)) return;

li.childcontent.setStyle ('display', 'block');
this.position (li);

li.childcontent.setStyles ({'overflow': 'hidden'});
if (li.childcontent_inner1.ol) li.childcontent_inner1.setStyles ({'overflow': 'hidden'});
li.fx.stop();
li.fx.start (li.eff_on);
//disable tooltip for this item
this.disableTooltip (li);
//if (li._parent) this.itemShow (li._parent);
},

itemHide: function (li, e) {
li = (li[0]) ? li[0] : li;
if (e && e.page) { //if event
if (this.cursorIn (li, e) || this.cursorIn (li.childcontent, e)) {
return;
} //cursor in li
var p=li._parent;
if (p && !this.cursorIn (p, e) && !this.cursorIn(p.childcontent, e)) {
p.fireEvent ('mouseleave', e); //fire mouseleave event
}
}
clearTimeout(li.timer);
this.itemOut(li);
li.status = 'close';
this.childopen.remove (li);
if (li.childcontent) {
if (this.options.action=='click' && !this.childopen.length && this.windowClickEventAdded) {
//removeEvent click for window
$(document.body).removeEvent ('click', this.windowClickFn);
this.windowClickEventAdded = false;
}
//call event
if (typeof (this.options.onItemShow) == 'function') this.options.onItemShow.call (this, li);
}

if (!$defined(li.fx) || !$defined(li.childcontent)) return;

if (li.childcontent.getStyle ('opacity') == 0) return;
li.childcontent.setStyles ({'overflow': 'hidden'});
if (li.childcontent_inner1.ol) li.childcontent_inner1.setStyles ({'overflow': 'hidden'});
li.fx.stop();
switch (this.options.hidestyle) {
case 'fast':
li.fx.options.duration = 100;
li.fx.start ($merge(li.eff_off,{'opacity':0}));
break;
case 'fastwhenshow': //when other show
if (!e) { //force hide, not because of event => hide fast
li.fx.options.duration = 100;
li.fx.start ($merge(li.eff_off,{'opacity':0}));
} else { //hide as normal
li.fx.start (li.eff_off);
}
break;
case 'normal':
default:
li.fx.start (li.eff_off);
break;
}
//li.fx.start (li.eff_off);
},

itemAnimDone: function (li) {
//hide done
if (li.status == 'close'){
//reset duration and enable opacity if not fading
if (this.options.hidestyle.test (/fast/)) {
li.fx.options.duration = this.options.duration;
if (!this.options.fading) li.childcontent_inner.setStyle ('opacity', 1);
}
//hide
//li.childcontent.setStyles ({'display': 'none'});
li.childcontent.setStyle ('left', -9999);
//enable tooltip
this.enableTooltip (li);
//call event
if (typeof (this.options.onItemHideComplete) == 'function') this.options.onItemHideComplete.call (this, li);
//Check if there's no child content shown, raise event onLastHide
var lasthide = true;
this.childopen.each (function (li) {
if (li.childcontent) lasthide = false;
});
if (lasthide && typeof (this.options.onLastHide) == 'function') this.options.onLastHide.call (this, li);
}

//show done
if (li.status == 'open'){
li.childcontent.setStyles ({'overflow': ''});
if (li.childcontent_inner1.ol) li.childcontent_inner1.setStyles ({'overflow-y': 'auto'});
if (typeof (this.options.onItemShowComplete) == 'function') this.options.onItemShowComplete.call (this, li);
}
},

itemHideOthers: function (el) {
var fakeevent = null
if (el && !el.childcontent) fakeevent = {};
var curopen = this.childopen.copy();
curopen.each (function(li) {
if (li && typeof (li.status) != 'undefined' && (!el || (li != el && !li.hasChild (el)))) {
this.itemHide(li, fakeevent);
}
},this);
},

buildTooltips: function () {
this.tooltips = new Tips (this.menu.getElements ('.hasTipThumb'), {'className':'gk-toolbar-thumb', 'fixed':true, offsets:{'x':100, 'y': this.options.direction=='up'?-180:20}, 'direction': this.options.direction});
this.tooltips2 = new Tips (this.menu.getElements ('.hasTipThumb2'), {'className':'gk-toolbar-thumb2', 'fixed':true, offsets:{'x':100, 'y': 20}, 'direction': this.options.direction});
this.tooltips3 = new Tips (this.menu.getElements ('.hasTipThumb3'), {'className':'gk-toolbar-thumb3', 'fixed':true, offsets:{'x':100, 'y': 20}, 'direction': this.options.direction});
return true;
},

disableTooltip: function (el) {
if (this.options.tips) this.tooltips.disableTip(el);
return;
},

enableTooltip: function (el) {
if (this.options.tips) this.tooltips.enableTip(el);
return;
}

});

jaMegaMenuMoo.implement(new Options);

4 users say Thank You to kymmy for this useful post

1. sharpdome
2. vibracdrw
3. symbic
4. ghostik

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#365491

Hi,

Great to hear you have it solved now and shared the tips. I have marked this threads solved accordingly. 🙂

[abrill Friend abrillJoin date: October 2008Posts: 140Downloads:0Uploads:29 Thanks: 42 Thanked: 1 times in 1 posts]

#374098

Can you clarify where to locate these files? I’m not able to find DRAG.BASE.EXTEND or ja.ddmod.js. Thanks!

[kymmy Friend kymmyJoin date: July 2010Posts: 17Downloads:0Uploads:0 Thanks: 9 Thanked: 11 times in 1 posts]

#374108

<em>@abrill 218002 wrote:</em><blockquote>Can you clarify where to locate these files? I’m not able to find DRAG.BASE.EXTEND or ja.ddmod.js. Thanks!</blockquote>

/templates/ja_TEMPLATE/js/ja.ddmod.js
/templates/ja_TEMPLATE/js/menu/mega.js

Obviously change ja_TEMPLATE for whichever mega menu JA template you use

3 users say Thank You to kymmy for this useful post

1. thuanlq
2. Arvind Chauhan
3. tdawson

[thuanlq Friend thuanlqJoin date: October 2010Posts: 528Downloads:0Uploads:29 Thanks: 8 Thanked: 121 times in 99 posts]

#374168

Hi @kymmy,

That is great solution, thanks

1 user says Thank You to thuanlq for this useful post

1. kymmy

[vibracdrw Friend vibracdrwJoin date: January 2011Posts: 6Downloads:0Uploads:3 Thanks: 4 Thanked: 1 times in 1 posts]

#374277

Thanks Kymmy, work well with ja-ores
P.

1 user says Thank You to vibracdrw for this useful post

1. kymmy

[symbic Friend symbicJoin date: July 2008Posts: 25Downloads:0Uploads:0 Thanks: 11 Thanked: 3 times in 1 posts]

#430050

Thanks – also fixed issue with JA Halite

[ghostik Friend ghostikJoin date: April 2010Posts: 71Downloads:2Uploads:1 Thanks: 2 Thanked: 11 times in 4 posts]

#434887

thank you for this solution
ja_halite now work 😉

[jpipkin Friend jpipkinJoin date: February 2012Posts: 1Downloads:0Uploads:0]

#439891

Thanks for the fix,

Is it possible to set the drop downs to disappear immediately on mouse out. Right now it seems to delay a bit. I tried setting the delayHide lower but it doesn’t seem to do anything.

Any help would be appreciated.

[Author]

Posts