Здравствуйте, уважаемые форумчане. Снова обращаюсь за помощью. Туплю страшно, на первый взгляд, с простой задачей:
1. Есть <div class="node">(node).
2. Внутри него имеются еще дивы, но интересует только <div class="inner">(остальные дивы служат в декоративных целях, так что они никак не влияют на работу)(inner).
3. У node фиксированная ширина и высота.
4. У inner width:auto, height:auto. Он содержит текст. Текст может не влезать в node(его может быть много).
5. При загрузке, если текста много, мы его не показываем, но вешаем события на node, чтобы при наведении мышью, node принимал размеры inner.
Так вот, когда ТОЛЬКО ширина inner больше node, или ТОЛЬКО высота inner больше node - все работает на ура. Но когда оба этих параметра больше, чем у node - работает только увелечение ширины, а увеличение высоты - ну никак.
Смотрел в файербаге, высота увеличивается, но потом тут же возвращается в исходное положение.
Вот код:
if((innerWidth > nodeWidth) || (innerHeight > nodeHeight)) {
(innerWidth > nodeWidth)?(flag1=true):(flag1=false);
(innerHeight > nodeHeight)?(flag2=true):(flag2=false);
node.appendChild(resize);
inner_text.each(function(span, i) {
arr_char[i] = span.get('text');
});
var pre_last_span = '';
for(var i=inner_text.length; i--;) {
while((node.getElement('.inner').getSize().y - nodeHeight) > 12) {
pre_last_span = inner_text[i-1].get('html');
inner_text[i].setStyle('display', 'none');
inner_text[i-1].set('text', '...');
}
}
var fx = new Fx.Elements([node, node.getElement('.node_bg'), node.getElement('.node_b'), node.getElement('.inner'), node.getElement('.node_r')], {duration: 250, transition: Fx.Transitions.Sine.easeOut, wait:false});
node.addEvents({
'mouseenter':function(e){
e.stopPropagation();
node.getElement('.inner').getElements('span').each(function(span, i) {
if(span.get('html') == '...') {
span.set('html', pre_last_span)
}
if(span.getStyle('display')=='none') {
span.setStyle('display', 'inline');
}
});
innerHeight = this.getElement('.inner').getSize().y;
fx.start({
'0':{
'width':(flag1)?innerWidth:nodeWidth,
'left':(flag1)?(nodeLeft - (innerWidth-nodeWidth)/2):nodeLeft,
'height': (flag2)?innerHeight:nodeHeight,
'top':(flag2)?(nodeTop - (innerHeight-nodeHeight)/2):node.getStyle('top').toInt()
},
'1':{
'width':(flag1)?(innerWidth-8):(nodeWidth-8),
'height':(flag2)?(innerHeight-6):(nodeHeight-6)
},
'2':{
'width':(flag1)?(innerWidth-8):(nodeWidth-8)
},
'3':{
'left':(flag1)?0:innerLeft
},
'4':{
'height':(flag2)?(innerHeight-6):(nodeHeight-6)
}
});
resize.setStyle('display', 'none');
},
'mouseleave':function(e) {
fx.start({
'0':{
'width': nodeWidth,
'left':nodeLeft,
'height': nodeHeight,
'top':nodeTop
},
'1':{
'width':nodeWidth-8,
'height':nodeHeight-6
},
'2':{
'width': nodeWidth-8
},
'3':{
'left':innerLeft
},
'4':{
'height':nodeHeight-6
}
});
for(var i=inner_text.length; i--;) {
while((node.getElement('.inner').getSize().y - nodeHeight) > 12) {
pre_last_span = inner_text[i-1].get('html');
inner_text[i].setStyle('display', 'none');
inner_text[i-1].set('text', '...');
}
}
resize.setStyle('display', 'block');
}
});
}
node.getElement('.inner').setStyles({
'top':(node.getSize().y - innerHeight)/2,
'left':(nodeWidth - node.getElement('.inner').getSize().x)/2
});
var innerLeft = node.getElement('.inner').getStyle('left').toInt();
P.S.: все переменные заданы, пусть вас не смущает отсутствие var'ов.
P.P.S.: пробовал в обработчиках событий обращаться к элементу через this - таже картина.