САБЖ. Интересно стало, возможно ли подобное реализовать, чтобы при захвате границы ячейка ее размеры можно было растянуть? Может кто-то уже реализовывал подобное?



Присоединённый файл ( Кол-во скачиваний: 10 )
 tbl1.jpg

теоретически возможно, и по-мойму даже не очень трудно, но я не пробовал.

Где то видел скрипт, которым можно таблицы строить, ну и ячейки развигать. Могу еще раз поискать, если надо.

Можно, по идее отлавливая onmouse(move|down|up) на таблице, но учитывая геморойность оных(резолюция mousemove низкая, через раз), придётся отлавливать события и на документе.

Мне это же нужно сделать для окошка в меню для нашего FAQ'а, код простой, выложу попозже сюда. Я применил другой подход, двигаем только рамку, как отпустили кнопку, окошко приняло новые размеры. Так браузер не нагружается при сложной разметке(меню).

А как узнать что мышка находиться в области рамки (над рамкой)?

Reptor открывай отдельный топик

Ничего узнавать не надо, регистрируем событие у рамки, как только мыша появляется над рамкой, событие зажигается.

Да, пожалуйста, если не трудно, покажите пару примеров.

Ещё один вопрос: а что это за событие?

Цитата(Reptor @ 29.3.2005, 20:43)

ё один вопрос: а что это за событие?

Цитата(Reptor @ 29.3.2005, 20:35)

А как узнать что мышка находиться в области рамки (над рамкой)?

onmouseover ( подробнее тут )

Цитата(IZ @ 29.3.2005, 20:43)

Да, пожалуйста, если не трудно, покажите пару примеров.

Чего именно? Полностью скрипта или только события?

Aliance, алгоритма действий, пожалуйста.

IZ@TOP

Цитата(Sardar @ 29.3.2005, 17:24)

Можно, по идее отлавливая onmouse(move|down|up) на таблице, но учитывая геморойность оных(резолюция mousemove низкая, через раз), придётся отлавливать события и на документе. Мне это же нужно сделать для окошка в меню для нашего FAQ'а, код простой, выложу попозже сюда. Я применил другой подход, двигаем только рамку, как отпустили кнопку, окошко приняло новые размеры. Так браузер не нагружается при сложной разметке(меню).

Вот тебе и алгоритм и надежда на скрипт 8)) Скрипт довольно большой, не думаю что я его напишу быстрее чем Sardar. Хотя можно попробовать :-) Только наводящий вопрос: это обязательно делать только таблицей, или можно контейнерами (вид будет такой же...)

Ну это понятно. Ладно, сознаюсь, хочу пример У меня всегда проблемы были с этими событиями и лолгикой их работы.

Я вроде нечал понимать что к чему. Но вот столкнулся с проблемой: как узнать ширину srcElement если она явно не задана?
И какое событие мне нужно использовать чтобы поймать перетаскивание ячейки? Другими словами - когда мышкой хватаем край ячейка и тащим.
Нашел вроде:

Код

document.getElementById('id').attachEvent('ondrag', func);

? Что-то вроде этого?
Нет, это похоже не то. Мне надо наверное сначало onmousedown поймать, потом действовать по onmousemove, после чего отслеживать onmouseup?

Все, с перетаскиванием разобрался. Теперь нужно только получить текущую ширину объекта.
Добавлено @ 10:31
Да, еще бы кто подсказал как при определенном событии изменить курсор?
Добавлено @ 10:32
Вот кстате, работает. Только не совсем так как надо:

Код

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Resample table test</title> <style>     * {         color:#999999;         font-family:Verdana;         font-size:11px;     }          td {         color:#999999;     }     a.resample {         color:#666666;         font-weight:normal;         text-decoration:underline;     }          th.resample {         color:#666666;         font-weight:normal;         background-image:url('resample-title.jpg');         cursor:default;     }          table.resample {         border-color:#FFFFFF;         border-style:solid;         border-collapse:collapse;         border-width:1px;     }          td {         border-color:#F8F8F3;     }     div.resample {         width:80%;         height:300;         overflow-x:auto;         overflow-y:auto;         border-color:#CCCCCC;         border-style:solid;         border-collapse:collapse;         border-width:1px;         padding:1px;     }      </style> </head> <body> <div class="resample" id="table">     <table class="resample" border="1" cellspacing="0" cellpadding="4">      <tr id="retr" height="29" onMouseMove="el_resize(event);">        <th id="1" class="resample" align="center"><a href="?asort=id" class="resample">ID</a></th>        <th id="2" class="resample" align="left"><a href="?asort=name" class="resample">Название</a></th>        <th id="3" class="resample" align="left"><a href="?asort=man" class="resample">Производитель</a></th>             <th id="4" class="resample" align="right"><a href="?asort=price" class="resample">Цена</a></th>             <th id="4" class="resample" align="right"><a href="?asort=ad,name" class="resample">AD</a></th>       </tr>      <tr>        <td align="center" bgcolor="#F7F7F4">1</td>        <td>АККПЛС/43-8567 с турбоподсосом</td>        <td bgcolor="#F7F7F4">/Германика Паллас/</td>        <td align="right">5 865.35</td>        <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>       </tr>      <tr>        <td align="center" bgcolor="#F7F7F4">2</td>        <td>АККПЛС/43-8568 с турбоподсосом</td>        <td bgcolor="#F7F7F4">/Германика Паллас/</td>        <td align="right">5 666.58</td>        <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>       </tr>      <tr>        <td align="center" bgcolor="#F7F7F4">3</td>        <td>Турбина ПТС84/887 трехскоростная с водонагревом </td>        <td bgcolor="#F7F7F4">/Атлас ДИЗЕЛЬ/</td>        <td align="right">3 458.00 </td>        <td align="right"><input type="checkbox" name="checkbox" value="checkbox"></td>       </tr>      <tr>        <td align="center" bgcolor="#F7F7F4">4</td>        <td>Турбина ПТС84/888 трехскоростная с водонагревом </td>        <td bgcolor="#F7F7F4">/Атлас ДИЗЕЛЬ/</td>        <td align="right">28 645.56 </td>        <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>       </tr>      <tr>        <td align="center" bgcolor="#F7F7F4">5</td>        <td>Турбина ПТС84/889 трехскоростная с водонагревом </td>        <td bgcolor="#F7F7F4">/Атлас ДИЗЕЛЬ/</td>        <td align="right">32 555.00 </td>        <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>       </tr>      </table> </div> <script> var el_actived    = false; var el_use        = null; var el_x = 0, el_y = 0, el_offset = 0; document.getElementById('retr').attachEvent('onmousedown', el_down); document.getElementById('retr').attachEvent('onmouseup', el_up); function el_down(e) {     if(e.button != 1) return false;     el_actived        = true;     el_use        = e.srcElement;     el_use.style.cursor    = 'e_resize';     el_offset    = e.offsetX;     getPosition(el_use);     window.status = (e.offsetX + " - " + el_x + " - " + el_y); } function el_up(e) {     el_x    = 0;     el_y    = 0;     el_actived        = false;     el_use.style.cursor    = 'default'; } function el_resize(e) {     if(el_use != e.srcElement) return false;     if(el_actived != true) return false;     if(el_offset > e.offsetX) {         el_use.width    = e.offsetX + 1;     } else {         el_use.width    = e.offsetX - 1;     }     window.status = (e.offsetX + " - " + el_x + " - " + el_y);     return true; } function getPosition(obj) {      while(obj) {         el_x += obj.offsetLeft;         el_y += obj.offsetTop;         obj = obj.offsetParent;         } } alert(document.styleSheets[0].cssRules[0].selectorText); </script> </body> </html>

Я вот думаю, как бы мне сделать так, чтобы ячейка получила свойство перетаскиваемого объекта? А то когда мышку передвигаешь, курсор начинает мигать, время от времени превращаясь в песочные часы.

IZ@TOP
Видимо ты используешь onmousemove, а как сказал Sardar - лучше onmouseup|down, меньше глюков и тормозов будет.

Цитата(IZ @ 30.3.2005, 10:23)

Да, еще бы кто подсказал как при определенном событии изменить курсор?

Изменяя св-во CSS:

Код

ссылкаНаЭлемент.style.cursor = "help";

Aliance, так я при помощи всего вместе делаю. Просто надо алгаритм продумать как следует. А в остальном вроде почти то что я хотел.

Кстате, как изменить свойства ячейки, чтобы при зажатии мыши и ее передвижении не выделялся текст в ней?

Еще с курсором. Если ты нзаметил, в коде есть такая строка:

Код

el_use.style.cursor    = 'e_resize';

Но она не работает... как быть?
Добавлено @ 13:53
И да, как узнать точную ширину ячейки если width не задан?

Цитата(IZ @ 30.3.2005, 13:46)

И да, как узнать точную ширину ячейки если width не задан?

Лучше всего ее задавать. А вообще подобные темы поднимались, есть решения (ClientHeight, OffsetHeight...) но мы остановились на том, что лучшее - scrollHeight.

Да, по поводу курсора. даже если так назначить в стилях что он e_resize, все равно он превратится в обычный и будет мигать часиками песочными. Как это можно исправить?

PS Новая версия скрипта:

Код

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Resample table test</title> <style>     * {         color:#999999;         font-family:Verdana;         font-size:11px;     }          td {         color:#999999;     }     a.resample {         color:#666666;         font-weight:normal;         text-decoration:underline;     }          th.resample {         color:#666666;         font-weight:normal;         background-image:url('resample-title.jpg');         cursor:default;         cursor:e-resize;     }          table.resample {         border-color:#FFFFFF;         border-style:solid;         border-collapse:collapse;         border-width:1px;     }          td {         border-color:#F8F8F3;     }     div.resample {         width:80%;         height:300;         overflow-x:scroll;         overflow-y:auto;         border-color:#CCCCCC;         border-style:solid;         border-collapse:collapse;         border-width:1px;         padding:1px;     }      </style> </head> <body id="body1"> <div class="resample" id="table">     <table class="resample" border="1" cellspacing="0" cellpadding="4">      <tr id="retr" height="29" onMouseMove="el_resize(event);">        <th id="1" class="resample" align="center"><a href="?asort=id" class="resample">ID</a></th>        <th id="2" class="resample" align="left"><a href="?asort=name" class="resample">Название</a></th>        <th id="3" class="resample" align="left"><a href="?asort=man" class="resample">Производитель</a></th>             <th id="4" class="resample" align="right"><a href="?asort=price" class="resample">Цена</a></th>             <th id="5" class="resample" align="right"><a href="?asort=ad,name" class="resample">AD</a></th>       </tr>      <tr>        <td align="center" bgcolor="#F7F7F4">1</td>        <td axis="1">АККПЛС/43-8567 с турбоподсосом</td>        <td bgcolor="#F7F7F4">/Германика Паллас/</td>        <td align="right">5 865.35</td>        <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>       </tr>      <tr>        <td align="center" bgcolor="#F7F7F4">2</td>        <td>АККПЛС/43-8568 с турбоподсосом</td>        <td bgcolor="#F7F7F4">/Германика Паллас/</td>        <td align="right">5 666.58</td>        <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>       </tr>      <tr>        <td align="center" bgcolor="#F7F7F4">3</td>        <td>Турбина ПТС84/887 трехскоростная с водонагревом </td>        <td bgcolor="#F7F7F4">/Атлас ДИЗЕЛЬ/</td>        <td align="right">3 458.00 </td>        <td align="right"><input type="checkbox" name="checkbox" value="checkbox"></td>       </tr>      <tr>        <td align="center" bgcolor="#F7F7F4">4</td>        <td>Турбина ПТС84/888 трехскоростная с водонагревом </td>        <td bgcolor="#F7F7F4">/Атлас ДИЗЕЛЬ/</td>        <td align="right">28 645.56 </td>        <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>       </tr>      <tr>        <td align="center" bgcolor="#F7F7F4">5</td>        <td>Турбина ПТС84/889 трехскоростная с водонагревом </td>        <td bgcolor="#F7F7F4">/Атлас ДИЗЕЛЬ/</td>        <td align="right">32 555.00 </td>        <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>       </tr>      </table> </div> <script> var el_actived    = false; var el_use        = null; var el_x = 0, el_y = 0, el_offset = 0, el_client = 0; document.getElementById('retr').attachEvent('onmousedown', el_down); document.getElementById('body1').attachEvent('onmouseup', el_up); function el_down(e) {     if(e.button != 1) return false;     el_actived        = true;     el_use            = e.srcElement;     el_offset        = e.offsetX;     el_client        = e.clientX;     el_use.width    = e.offsetX;     getPosition(el_use); } function el_up(e) {     el_x    = 0;     el_y    = 0;     el_actived        = false; } function el_resize(e) {     if(el_actived != true) return false;          el_use.width    = (e.clientX - el_x);          window.status = ("offset: " + e.offsetX + " / client: " + e.clientX);     return true; } function getPosition(obj) {      while(obj) {         el_x += obj.offsetLeft;         el_y += obj.offsetTop;         obj = obj.offsetParent;         } } </script> </body> </html>

Цитата(Aliance @ 30.3.2005, 15:04)

Лучше всего ее задавать. А вообще подобные темы поднимались, есть решения (ClientHeight, OffsetHeight...) но мы остановились на том, что лучшее - scrollHeight.

Кстате, не очень катит. Я хочу чтобы при увеличении ширины ячеек, раздвигалась и таблица. И при уменьшении таблица соответственно уменьшалась. А она уперается в край div'a и не хочет дальше автоматом увеличиваться
Добавлено @ 14:47
Кстате, scrollHeight подошел бы, но он показывает иногда значение меньше настоящей ширины ячейки

Цитата(IZ @ 30.3.2005, 14:21)

Как это можно исправить?

Видимо он автоматом при событии заменяется. Нужно при отлове этого события его менять, а не в целом, думаю.

Цитата(IZ @ 30.3.2005, 14:41)

А она уперается в край div'a и не хочет дальше автоматом увеличиваться

Может стоит "поиграть" со св-вами clip и overflow

Aliance, overflow вроде выставлен. А зачем нужен clip?

Цитата(Aliance @ 30.3.2005, 19:33)

Видимо он автоматом при событии заменяется. Нужно при отлове этого события его менять, а не в целом, думаю.

Как это сделать?

Признаюсь чесно небыло времени твой скрипт изучить, пишу то, что думаю, не знаю, может у тебя так же:
- как мне кажется, ты сделал замену курсора просто в скрипте, надо же именно в функции, которая вызывается при твоем событии (onmousemove?). Эм... el_resize() - вроде она :-)

Aliance, да я как только не делал. Не хочет курсор e_resize типа делаться. А вот help, hand пожалуйста...

Цитата(IZ @ 30.3.2005, 14:41)

Кстате, scrollHeight подошел бы, но он показывает иногда значение меньше настоящей ширины ячейки

Может натолкнет на мыслю: http://forum.vingrad.ru/index.php?showtopi...=0&#entry351933

Цитата(IZ @ 31.3.2005, 07:52)

Aliance, да я как только не делал. Не хочет курсор e_resize типа делаться. А вот help, hand пожалуйста...

А, ну сразу бы сказал. Где-то у меня был файлик с примером обращения к курсорам, т.е. их типы. Может просто такого нет... Гляну - позже напишу.

IZ@TOP звыняюсь что поздно, со вмеменем был нуль...

Вот универсальный код, позволяющий ресайзить несколько таблиц на странице. Просто задаём ряд с которым нужно работать, обычно это первый. В примере для яности сделал два. В коментах немного не нормативной лексики, уж Опера слишком достала...

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Resize table test</title> <style>     * {         color:#999999;         font-family:Verdana;         font-size:11px;     }          a.resample {         color:#666666;         font-weight:normal;         text-decoration:underline;     }          th.resample {         color:#666666;         font-weight:normal;         background-image:url('resample-title.jpg');         cursor:default;      }          table.resample {         border-color:#FFFFFF;         border-style:solid;         border-collapse:collapse;         border-width:1px;     }          td {         border-color:#F8F8F3;         color:#999999;         overflow-x: auto;     }     div.resample {         width:80%;         height:300;         overflow-x:scroll;         overflow-y:auto;         border-color:#CCCCCC;         border-style:solid;         border-collapse:collapse;         border-width:1px;         padding:1px;     }     </style> <script type="text/javascript"> <!-- //=====================- IE 5.0 Events Update -================================== /** * ИЕ не поддерживает W3C модель событий, вообще не традиционные события в ИЕ * убогие на нет. Пишем своё, совместимое с W3C. */ function ensureAddEventListener(obj) {  if(!obj.addEventListener) obj.addEventListener=myEventListener; } function myEventListener(name, func, dummyDirection) {   if(!this.elisteners) this.elisteners={};   if(!this.elisteners[name]) this.elisteners[name]=[];   for(var i=0; i<this.elisteners[name].length; i++) if(this.elisteners[name][i][0]==func) return;   var nm="mev_" + name+"_"+this.elisteners[name].length+"_"+Math.floor(Math.random()*1000);   this[nm]=func;     this.elisteners[name].push([func, nm]);   if(typeof(this["on"+name])=="function" && this["on"+name]!=myEventHandler) {     var tfunc=this["on"+name];     this["on"+name]=null;     this.addEventListener(name, tfunc, false);   }   this["on"+name]=myEventHandler; } function myEventHandler(evt) {   var ev=window.event? window.event: evt;   if(ev && this.elisteners[ev.type])    for(var i=0; i<this.elisteners[ev.type].length; i++) {      this[this.elisteners[ev.type][i][1]](ev);   } } //====================- Some funcs -================== function getPosition(obj) {   var x=0, y=0;   while(obj) {     x+=obj.offsetLeft;     y+=obj.offsetTop;     obj=obj.offsetParent;   }   return {x: x, y:y}; } //=======================- Resizeble tbale ======================= /** * Инициализируем заголовок таблицы, ставим события и т.д.  Передаётся * параметром первый ряд таблицы(любой, которым ресайзим), а именно тег TR. */  function initResizebleTable(hdr) {    ensureAddEventListener(hdr);    hdr.addEventListener("mousemove", tableMouseMoveHandler, false);    hdr.addEventListener("mouseup", tableMouseUpHandler, false);    for(var i=0; i<hdr.cells.length; i++) {      ensureAddEventListener(hdr.cells[i]);      hdr.cells[i].addEventListener("mousemove", cellMouseMoveHandler, false);      hdr.cells[i].addEventListener("mousedown", cellMouseDownHandler, false);    } } //ловим по всему ряду, дабы не глючило с "летающими мышами" function tableMouseMoveHandler(ev) {     if(!this.moving||!this.movingTarget) return;     var pos=getPosition(this);     var tpos=getPosition(this.movingTarget);     var wdt=((ev.clientX-pos.x)-tpos.x); /** Двигать нужно все ячейки в колонке, иначе работать не будет */         var prnt=this.parentNode;     while(prnt.tagName.toUpperCase()!="TABLE") prnt=prnt.parentNode;     if(prnt==null || prnt.tagName.toUpperCase()!="TABLE") return; //мало ли кто как проглючит...     for(var i=0; i<prnt.rows.length; i++)       prnt.rows[i].cells[this.movingTarget.cellIndex].style.width=(wdt>=1)? wdt: 1; /* так, опера проебала мозги с уменьшением таблицы. похоже это никак не фиксится, как видишь в дебаг слое видно что ширина расчитывается правильно, только опера на неё забила... */ //    document.getElementById("dbg1").innerHTML="<b>width: "+wdt+"</b>"; } function tableMouseUpHandler() {    this.moving=false;    this.movingTarget=null; } function cellMouseMoveHandler(ev) { // не советую использовать ev.offsetX, в Oпере работает через ж0пu, давая негативные числа    var pos=getPosition(this);    var ex=ev.clientX-pos.x; /* Внимание: Опера глючит с курсорами, при смене на default крусор может  остатся resize. Это пока никак не обходится... =/ */     if(ex>this.offsetWidth-5) this.style.cursor="e-resize";     else this.style.cursor="default"; //    document.getElementById("dbg").innerHTML="<b>Move parent: "+ex+", "+(this.offsetWidth-5)+"</b>";     return true; } function cellMouseDownHandler(ev) {     var pos=getPosition(this);     var ex=ev.clientX-pos.x;     if(ex>this.offsetWidth-5) {       this.parentNode.moving=true;       this.parentNode.movingTarget=this;     } return true; } //--> </script> </head> <body> <div class="resample" id="table">     <table class="resample" border="1" cellspacing="0" cellpadding="4">      <tr id="retr" height="29">        <th id="1" class="resample" align="center"><a href="?asort=id" class="resample">ID</a></th>        <th id="2" class="resample" align="left"><a href="?asort=name" class="resample">Название</a></th>        <th id="3" class="resample" align="left"><a href="?asort=man" class="resample">Производитель</a></th>        <th id="4" class="resample" align="right"><a href="?asort=price" class="resample">Цена</a></th>        <th id="5" class="resample" align="right"><a href="?asort=ad,name" class="resample">AD</a></th>       </tr>      <tr>        <td align="center" bgcolor="#F7F7F4">1</td>        <td axis="1">АККПЛС/43-8567 с турбоподсосом</td>        <td bgcolor="#F7F7F4">/Германика Паллас/</td>        <td align="right">5 865.35</td>        <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>       </tr>      <tr id="tt"> <!-- по этому ряду тоже будем ресайзить, просто для примера -->        <td align="center" bgcolor="#F7F7F4">2</td>        <td>АККПЛС/43-8568 с турбоподсосом</td>        <td bgcolor="#F7F7F4">/Германика Паллас/</td>        <td align="right">5 666.58</td>        <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>       </tr>      <tr>        <td align="center" bgcolor="#F7F7F4">3</td>        <td>Турбина ПТС84/887 трехскоростная с водонагревом </td>        <td bgcolor="#F7F7F4">/Атлас ДИЗЕЛЬ/</td>        <td align="right">3 458.00 </td>        <td align="right"><input type="checkbox" name="checkbox" value="checkbox"></td>       </tr>      <tr>        <td align="center" bgcolor="#F7F7F4">4</td>        <td>Турбина ПТС84/888 трехскоростная с водонагревом </td>        <td bgcolor="#F7F7F4">/Атлас ДИЗЕЛЬ/</td>        <td align="right">28 645.56 </td>        <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>       </tr>      <tr>        <td align="center" bgcolor="#F7F7F4">5</td>        <td>Турбина ПТС84/889 трехскоростная с водонагревом </td>        <td bgcolor="#F7F7F4">/Атлас ДИЗЕЛЬ/</td>        <td align="right">32 555.00 </td>        <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>       </tr>      </table> </div> <script> //инициализируем первый ряд initResizebleTable(document.getElementById("retr")); /* инициализируем и второй ряд для примера, коду по барабану какие таблицы и какие ряды используются, хоть всё на странице */ initResizebleTable(document.getElementById("tt")); </script> <div id="dbg"></div> <div id="dbg1"></div> </body> </html>

Код закоментирован. Первая секция это поддержка W3C модели событий для ИЕ. Отлов нажатий и т.п. происхоидит на ячейках, а отлов onmousemove на ряду, этим мы сбережём нервы на событиях Оперы и вообще на медленных машинах. Отжатие(onmouseup) ловится тоже на ряду, хотя еще нужно и на всей таблице. Другими словами начни ресайз, затем тяни мышь к низу за ряд таблицы и там отпусти, затем вернись назад на ряд - ряд за тобой бегает, хотя кнопка отпущенна

Что не ясно - спрашивай.

Sardar, молодец. Замечательно получилось. Очень.


IZ@TOP, вот демо кода Sardarа:
http://www.sut.net.ru/scripts/javascript/s...zabletable.html

Это сообщение отредактировал(а) Aliance - 24.4.2005, 19:24

Sardar, еще такая штука меня интересует - надо чтобы при увкелечении таблицы, ее ячеек, отображался скролл у дива. т.е. таблица расширялась и при этом уходила внутрь дива. С штукой как отпускание клавишы мыщи за границами строки я разобрался. Твой пример изучу чуть позже. Однако есть еще пожелание, чтобы при ресайзе всеже курсор был выставлен в e_resize. Под оперу можно не оптимизировать. Все равно будут с этим работать на ИЕ и только.
+ вам что хорошо что хватать можно только рядом с границей таблицы. это есть гуд. Но надо еще усовершенствовать этот механизм - если это возможно. Если невозможно, так и скажите, чтобы я не мучился.
Еще прикол в том что каждый раз при наведении на ряд пытается подгрузится картинка Прикол да и только.

PS Комменты классные

Такс, думаю еще вопросы у меня будут.

Кстате, тема как мне кажется заслуживает того чтобы отправится в FAQ. В ней очень много того чтобы пригодилось в жизненных ситуациях. Мне так кажется - поправтье если я ошибаюсь.

Цитата(IZ @ 1.4.2005, 23:44)

Sardar, еще такая штука меня интересует - надо чтобы при увкелечении таблицы, ее ячеек, отображался скролл у дива. т.е. таблица расширялась и при этом уходила внутрь дива.

Задаем опр. размера ширину и высоту, ставим у div`а в style - overflow: auto;

Цитата(IZ @ 1.4.2005, 23:44)

С штукой как отпускание клавишы мыщи за границами строки я разобрался. Твой пример изучу чуть позже. Однако есть еще пожелание, чтобы при ресайзе всеже курсор был выставлен в e_resize.

Код

ссылка_на_элемент.style.cursor = "e-resize";

Это у тебя работает? Должно... Можно просто в CSS стилях прописать...

Цитата(IZ @ 1.4.2005, 23:44)

+ вам что хорошо что хватать можно только рядом с границей таблицы. это есть гуд. Но надо еще усовершенствовать этот механизм - если это возможно. Если невозможно, так и скажите, чтобы я не мучился.

Не понял :-)

Цитата(IZ @ 1.4.2005, 23:44)

Еще прикол в том что каждый раз при наведении на ряд пытается подгрузится картинка

Какая картинка? Не понял :-D

Цитата(IZ @ 1.4.2005, 23:44)

Кстате, тема как мне кажется заслуживает того чтобы отправится в FAQ. В ней очень много того чтобы пригодилось в жизненных ситуациях. Мне так кажется - поправтье если я ошибаюсь

Ну мне так не кажется, впервые вижу такую нужду. Скрипт канечно очень хороший, но не значит что он должен быть в FAQе, это мое имхо.

Цитата(Aliance @ 1.4.2005, 22:09)

Sardar, молодец. Замечательно получилось. Очень.

Aliance пасиб, просто были свободные 40 минут

Цитата(IZ @ 1.4.2005, 22:44)

надо чтобы при увкелечении таблицы, ее ячеек, отображался скролл у дива. т.е. таблица расширялась и при этом уходила внутрь дива.

Я так понял ты хочешь безгранично увеличивать таблицу, так что бы она вращалась в диве со скролами. Собстна геморой в том, что mousemove придётся отлавливать и на странице, может лучше отказатся от этого слоя, пусть юзер крутит таблицу в окне.

Цитата(IZ @ 1.4.2005, 22:44)

С штукой как отпускание клавишы мыщи за границами строки я разобрался.

Нужно сбросить флаг moving у ряда таблицы. Это не сложно, пробежавшись очисткой по всем рядам. Записывать текущий ряд в отдельную переменную нельзя(из-за возможной ошибки), мой код работает с неограниченным количеством таблиц, в них неограниченное количество рядов, которые изменяют размеры страницы. Это большое отличие от твоего кода

Цитата(IZ @ 1.4.2005, 22:44)

Однако есть еще пожелание, чтобы при ресайзе всеже курсор был выставлен в e_resize.

А оно так и есть или у тебя не меняется курсор в моём примере? Что за браузер?

Цитата(IZ @ 1.4.2005, 22:44)

Все равно будут с этим работать на ИЕ и только.

Верное решение забить на Оперу, сбережёшь кучу нервов . Пиши лучше под ИЕ и Мозиллу, это не сложно, но за то плюс на будущее.

Цитата(IZ @ 1.4.2005, 22:44)

Но надо еще усовершенствовать этот механизм - если это возможно.

Как усовершенствовать?

Цитата(IZ @ 1.4.2005, 22:44)

Еще прикол в том что каждый раз при наведении на ряд пытается подгрузится картинка smile Прикол да и только.

Какой-то глюк, в коде картинки не используются, ну разве что в стилях картинка в бекграунде стоит, я их из твоего примера взял.

Цитата(IZ @ 1.4.2005, 22:44)

Кстате, тема как мне кажется заслуживает того чтобы отправится в FAQ.

Не стоит, трудно что найти. ФАК должен быть кратким и доступным для поиска. А вот инфу достать и по полочкам разложить стоит, как будет время

Aliance, еслибы ты заглянул в код, то увидел, там все именно так стоит (это я про курсор и скролл в диве).

Sardar, А курсор превращается при движении мыши в обычный с мельканиями песочных часиков Браузер ИЕ 6.
Ладно, в остальном сам попробую разобраться.

Ну на счет фака, имел ввиду что в общем может такой код пригодится. Т.е. наверняка при некоторых обстаятельствах может понадобиться код перетаскивания зажатого мышкой объекта.

Глядел в код...

Цитата(IZ @ 2.4.2005, 18:09)

курсор превращается при движении мыши в обычный с мельканиями песочных часиков  Браузер ИЕ 6.

У меня тоже, но все нормально. Хотя у меня Service Pack стоит...

Цитата(IZ @ 2.4.2005, 18:09)

Ну на счет фака, имел ввиду что в общем может такой код пригодится. Т.е. наверняка при некоторых обстаятельствах может понадобиться код перетаскивания зажатого мышкой объекта.

Drag'n'drop? Ну да, об этом уже говорили. Нужно. Дойдут руки - напишем :-)