-
AuthorPosts
-
kymmy Friend
kymmy
- Join date:
- July 2010
- Posts:
- 17
- Downloads:
- 0
- Uploads:
- 0
- Thanks:
- 9
- Thanked:
- 11 times in 1 posts
December 5, 2010 at 12:26 pm #157078Anyone 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
kymmy
- Join date:
- July 2010
- Posts:
- 17
- Downloads:
- 0
- Uploads:
- 0
- Thanks:
- 9
- Thanked:
- 11 times in 1 posts
December 6, 2010 at 6:19 pm #365460Yahoo!!! 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');
//repositionif (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);
Anonymous Moderator
JA Developer
- Join date:
- September 2014
- Posts:
- 9914
- Downloads:
- 207
- Uploads:
- 152
- Thanks:
- 1789
- Thanked:
- 2008 times in 1700 posts
December 7, 2010 at 1:57 am #365491Hi,
Great to hear you have it solved now and shared the tips. I have marked this threads solved accordingly. 🙂
abrill Friend
abrill
- Join date:
- October 2008
- Posts:
- 140
- Downloads:
- 0
- Uploads:
- 29
- Thanks:
- 42
- Thanked:
- 1 times in 1 posts
January 27, 2011 at 3:49 pm #374098Can you clarify where to locate these files? I’m not able to find DRAG.BASE.EXTEND or ja.ddmod.js. Thanks!
kymmy Friend
kymmy
- Join date:
- July 2010
- Posts:
- 17
- Downloads:
- 0
- Uploads:
- 0
- Thanks:
- 9
- Thanked:
- 11 times in 1 posts
January 27, 2011 at 5:04 pm #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.jsObviously change ja_TEMPLATE for whichever mega menu JA template you use
3 users say Thank You to kymmy for this useful post
thuanlq Friend
thuanlq
- Join date:
- October 2010
- Posts:
- 528
- Downloads:
- 0
- Uploads:
- 29
- Thanks:
- 8
- Thanked:
- 121 times in 99 posts
vibracdrw Friend
vibracdrw
- Join date:
- January 2011
- Posts:
- 6
- Downloads:
- 0
- Uploads:
- 3
- Thanks:
- 4
- Thanked:
- 1 times in 1 posts
symbic Friend
symbic
- Join date:
- July 2008
- Posts:
- 25
- Downloads:
- 0
- Uploads:
- 0
- Thanks:
- 11
- Thanked:
- 3 times in 1 posts
December 17, 2011 at 4:34 am #430050Thanks – also fixed issue with JA Halite
ghostik Friend
ghostik
- Join date:
- April 2010
- Posts:
- 71
- Downloads:
- 2
- Uploads:
- 1
- Thanks:
- 2
- Thanked:
- 11 times in 4 posts
January 22, 2012 at 9:38 pm #434887thank you for this solution
ja_halite now work 😉February 24, 2012 at 5:17 pm #439891Thanks 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.
-
AuthorPosts
This topic contains 10 replies, has 8 voices, and was last updated by jpipkin 12 years, 6 months ago.
We moved to new unified forum. Please post all new support queries in our New Forum