Первый пост темы
|
|
profiT
|
User
|
|
|
|
|
Предлагаю жесты для изменения размеров TEXTAREA
24/08/2005 20:23
|
|
|
После того, как мне указали на такую возможность в Файрфоксе, меня не покидала мысль, как это реализовать в Опере. И сделал. Заодно добавил стирание элемента страницы жестом.
Есть букмарклет на ОпераВики, но посмотрев его самого и его код, обнаружил, что он увеличивает размер у всех TEXTAREA, что при нескольких полях приведёт к прыганью макета, чего хотелось бы избежать.
Чтобы однозначно идентифицировать именно нужное поле, приделывается пользовательский скрипт. Есть подозрения, что вы с него поимеете побочные эффекты, но это потом исправлю. Сначала пусть народ заценит как работает.
Как это работает:
Жест "протянуть направо" на многострочном поле (TEXTAREA), увеличивает ширину поля. "Протянуть налево" -- уменьшает ширину.
Аналогично для жестов "протянуть вверх" и "протянуть вниз", они увеличивают/уменьшают высоту поля.
Вот что надо для этого сделать:
1. Скопировать два файла: пользовательский скрипт "lastHovered.js" и файл настройки мышиных жестов "resize and hide textareas.ini".
2. Пользовательский скрипт с путём, куда вы его положили, внести в ваш список скриптов в настройках.
3. Настройку мышиных жестов положить в папку "profile\mouse\". Если у вас уже есть своя настройка, объедините её текстовым редактором, там добавляются всего пять новых жестов: в разделе "Advanced"--"Edit widget" -- четыре, и в "Application" -- один сразу после заголовка.
Вот этот последний жест -- полный оборот по часовой стрелке, начиная с протяжки вверх (вверх-направо-вниз-влево) уничтожает элемент со страницы. В принципе, если этот жест выкинуть, то можно предполагать что побочные эффекты пользовательского скрипта сведуться на нет.
Есть мнение, что функционал можно расширить. Рацухи?
|
Stinger
|
Operaman
|
|
|
Зарегистр: 26/03/2004
|
Сообщений: 550
|
|
|
Re: Небольшой оффтоп.
21/05/2005 14:27
[Re: Kildor]
[post link]
|
Напомнить
Правка
|
Сообщить
Ответ
|
|
|
В ответ на: Ты бы хоть поставил его и посмотрел сколько там места он занимает.
Охотно верю. Но это не избавляет от проблем с другими скриптами, когда один будет налезать на другой.
В ответ на: зачем? если форма имеет удобный размер, то зачем всегда торчать кнопочкам?
Кнопочки могут появляться только при _наведении мышкой_ на форму ввода, как-бы "всплывать" рядом с формой(или по ее краям). Мешать в таком случае они не будут.
В ответ на: Кому как - я вообще жесты не использую. Мне проще тянуть, чем фигуры вычерчивать
[OFFTOPIC]А я себя часто ругаю за то, что долгое время игнорировал мышинные жесты и стал их использовать относительно недавно[/OFFTOPIC]
В ответ на: BodyID4all + user.css (если возможно для textarea задавать length/width) - там правишь. Не знаю насчет кукисов.
Задавать размеры textarea в CSS для каждого сайта, для каждой формы? Если добавлять вручную, то неудобно же.
Kildor
Спасибо. Будем отлавливать баги и глюки. Но лучше бы ты конечно для своего скрипта отдельную тему создал.
|
aga
|
Operaman
|
|
|
Зарегистр: 04/05/2004
|
Сообщений: 762
|
Из: россия, москва
|
|
Re: Небольшой оффтоп.
21/05/2005 14:52
[Re: Stinger]
[post link]
|
Напомнить
Правка
|
Сообщить
Ответ
|
|
|
этот новый скрипт всё же получше.
- скрипт profiT`а не работает с отключённым использованием текущей страницы, новый скрипт легко вместе с этой отключённой опцией работает.
- изменение размеров происходит очень быстро и без тормозов.
как работает скрипт profiT`f: я протянул поле ввода с зажатой правой кнопкой, отпустил правую клавишу, размер поля изменился.
и как работает новый скрипт: как с обычным окном винды - т.е. я тяну за квадрат и размер поля ввода изменяется.
места новый срипт занимает мизерно мало. в стандарте в углу правом нижнем небольшой квадрат, примерно пикселей 10. при нажатии на него около поля ввода появляются ва небольших квадратика пикселей наверное по 5: красный и синий, первый квадрат из правого нижнего угла исчезает. при зацеплении левой кнопкой синего квадрата (курсор мыши приобретает соответствующий вид) и передмещении мыши размер поля ввода изменяется. при нажатии на красный квадрат размер поля ввода возвращается к дефолтному.
|
aga
|
Operaman
|
|
|
Зарегистр: 04/05/2004
|
Сообщений: 762
|
Из: россия, москва
|
|
Re: Небольшой оффтоп.
21/05/2005 15:07
[Re: aga]
[post link]
|
Напомнить
Правка
|
Сообщить
Ответ
|
|
|
если в папке оперы оба скрипта изменения размеров, скрипт Prift`а по-крайней мере у меня не работает.
и ещё небольшая непонятка. не знаю, это только у меня так или у всех, но при использовании нового скрипта страница прокручивается небольшими рывками, подтормаживает. хотя это опять же может быть только у меня и только сейчас, а потом исправится.
пытался добавить вышеприведённых абзаца в конец предыдущего сообщения через редактирование, почему-то редактирование не было принято. т.е. я нажал кнопку исправления, эта страница обновилась, в конце предыдущего сообщения появилась надпись, что сообщение было отредакторовано агой (т.е. мною) число и время. но исправлений в виде первых двух абзацев не было видно. это что: глюки форума или что-то другое?
|
Dimanish
|
User
|
|
|
Зарегистр: 07/03/2005
|
Сообщений: 120
|
Из: 52 RUS
|
|
Re: Небольшой оффтоп.
26/06/2005 13:06
[Re: aga]
[post link]
|
Напомнить
Правка
|
Сообщить
Ответ
|
|
|
Народ, скажите, пожалуйста, почему не работает готовый скрипт Resize Textarea 0.1, который я наглым образом вытянул из расширения resizeabletextarea v0.1a для FireFox? Вроде тотже javascript.... браузер должен влиять на работоспособностть скрипта? вот код: Code:
/*
Resize Textarea 0.1 Original coding by Raik Juergens Contact: borstel33@web.de
*/
var resizeTa = { loaded: null, TAlength: 0,
init: function (){ if (resizeTa.loaded) return; else{ resizeTa.loaded = true; var appcontent = document.getElementById("appcontent"); if(appcontent) appcontent.addEventListener("load", resizeTa.pageload, true); } },
pageload: function (aEvent){ resizeTa.doc = aEvent.originalTarget; resizeTa.TA = resizeTa.doc.getElementsByTagName('TEXTAREA'); resizeTa.TAlength = resizeTa.TA.length; if(resizeTa.TAlength == 0){ return; }else{ resizeTa.rootElem = resizeTa.doc.getElementsByTagName('HTML')[0]; var i = resizeTa.TAlength; while(i--){ resizeTa.newdiv('5' ,'1' ,'gripH_',i,'w' ); resizeTa.newdiv('1' ,'5' ,'gripV_',i,'n' ); resizeTa.newdiv('10','10','gripX_',i,'se'); } resizeTa.newdiv('0','0','showCursor','','w'); CursorDiv = resizeTa.doc.getElementById('showCursor'); CursorDiv.removeEventListener('mousedown', resizeTa.activate, true); CursorDiv.style.left = '0px'; CursorDiv.style.top = '0px'; resizeTa.posdivs(); window.addEventListener("resize",resizeTa.posdivs,true); } },
newdiv: function (w,h,id,nr,cu){ var grip = resizeTa.doc.createElement("div"); grip.setAttribute("ID", id+nr); grip.setAttribute("STYLE", "position:absolute;width:"+w+"px;height:"+h+"px;cursor:"+cu+"-resize"); grip.addEventListener('mousedown', resizeTa.activate, true); resizeTa.rootElem.appendChild(grip); },
getposition: function (i){ var curElem = resizeTa.TA[i]; var curX = curElem.offsetLeft; while (curElem.offsetParent) { curX += curElem.offsetParent.offsetLeft; curElem = curElem.offsetParent; } curElem = resizeTa.TA[i]; var curY = curElem.offsetTop; while (curElem.offsetParent) { curY += curElem.offsetParent.offsetTop; curElem = curElem.offsetParent; } return [curX,curY] },
posdivs: function (){ var k = resizeTa.TAlength; while(k--){ curPos = resizeTa.getposition(k); resizeTa.doc.getElementById('gripH_'+k).style.left = curPos[0]+resizeTa.TA[k].offsetWidth -3 + "px"; resizeTa.doc.getElementById('gripH_'+k).style.top = curPos[1] + "px"; resizeTa.doc.getElementById('gripH_'+k).style.height = resizeTa.TA[k].offsetHeight-8 + "px"; resizeTa.doc.getElementById('gripV_'+k).style.left = curPos[0] + "px"; resizeTa.doc.getElementById('gripV_'+k).style.top = curPos[1]+resizeTa.TA[k].offsetHeight-3 + "px"; resizeTa.doc.getElementById('gripV_'+k).style.width = resizeTa.TA[k].offsetWidth -8 + "px"; resizeTa.doc.getElementById('gripX_'+k).style.left = curPos[0]+resizeTa.TA[k].offsetWidth -8 + "px"; resizeTa.doc.getElementById('gripX_'+k).style.top = curPos[1]+resizeTa.TA[k].offsetHeight-8 + "px"; } },
activate: function (e){ resizeTa.doc = e.target.ownerDocument; resizeTa.TA = resizeTa.doc.getElementsByTagName('TEXTAREA'); CursorDiv = resizeTa.doc.getElementById('showCursor'); resizeTa.TAlength = resizeTa.TA.length; var curTargetId = e.target.getAttribute('ID').split("_"); curTarget = curTargetId[0]; curTA_Nr = parseInt(curTargetId[1]); resizeTa.doc.addEventListener('mouseup', resizeTa.deactivate, true); switch(curTarget){ case "gripH": resizeTa.doc.addEventListener('mousemove', resizeTa.resizeta_h, true); break; case "gripV": resizeTa.doc.addEventListener('mousemove', resizeTa.resizeta_v, true); break; case "gripX": resizeTa.doc.addEventListener('mousemove', resizeTa.resizeta_x, true); break; } CursorDiv.style.width = resizeTa.rootElem.offsetWidth + "px"; CursorDiv.style.height = resizeTa.rootElem.offsetHeight + "px"; CursorDiv.style.cursor = e.target.style.cursor; },
deactivate: function (){ resizeTa.doc.removeEventListener('mouseup', resizeTa.deactivate, true); switch(curTarget){ case "gripH": resizeTa.doc.removeEventListener('mousemove', resizeTa.resizeta_h, true); break; case "gripV": resizeTa.doc.removeEventListener('mousemove', resizeTa.resizeta_v, true); break; case "gripX": resizeTa.doc.removeEventListener('mousemove', resizeTa.resizeta_x, true); break; } CursorDiv.style.width = '0px'; CursorDiv.style.height = '0px'; resizeTa.posdivs(); },
resizeta_h: function (e){ curPos = resizeTa.getposition(curTA_Nr); resizeTa.TA[curTA_Nr].style.width = e.pageX - curPos[0] + "px"; },
resizeta_v: function (e){ curPos = resizeTa.getposition(curTA_Nr); resizeTa.TA[curTA_Nr].style.height = e.pageY - curPos[1] + "px"; },
resizeta_x: function (e){ curPos = resizeTa.getposition(curTA_Nr); resizeTa.TA[curTA_Nr].style.width = e.pageX - curPos[0] + 2 + "px"; resizeTa.TA[curTA_Nr].style.height = e.pageY - curPos[1] + 2 + "px"; } }
window.addEventListener("load",resizeTa.init,false); Сори за слишком большое сообщение.
|
Dennis_HAWKS
|
User
|
|
|
Зарегистр: 11/09/2003
|
Сообщений: 238
|
Из: Молдова, Тирасполь
|
|
Re: Небольшой оффтоп.
26/06/2005 16:39
[Re: Dimanish]
[post link]
|
Напомнить
Правка
|
Сообщить
Ответ
|
|
|
Работает другой user.js Code:
// ==UserScript== // @name ExpandArea // @version 1.1 // @namespace http://stilleye.com/greasemonkey // @author David Schontzler // @description Adds button to make textareas expandable // @include * // @exclude gmail.google.com/* // @exclude *.jot.com/* // ==/UserScript==
(function() { function expandArea(elms) { var elms2 = []; for(var i = 0; i < elms.length; i++) { elms2.push(elms[i]); } for(var i = 0; i < elms2.length; i++) { applyArea(elms2[i]); }
function applyArea(elm) { var w = elm.offsetWidth, h = elm.offsetHeight; var pos = getAbsolutePosition(elm);
var overlay = document.createElement("div"); overlay.style.width = w + "px"; overlay.style.height = h + "px"; overlay.style.position = "absolute"; overlay.style.left = pos.x + "px"; overlay.style.top = pos.y + "px"; overlay.style.padding = "4px"; overlay.style.zIndex = "999"; overlay.className = "ExpandArea";
var size = document.createElement("div"); size.style.width = size.style.height = "8px"; size.style.background = "#33f"; size.style.position = "absolute"; size.style.right = "-8px"; size.style.bottom = "-8px"; size.style.cursor = "nw-resize"; size.style.MozBorderRadius = "4px"; size.setAttribute("title", "Drag blue box to size the text area"); var offX, offY; size.addEventListener("mousedown", function(e) { offX = e.offsetX + 8; offY = e.offsetY + 8; document.body.addEventListener("mousemove", doSize, false); document.body.addEventListener("mouseup", endSize, false); }, false); overlay.appendChild(size);
var reset = size.cloneNode(false); reset.style.background = "#c00"; reset.style.right = "1px"; reset.style.cursor = "pointer"; reset.setAttribute("title", "Click the red box to reset the size of the text area"); reset.addEventListener("click", function(e) { overlay.style.width = w + "px"; overlay.style.height = h + "px"; }, false); overlay.appendChild(reset);
var txt = document.createElement("textarea"); txt.value = elm.value; txt.style.width = "100%"; txt.style.height = "100%"; txt.onkeyup = function(e) { elm.value = this.value; } overlay.appendChild(txt);
document.body.appendChild(overlay); elm.style.visibility = "hidden";
function doSize(e) { var x = e.pageX - pos.x - offX; var y = e.pageY - pos.y - offY; if( x > 40 ) overlay.style.width = x + "px"; if( y > 40 ) overlay.style.height = y + "px"; }
function endSize(e) { document.body.removeEventListener("mousemove", doSize, false); document.body.removeEventListener("mouseup", endSize, false); } }
function getAbsolutePosition(elm) { var x = 0, y = 0; while( elm && elm != document.body ) { x += elm.offsetLeft; y += elm.offsetTop; elm = elm.offsetParent; } return { x: x, y: y }; } }
function setup() { if( !document.getElementsByTagName("textarea").length ) return;
var on = document.createTextNode("Expand Textarea"); var off = document.createTextNode(String.fromCharCode(160) + String.fromCharCode(171) + String.fromCharCode(160));
var html = " « "; var trigger = document.createElement("div"); trigger.appendChild( off ); with(trigger.style) { position = "fixed"; right = bottom = "0px"; color = "black"; background = "white"; border = "1px solid"; padding = "3px"; font = "10px sans-serif"; cursor = "pointer"; MozOpacity = ".4"; } document.body.appendChild(trigger); trigger.onmouseover = function() { this.replaceChild(on, off); } trigger.onmouseout = function() { this.replaceChild(off, on); } trigger.onclick = function() { expandArea(document.getElementsByTagName("textarea")); this.parentNode.removeChild(this); } }
window.addEventListener("load", setup, false); })();
|
Dimanish
|
User
|
|
|
Зарегистр: 07/03/2005
|
Сообщений: 120
|
Из: 52 RUS
|
|
|
Ну да этот скрипт работает, только почему-то страница тормозить начинает... Да и не так красиво как в FF получается.
|
Dennis_HAWKS
|
User
|
|
|
Зарегистр: 11/09/2003
|
Сообщений: 238
|
Из: Молдова, Тирасполь
|
|
Re: Небольшой оффтоп.
26/06/2005 17:12
[Re: Dimanish]
[post link]
|
Напомнить
Правка
|
Сообщить
Ответ
|
|
|
там еще и другие глюки есть. Особенно на форумах забывается тема и юзер.
|
AndreyI
|
User
|
|
|
Зарегистр: 06/07/2003
|
Сообщений: 97
|
|
|
Re: Предлагаю жесты для изменения размеров TEXTAREA
27/06/2005 20:45
[Re: Dennis_HAWKS]
[post link]
|
Напомнить
Правка
|
Сообщить
Ответ
|
|
|
В ответ на: Ура наконец-то появился работающий скрипт для увеличения textarea - дали здесь...
А у меня с этим скриптом что-то не то с окном ответа происходит: если я что-нибудь сначала напишу в окне, а потом через некоторое время исправлю или допишу, то отправляется в итоге то, что было написано сначала, а исправления и дополнения куда-то исчезают
|
profiT
|
User
|
|
|
Зарегистр: 13/11/2004
|
Сообщений: 224
|
Из: Караганда
|
|
|
Тут некоторое затишье образовалось... Работаем, учимся. Ну, ладно, в общем я тут вам принёс обновлённую версию моего скрипта с жестами. В прикреплённом файле, ридми внутри.
Изменение там с прошлой версии только одно: теперь мой скрипт работает и с отключенной галкой "использовать текущую страницу" (вроде работает с версии 8.02tp2).
Как это делается: команда "Goto page" теперь поддерживает второй аргумент и если задать его как 1, то адрес будет запускаться на текущей странице вне зависимости от значения той галки.
Исправлено profiT (24/08/2005 21:22)
|
|
0 зарег. и 130 анонимные пользователи просматривают этот форум.
Модератор: netman, van_grieg, alter, Angolier, Pechkin
Распечатать тему
|
Разрешения
Вы не можете создавать новые темы
Вы не можете отвечать в темах
HTML запрещен
UBBCode разрешен
|
Рейтинг:
Тема просмотрена: 55561
|
|
Быстрый поиск
|
|
|
© 2000-2002. Николай Ковальчук - All rights reserved
|
|