раздвижение блока вниз
Всем доброго времени суток!
У меня раздвигающийся блок вниз, по клику. Проблемы следующие: 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;
}
|
Nailya,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#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;
}
</style>
<script>
window.onload = function(){
var obj = document.getElementById('Inner');//разворачиваемый див
var height = obj.scrollHeight ;//получение текущей высоты дива с 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 height = obj.clientHeight;
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);
}
}
</script>
</head>
<body> <div id="warpHeight"></div>
<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-->
</body>
</html>
|
Nailya,
проверьте вариант выше |
рони,спасибо огромное все заработало как надо
|
| Часовой пояс GMT +3, время: 08:08. |