VPF::Table Cell resizing - Форум программистов

Tony

Дата 3.1.2007, 18:56 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12

Проблема в Oper'a, раширяет но сжaть не может.Бился smile

,но не как не могу понять по4ему.Если ктото разберётся по4ему пожлуйста напишите.

Код



<head>
<script type="text/javascript">
/**
    Tjomi4 02.1.2007
    ver $1.0
*/
function beginDrag(elementToDrag, event) {
    elementToDrag.style.left = event.clientX+"px";
    var pad = 0;
    elementToDrag.style.position="absolute";
   
    selEl = elementToDrag.parentNode.parentNode.parentNode.parentNode.parentNode;
    selTR = selEl.parentNode;
    
    arr = selTR.cells;
    var total =0;
    for(var i=0;i<selEl.cellIndex+1;i++){
        total+=parseInt(arr[i].style.width);
    }
        
    pad = parseInt(event.clientX) - total;
    if (document.addEventListener) {  
        document.addEventListener("mousemove", moveHandler, true);
        document.addEventListener("mouseup", upHandler, true);
    }else 
     if (document.attachEvent) { 
            document.attachEvent("onmousemove", moveHandler);
            document.attachEvent("onmouseup", upHandler);
    }

    if (event.stopPropagation) 
        event.stopPropagation();   
    else 
     event.cancelBubble = true;                      

    if (event.preventDefault) 
     event.preventDefault();     
    else 
     event.returnValue = false;   
     
                        
    function moveHandler(e) {
        if (!e) e = window.event; 

     elementToDrag.style.left = e.clientX+"px";
        var selEl = elementToDrag.parentNode.parentNode.parentNode.parentNode.parentNode;
        var selTR = selEl.parentNode;
        var arr = selTR.cells;
        var total = 0;
        for(var i=0;i<selEl.cellIndex;i++){
            total+=parseInt(arr[i].style.width);
        }
                
        selEl.style.width = (parseInt(e.clientX) - total - parseInt(pad))+"px";
        window.status = (parseInt(e.clientX) - total - parseInt(pad))+"px";
        if (e.stopPropagation) 
            e.stopPropagation();       
        else 
            e.cancelBubble = true;                      

        if (e.preventDefault) 
            e.preventDefault();     
        else 
            e.returnValue = false;                      
    }

    function upHandler(e) {
            if (!e) e = window.event;  
            var el = e.target||e.srcElement;
            elementToDrag.style.position="static";
        

            
            if (document.removeEventListener) {    
                document.removeEventListener("mouseup", upHandler, true);
                document.removeEventListener("mousemove", moveHandler, true);
            }
            else 
            if (document.detachEvent) {       
                document.detachEvent("onmouseup", upHandler);
                document.detachEvent("onmousemove", moveHandler);
            }

    
            if (e.stopPropagation) 
                e.stopPropagation();       
            else 
                e.cancelBubble = true;                       
    }
}

    </script>
</head>
<body>
 
<div style="padding-left:100px">

    <table border="1" cellpadding="0" cellspacing="0">        
        <tbody>
            <tr>
                <td style="width:400px">
                    <table width="100%" border="1" cellpadding="0" cellspacing="0">
                        <tbody>
                            <tr>
                                <td>
                                    killer
                                </td>
                                <td width="3">
                                    <img src="spacer.gif" width="3" height="15" onmousedown="beginDrag(this, event); return false;" style="cursor:w-resize">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td style="width:200px">
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tbody>
                            <tr>
                                <td>
                                    killer
                                </td>
                                <td width="3">
                                    <img src="spacer.gif" width="3" height="15" onmousedown="beginDrag(this, event); return false;" style="cursor:w-resize">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td style="width:200px">
                    <table width="100%" cellpadding="0" cellspacing="0">
                        <tbody>
                            <tr>
                                <td>
                                    killer
                                </td>
                                <td width="3">
                                    <img src="spacer.gif" width="3" height="15" onmousedown="beginDrag(this, event); return false;" style="cursor:w-resize">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>
</body>

Это сообщение отредактировал(а) Tony - 3.1.2007, 18:57

--------------------

Tony

Дата 9.1.2007, 20:43 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12

Wakeup forum people! smile

.Как быть с Оперой?

--------------------

Sardar

Дата 9.1.2007, 23:12 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Что в статусной строке показывает? Там размер уменьшается?

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Tony

Дата 11.1.2007, 15:25 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12

Ошибки не валются. Пэтому не могу понять в 4ём дело.

--------------------

Sardar

Дата 11.1.2007, 22:07 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Вижу строку: window.status = (parseInt(e.clientX) - total - parseInt(pad))+"px";
Потому спрашиваю ещё раз: что показывает в статусной строке когда ты уменьшаешь/увеличиваешь ячейку?

--------------------

Tony

Дата 12.1.2007, 00:22 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12

На сколко ты подвинул вправо/влево. Но после сдвига вправо не льзя сдвинуть влево.
Попробуй сам. Правда spacer нужен на 1px.

Это сообщение отредактировал(а) Tony - 12.1.2007, 00:22

--------------------

Sardar

Дата 12.1.2007, 00:55 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Цитата(Tony @ 11.1.2007, 23:22

)

Но после сдвига вправо не льзя сдвинуть влево.

Т.е. число в статусе не изменяется как не изменяется и ширина ячейки?

Цитата(Tony @ 11.1.2007, 23:22

)

Попробуй сам.

Лень и нет времени, проще если ты будешь отвечать точно что я спрашиваю, а не то что ты думаешь или что бы ты хотел сказать.

--------------------

Tony

Дата 12.1.2007, 15:28 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12

Цифри менются на движение,а вот ширина я4ейки нет.

--------------------

dstorm81

Дата 25.1.2007, 19:48 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39

локализовал ошибкаи, это к сожаления баги оперы, 1 тест

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DS2Tony:как обычно траблы с оперой, проверял с 9.10</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<style>
.drag{background:red;width:3px;}
.drag img{width:3px;height:40px}
td{width:100px}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tbody><tr>
<td>killer</td><td class="drag"><img src="spacer.gif"></td>
<td>killer</td><td class="drag"><img src="spacer.gif"></td>
<td>killer</td><td class="drag"><img src="spacer.gif"></td></tr></tbody></table>

<script type="text/javascript">
var resizeTBL=function(e)
{
e=e||window.event;
E=e.target||e.srcElement;
if(E.nodeName=='IMG')
    {//alert(E.parentNode.previousSibling.style.width);
    alert('увеличение размеров ячейки, работает в опере лисе,осле')
    E.parentNode.previousSibling.style.width='300px';
    alert('уменьшение размеров ячейки, работает в лисе,осле.НЕ работает в опере')
    E.parentNode.previousSibling.style.width='150px';
    }
}
document.onclick=resizeTBL;
</script>
</body>
</html>

второй тест где я фиксанул ошибку

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DS2Tony:как обычно траблы с оперой, проверял с 9.10 (применен опера-хак :)</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<style>
.drag{background:red;width:3px;}
.drag img{width:3px;height:40px;}
td{width:0px;}
td div{width:200px;}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tbody><tr>
<td><div>killer</div></td><td class="drag"><img src="spacer.gif"></td>
<td><div>killer</div></td><td class="drag"><img src="spacer.gif"></td>
<td><div>killer</div></td><td class="drag"><img src="spacer.gif"></td></tr></tbody></table>

<script type="text/javascript">
var resizeTBL=function(e)
{
e=e||window.event;
E=e.target||e.srcElement;
if(E.nodeName=='IMG')
    {//alert(E.parentNode.previousSibling.firstChild.nodeName);// hndl to DIV
    alert('увеличение размеров ячейки, работает в опере лисе,осле')
    E.parentNode.previousSibling.firstChild.style.width='300px';
    alert('уменьшение размеров ячейки, работает в лисе,осле,в опере')
    E.parentNode.previousSibling.firstChild.style.width='100px';
    }
}
document.onclick=resizeTBL;
</script>
</body>
</html>

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

удачи короче
P.S.S с тебя пиво smile

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »