JavaScript: ReSize таблицы мышью
Такая ситуация
Надо сделать чтобы бордер таблицы можно было ресайзить мышкой по горизонтали..
проблема в том, что когда размер уже изменен и мне надо отпустить кнопку мыши и зафиксировать положение - оно по прежднему двигается.. не силен в яваскриптах пока мись, вот нуждаюсь в помоще.
вот код:
буду очень благодарен за помощь
Надо сделать чтобы бордер таблицы можно было ресайзить мышкой по горизонтали..
проблема в том, что когда размер уже изменен и мне надо отпустить кнопку мыши и зафиксировать положение - оно по прежднему двигается.. не силен в яваскриптах пока мись, вот нуждаюсь в помоще.
вот код:
Код:
<script type="text/javascript">
var ie5 = (document.getElementById && document.all);
var ns6 = (document.getElementById && !document.all);
stop = 0;
function trackMouse(e){
if(!stop){
if(document.getElementById){
Xpos= (ie5)?event.x:(ns6)?clientX=e.clientX:false;
Ypos= (ie5)?event.y:(ns6)?clientY=e.clientY:false;
}
if(Xpos<166)
document.getElementById('panel').style.width=Xpos-15+'px';
else
document.getElementById('panel').style.width='164px';
document.onmousemove=trackMouse;
}
stop = 0;
}
function stopDragging()
{
stop = 1;
}
</script>
</head>
<table id="table" width="50%" height="50%" border="1" cellspacing="0" cellpadding="0" style="border-left: 1px solid rgb(235, 235, 235);">
<tr>
<td style="width:164px" valign="top" id="panel">aaaaaaaaa</td>
<td valign="top" align="left" ><div style="height:100%; width:25px; background:red;" onMouseDown="trackMouse(event,0)" onMouseUp="stopDragging()"></div></td>
</tr>
</table>
</html>
var ie5 = (document.getElementById && document.all);
var ns6 = (document.getElementById && !document.all);
stop = 0;
function trackMouse(e){
if(!stop){
if(document.getElementById){
Xpos= (ie5)?event.x:(ns6)?clientX=e.clientX:false;
Ypos= (ie5)?event.y:(ns6)?clientY=e.clientY:false;
}
if(Xpos<166)
document.getElementById('panel').style.width=Xpos-15+'px';
else
document.getElementById('panel').style.width='164px';
document.onmousemove=trackMouse;
}
stop = 0;
}
function stopDragging()
{
stop = 1;
}
</script>
</head>
<table id="table" width="50%" height="50%" border="1" cellspacing="0" cellpadding="0" style="border-left: 1px solid rgb(235, 235, 235);">
<tr>
<td style="width:164px" valign="top" id="panel">aaaaaaaaa</td>
<td valign="top" align="left" ><div style="height:100%; width:25px; background:red;" onMouseDown="trackMouse(event,0)" onMouseUp="stopDragging()"></div></td>
</tr>
</table>
</html>
буду очень благодарен за помощь
Вуаля:
Код:
<html>
<body onMouseUp="MouseUp(event);">
<script type="text/javascript">
var ie5 = (document.getElementById && document.all);
var ns6 = (document.getElementById && !document.all);
function MouseMove(e) {
if(document.getElementById) {
Xpos= (ie5)?event.x:(ns6?e.clientX:false);
Ypos= (ie5)?event.y:(ns6?e.clientY:false);
}
if(Xpos<166) {
if (Xpos<16) Xpos=16;
document.getElementById('panel').style.width=Xpos-15+'px';
}
else
document.getElementById('panel').style.width='164px';
}
function MouseDown(e) {
document.onmousemove=MouseMove;
}
function MouseUp(e) {
if (document.onmousemove==MouseMove) document.onmousemove="";
}
</script>
</head>
<table id="table" width="50%" height="50%" border="1" cellspacing="0" cellpadding="0" style="border-left: 1px solid rgb(235, 235, 235);">
<tr>
<td style="width:164px" valign="top" id="panel">aaaaaaaaa</td>
<td valign="top" align="left" ><div style="height:100%; width:25px; background:red;" onMouseDown="MouseDown();" onMouseUp="MouseUp();"></div></td>
</tr>
</table>
</html>
<body onMouseUp="MouseUp(event);">
<script type="text/javascript">
var ie5 = (document.getElementById && document.all);
var ns6 = (document.getElementById && !document.all);
function MouseMove(e) {
if(document.getElementById) {
Xpos= (ie5)?event.x:(ns6?e.clientX:false);
Ypos= (ie5)?event.y:(ns6?e.clientY:false);
}
if(Xpos<166) {
if (Xpos<16) Xpos=16;
document.getElementById('panel').style.width=Xpos-15+'px';
}
else
document.getElementById('panel').style.width='164px';
}
function MouseDown(e) {
document.onmousemove=MouseMove;
}
function MouseUp(e) {
if (document.onmousemove==MouseMove) document.onmousemove="";
}
</script>
</head>
<table id="table" width="50%" height="50%" border="1" cellspacing="0" cellpadding="0" style="border-left: 1px solid rgb(235, 235, 235);">
<tr>
<td style="width:164px" valign="top" id="panel">aaaaaaaaa</td>
<td valign="top" align="left" ><div style="height:100%; width:25px; background:red;" onMouseDown="MouseDown();" onMouseUp="MouseUp();"></div></td>
</tr>
</table>
</html>
А из-за чего не работает в опере и ие ?
[QUOTE=cooli0]А из-за чего не работает в опере и ие ?[/QUOTE]
Работает в MSIE, оперу не пробовал, но тоже должно работать.
Работает в MSIE, оперу не пробовал, но тоже должно работать.
В ие у кого как значит, потому что я проверял на нескольких компьютерах, везде было, что document.onmousemove = false; не поддерживался и бордер постоянно был привязан к курсору. А еще баг, что двигался не сам бордер как бы, а белый слой...это если в первой тдэхе есть какие-то данные, если нету, то работает нормально...но они ведь там есть))