<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 스무스 하게 열리는 tr </TITLE>
<meta http-equiv="Content-Type" content="text/html;" charset="EUC-KR">
<SCRIPT LANGUAGE="JavaScript">
<!--
var obj_height;
var old_height;
var tid;
function slide_open(tr_obj)
{
if(!tid)
{
var obj = document.getElementById(tr_obj);
if(obj.style.display == '')
{
old_height = obj_height = obj.clientHeight;
tid = setInterval("modify_height('"+tr_obj+"',0,-20)",5);
}
else
{
obj.style.display = '';
var height = obj.clientHeight;
obj_height = obj.style.height= 0;
tid = setInterval("modify_height('"+tr_obj+"',"+height+",20)",5);
}
}
}
function modify_height(tr_obj, height, value)
{
var obj = document.getElementById(tr_obj);
if((height > obj_height + value && value > 0) || (height < obj_height + value && value < 0))
{
obj_height += value;
obj.style.height = obj_height;
}
else
{
clearInterval(tid);
tid = null;
if(value < 0)
{
obj.style.display = 'none';
obj.style.height = old_height;
}
else
obj.style.height = height;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<table border="0" style="border:#000000 1px solid; width:300px; table-layout:fixed;">
<tr>
<td>
<a href="#." onClick="slide_open('test_1')">Open</a>
</td>
</tr>
<tr id="test_1" style="display:none;">
<td>
내용입니다.<br>
내용입니다.<br>
내용입니다.<br>
내용입니다.
</td>
</tr>
<tr>
<td>
<a href="#." onClick="slide_open('test_2')">Open</a>
</td>
</tr>
<tr id="test_2" style="display:none;">
<td>
내용입니다.<br>
내용입니다.<br>
내용입니다.<br>
내용입니다.
</td>
</tr>
</table>
</BODY>
</HTML>
최대한 표준에 맞춰가면서 하려고 했는데 ㅠ_ㅠ; 역시 뭔가 벗어났나 보네요;
IE에서는 잘 되는데 FF에서는 잘 안되네요
Who is online
Users browsing this forum: No registered users and 0 guests