VPF::removeEventListener - Форум программистов

bars80080

Дата 31.12.2009, 00:50 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

Цитата(12345c @ 30.12.2009, 23:04

)

(только поставить прозрачный рисунок вместо заливки)

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

завтра попробую

bars80080

Дата 31.12.2009, 11:08 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

Цитата(12345c @ 30.12.2009, 23:04

)

Этот последний метод с закрылками должен тоже нормально работать (только поставить прозрачный рисунок вместо заливки).

нет, не пашет. ФФ просто игнорирует, если не указан бордюр.

маразм какой-то

Добавлено через 8 минут и 56 секунд

Цитата(12345c @ 30.12.2009, 23:04

)

реализовать автоматическое расширение textarea

Короче, рекомендую сразу разрабатывать более продвинутую юзабельность.

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

bars80080

Дата 31.12.2009, 12:55 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

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

Код


<html>
<body>
<style>
body { height: 100%; }
.area { width: 600px; }
.area textarea { width: 100%; height: 75px; }
.area iframe { width: 100%; height: 75px; }
.dropNS { position: relative; width: 100%; height: 6px; cursor: n-resize; border-top: solid 1px #ffffff; background: #ffff00; }
.dropNS div { width: 100%; height: 6px; background: #f8f8ee; font-size: 4px; }
</style>
<script>
var dropNS = false;
var ua = navigator.userAgent.toLowerCase();
var isOpera = (ua.indexOf('opera')  > -1);
var IE = (!isOpera && ua.indexOf('msie') > -1);
function ymouse(e) { if(IE) { return event.clientY; } else { return e.pageY; }}
function getElementPosition(elemId, pos, ts) {
    if(ts) { var elem = elemId; }
    else { var elem = document.getElementById(elemId); }
    var w = elem.offsetWidth; var h = elem.offsetHeight;
    if(pos) { return {"width": w, "height":h}; }
    var l = 0, t = 0;
    while(elem) { l += elem.offsetLeft; t += elem.offsetTop; elem = elem.offsetParent; }
    return {"left":l, "top":t, "width": w, "height":h};
}
function startDrop(el, e) { 
    var fr = false;
    var bk = el.parentNode.getElementsByTagName('textarea'); if(!bk[0]) {
        var bk = el.parentNode.getElementsByTagName('iframe'); 
        if(isOpera) { fr = true; } if(!bk[0]) { return false; }}
    if(!bk[0].id) { bk[0].id = 'RND' + Math.floor(Math.random()*1000000); }
    var p = getElementPosition(bk[0], true, true);
    var dp = ymouse(e) - p.height;
    var plus = (p.height < 70) ? 70 : p.height;
    el.style.height = (plus + 76) + 'px';
    el.style.marginTop = (0 - plus) + 'px';//(IE) ? '-70px' : '-140px';
    el.style.marginBottom = '-70px';//(IE) ? '-70px' : '-140px';
    el.getElementsByTagName('div')[0].style.marginTop = plus + 'px';//(IE) ? '70px' : '140px';
    document.body.onmousemove = function(e){ dropENS(e, bk[0].id, dp, el, fr); }
    document.body.onmouseup = function(){ endDrop(el); }
    el.ondblclick = function(){ backDrop(bk[0].id); }
    return true;
}
function backDrop(el) {
    bk = document.getElementById(el);if(!bk) { return false; }
    bk.style.height = '75px';
    document.body.onmousemove = null; document.body.onmouseup = null;
    document.body.focus();
    return true;
}
function endDrop(el) {  
    el.getElementsByTagName('div')[0].style.marginTop = '0px';
    el.style.height = '6px';
    el.style.marginTop = '0px';
    el.style.marginBottom = '0px';
    document.body.onmousemove = null; document.body.onmouseup = null;
    document.body.focus();
    return true; }
function dropENS(e, bkid, dp, el, fr) {
    bk = document.getElementById(bkid); if(!bk) { return false; }
    var fy = ymouse(e) - dp; if(fy < 70) { fy = 70; }
    bk.style.height = fy + 'px';
    if(fr) { bk.document.getElementById('xEditingArea').style.height = (bk.document.body.offsetHeight - 58) + 'px'; }
    el.style.height = (fy + 76) + 'px';
    el.style.marginTop = (0 - fy) + 'px';
    el.style.marginBottom = '-70px';
    el.getElementsByTagName('div')[0].style.marginTop = fy + 'px';
    return true;
}
</script>

<div class="area"><iframe>{V}</iframe><div class="dropNS" onmousedown="startDrop(this, event);"><div></div></div></div>
<div class="area"><iframe>{V}</iframe><div class="dropNS" onmousedown="startDrop(this, event);"><div></div></div></div>
<div class="area"><iframe>{V}</iframe><div class="dropNS" onmousedown="startDrop(this, event);"><div></div></div></div>

</body>
</html>

работает в ИЕ6, ИЕ7, ИЕ8, опера 9.5, ФФ3, ГуглХром

таким образом, осталась всего одна проблема, но к сожалению, на этом примере она не воспроизводится.
в ИЕ6, если несколько блоков, и схватить за ползунок одного из них, то остальные исчезают. также исчезает ряд других элементов управления.
наверное, это как-то связано со скрытыми слоями, но пока проблему не выцепил

SelenIT

Дата 1.1.2010, 02:31 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Цитата(bars80080 @ 30.12.2009, 13:54

)

слой не реагирует на изменение marginTop, но при этом, если назначить слою бордюр (тот закомментированный стиль), то работает нормально во всех браузерах.

Видимо, это схлопывание маргинов. А в IE<8 ошибка, что все относительно позиционированные элементы создают новый контекст форматирования (а должны только с явно заданным z-index'ом). А просто top-ом/left-ом (раз элемент относительно позиционируется) двигать нельзя?

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

12345c

Дата 1.1.2010, 03:52 (ссылка)

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

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Цитата(bars80080 @ 31.12.2009, 11:08

)

может быть мне нужен небольшой размер текстареи (бывает и так)

Тогда, как предлагал,

Цитата(12345c @ 31.12.2009, 00:04

)

Если при этом надо ограничить максимальную высоту, вводим ещё один параметр максимальной высоты. Тогда и понадобится визуальная область перетаскивания. Тронули её - высота фиксируется.

Т.е. вместе с авто-grow можно зафиксировать область, двинув ползунок 1 раз (как в Экселе ячейка).

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

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

cardinal

Дата 1.1.2010, 04:01 (ссылка)

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

Загрузка ...

Инженер

Профиль
Группа: Экс. модератор
Сообщений: 6003
Регистрация: 26.3.2002
Где: Германия

Репутация: нет
Всего: 99

Цитата(12345c @ 1.1.2010, 01:52

)

Т.е. вместе с авто-grow можно зафиксировать область, двинув ползунок 1 раз (как в Экселе ячейка).

Простите, а Вы с какой планетЫ? smile

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

Немецкая оппозиция потребовала упростить натурализацию иммигрантов
В моем блоге: Разные истории из жизни в Германии

"Познание бесконечности требует бесконечного времени, а потому работай не работай - все едино". А. и Б. Стругацкие

bars80080

Дата 2.1.2010, 12:07 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

Цитата(12345c @ 1.1.2010, 02:52

)

Т.е. вместе с авто-grow можно зафиксировать область, двинув ползунок 1 раз (как в Экселе ячейка).

не понял, а чем это отличается от моего?
или я не догнал как

Цитата(SelenIT @ 1.1.2010, 01:31

)

А просто top-ом/left-ом (раз элемент относительно позиционируется) двигать нельзя?

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

12345c

Дата 4.1.2010, 03:31 (ссылка)

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

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Цитата(bars80080 @ 2.1.2010, 12:07

)

не понял, а чем это отличается от моего?

В плане ползунка - авто-grow текстареи, если его не трогаешь.

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

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

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

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