Всем доброго времени суток!
У меня раздвигающийся блок вниз, по клику.
Проблемы следующие:
1. Работает в FF и от IE9, в остальных не хочет работать.
2. Для IE8 использовала obj.currentStyle, но он работает при условии, что в стилях задана высота, а у меня высота раздвигающегося блока динамична, если высоту не задаю в стилях, то при алерте передает NaN
3. В IE8 не передает высоту в скрытый див, подозрение на innerHTML
4. В Chrome тоже не работает, высоту в скрытый див innerHTML передает,но не получает его (mt = objWarpHeight.innerHTML)
Вот код:
window.onload = function(){
var obj = document.getElementById('Inner');//разворачиваемый див
var computedStyle = window.getComputedStyle ? getComputedStyle(obj,null) : obj.currentStyle;
var height = parseInt(computedStyle.height);//получение текущей высоты дива с id="Inner"
var objWarpHeight = document.getElementById('warpHeight');//скрытый див
objWarpHeight.innerHTML = height;//вставка высоты в скрытый див
obj.style.height = 0 + "px";//при загрузке обнуляет высоту
}
Функция, которая разворачивает див
function move_obj(id,mt,mts)
{
var obj = document.getElementById(id);
var computedStyle = window.getComputedStyle ? getComputedStyle(obj,null) : obj.currentStyle;
var height = parseInt(computedStyle.height);//получает текущую пошаговую высоту
if (mt == 10000 && height == 0)//при условии, если высота равна 0, то разворачивает див
{
var objWarpHeight = document.getElementById('warpHeight');//передаем высоту из скрытого дива
mt = objWarpHeight.innerHTML;//в переменную mt передается значение высоты
}
if (mt == 10000 && height != 0)//при условии, если высота не равна 0, то сворачивает див
{
mt = 0;
mts = mts*(-1);
}
if ((height < mt && mts > 0 )||(height > mt && mts < 0 ))
{
height = height+mts;
obj.style.height = height + 'px';
// Ниже запускаем тайм аут в 1 мс, после чего перезапускаем фунvкцию.
// Функция перезапускается до тех пор, пока выполняется условие.
window.setTimeout(function(){move_obj(id,mt,mts)}, 1);
}
}
<div id="wrap">
<div class="pic" onClick="move_obj('Inner',10000,5)">ещё компоненты</div><!--клик-->
<div id="Inner">
<pre>
<input type="checkbox" name="3" value="yes" checked> Виноград
<input type="checkbox" name="4" value="yes" checked> Ананас
<input type="checkbox" name="7" value="yes" checked> Апельсин
<input type="checkbox" name="3" value="yes" checked> Виноград
<input type="checkbox" name="4" value="yes" checked> Ананас
<input type="checkbox" name="7" value="yes" checked> Апельсин
<input type="checkbox" name="4" value="yes" checked> Шоколад
<input type="checkbox" name="4" value="yes" checked> Каша
<input type="checkbox" name="7" value="yes" checked> End
</pre>
</div>
</div><!--end #wrap-->
#wrap{overflow:hidden;}
#wrap pre{
margin:0 -170px;
padding-top:10px;
}
#wrap .pic{
width:284px;
padding:3px 0;
background:pink;
text-align:center;
}
#wrap #Inner{
width:284px;
background: url("PodborBlock/innerBack.png") repeat-y;
}
