Buenas a todos,
A ver si alguien me puede echar un cable porque me esty volviendo loco. No tengo mnucha idea de JS y estoy montando una web con dos menues (uno superior y uno lateral). Ambos son en JS y entre ellos se estan dando de patadas. El problema esta en el document.addEvent del JS1. Seguro que es una tontería pero no se me ocurre nada.
¿Alguien tiene alguna idea?
Muchas gracias!
Codigo JS1
var JA_Collapse_Mod = new Class({
initialize: function(myElements) {
options = Object.extend({
transition: Fx.Transitions.quadOut
}, {});
this.myElements = myElements;
var exModules = excludeModules.split(',');
exModules.each(function(el,i){exModules[i]='Mod'+el});
myElements.each(function(el, i){
el.elmain = $E('.jamod-content',el);
el.titleEl = $E('h3',el);
if(!el.titleEl) return;
if (exModules.contains(el.id)) {
el.titleEl.className = '';
return;
}
el.status = 'show';
el.openH = el.elmain.getStyle('height').toInt();
el.elmain.setStyle ('overflow','hidden');
el.titleEl.addEvent('click', function(e){
e = new Event(e).stop();
el.toggle();
});
el.toggle = function(){
if (el.status=='hide') el.show();
else el.hide();
}
el.show = function() {
el.titleEl.className='show';
var ch = el.elmain.getStyle('height').toInt();
new Fx.Style(el.elmain,'height',{onComplete:el.toggleS tatus}).start(ch,el.openH);
}
el.hide = function() {
el.titleEl.className='hide';
var ch = el.elmain.getStyle('height').toInt();
new Fx.Style(el.elmain,'height',{onComplete:el.toggleS tatus}).start(ch,0);
}
el.toggleStatus = function () {
el.status=(el.status=='hide')?'show':'hide';
Cookie.set(el.id,el.status,{duration:365});
}
if(!el.titleEl.className) el.titleEl.className=rightCollapseDefault;
if(el.titleEl.className=='hide') el.hide();
});
}
});
document.addEvent ('domready', function(e){
var jamod = new JA_Collapse_Mod ($$('.jamod'));
});
Codigo JS2
var JASplit2Menu = new Class({
initialize: function(el, options){
this.options = Object.extend({
minwidth: 0,
maxwidth: 0,
offwidth: 50,
navwidth: 0,
showactive: true
}, options || {});
if (!el) return;
this.element = $(el);
items = this.element.getChildren();
if (items.length < 2) return;
this._active = 0;
var hw = 0;
var sp = this.element.getElements('span')[0].getStyle('padding-left').toInt() + this.element.getElements('span')[0].getStyle('padding-right').toInt();
if(this.options.showactive){
if (!this.options.minwidth || !this.options.maxwidth)
{
if(!this.options.navwidth) this.options.navwidth = this.element.offsetWidth;
this.options.minwidth = Math.round((this.options.navwidth - this.options.offwidth)/items.length);
this.options.maxwidth = this.options.navwidth - this.options.minwidth*(items.length-1);
}
hw = this.options.minwidth
} else {
if (this.options.minwidth && this.options.maxwidth)
{
this.options.normalwidth = Math.floor(((items.length-1)*this.options.minwidth + this.options.maxwidth) / items.length);
}else{
if(!this.options.navwidth) this.options.navwidth = this.element.offsetWidth;
this.options.normalwidth = Math.floor(this.options.navwidth / items.length);
this.options.navwidth = this.options.normalwidth * items.length
this.options.minwidth = this.options.normalwidth - Math.round(this.options.offwidth/(items.length-1));
this.options.maxwidth = this.options.navwidth - this.options.minwidth*(items.length-1);
}
hw = this.options.normalwidth
}
var fx = new Fx.Elements(items, {wait: false, duration: 200, transition: Fx.Transitions.quadOut});
items.each(function(item, i){
//check if this is active one
if(this.options.showactive){
if (item.className.test('active'))
{
this._active = i;
item.setStyle('width', this.options.maxwidth);
} else {
item.setStyle('width', this.options.minwidth);
}
}else{
item.setStyle('width', this.options.normalwidth);
}
item.getElements('span').setStyle('width', hw-sp);
if (item.getElements('img'))
{
item.getElements('a').setStyles({'position': 'relative','overflow':'hidden'});
item.getElements('img').setStyles({
'position': 'absolute',
'left': (hw + 1) + 'px'
});
}else{
item.getElements('a').setStyle('background-position', (hw + 1) + 'px 0');
}
item.addEvent('mouseenter', function(e){
var obj = {};
obj[i] = {
'width': [item.getStyle('width').toInt(), this.options.maxwidth]
};
items.each(function(other, j){
if (other != item){
var w = other.getStyle('width').toInt();
if (w != this.options.minwidth) obj[j] = {'width': [w, this.options.minwidth]};
}
}.bind(this));
fx.start(obj);
}.bind(this));
}.bind(this));
this.element.setStyles({'width': this.options.navwidth+5,'visibility':'visible'});
this.element.addEvent('mouseleave', function(e){
if (this.options.showactive)
{
this._doactive();
}else{
var obj = {};
items.each(function(other, j){
obj[j] = {'width': [other.getStyle('width').toInt(), this.options.normalwidth]};
}.bind(this));
fx.start(obj);
}
}.bind(this));
if (this.options.showactive)
{
this._doactive = function(){
var obj = {};
var item = items[this._active]
obj[this._active] = {
'width': [item.getStyle('width').toInt(), this.options.maxwidth]
};
items.each(function(other, j){
if (other != item){
var w = other.getStyle('width').toInt();
if (w != this.options.minwidth) obj[j] = {'width': [w, this.options.minwidth]};
}
}.bind(this));
fx.start(obj);
}.bind(this);
}
}
});
