Ресайз textbox'а без jQuery

[evrus01]

ГУРУ, подскажите, как реализовать функцию ресайза поля ввода без использования jQuery.
Кнопочки [+] [‒]

Заранее благодарю за ваши ответы.

[Nekstati]

А на Mootools и без кнопочек — не пойдёт? Как здесь.

[evrus01]

Кнопочки очень хочется

Я уже даже шаблон сверстал сижу выбираю.
Кнопки (скриншот) или иконки (скриншот)?

[romeo_piter]

А на Mootools и без кнопочек — не пойдёт? Как здесь.

Дайте плиз ссылку.

[evrus01]

Вы про код для mootools?

Код: Выделить всё

<script type="text/javascript">
// <![CDATA[
window.addEvent('load', function() {
		var txt = $('message-box').getElement('textarea');
		if (!window.ie6 && (txt.style.resize === undefined)) {
			var mov = new Element('div').addClass('txt-resizer').injectAfter(txt);
			txt.makeResizable({handle: mov, limit: {y: [130, 1000]}});
		}
	});
// ]]>
</script>

В коде ГУРУ подсмотрел.

[Nekstati]

Для случая на Mootools нужна ещё картинка и CSS:

Код: Выделить всё

.txt-resizer {
	background: url("{T_THEME_PATH}/images/txt-resizer.png") no-repeat 50% 0;
    cursor: s-resize;
    height: 8px;
    margin: 0 !important;
    position: relative;
    top: -4px;
}
*:first-child+html .txt-resizer {
	top: -5px;
}
#message-box textarea {
	width: 500px !important;
	min-width: 100% !important;
	overflow: auto;
}

Скрипт этот срабатывает только для тех браузеров, у которых нет встроенной функции ресайза, т. е. для IE и Оперы.
_______________________________________

Для случая с кнопками.

1. Добавляем куда-нибудь в forum_fn.js:

Код: Выделить всё

function resizeTextbox(min) {
	var t = document.getElementById('message') || document.getElementById('signature');
	var h = t.offsetHeight;
	if (min && h < 100)
		return;
	if (min)
		t.style.height = h - 50 + 'px';
	else
		t.style.height = h + 50 + 'px';
}

2. Ищем в posting_editor.html

Код: Выделить всё

{MESSAGE}{DRAFT_MESSAGE}{SIGNATURE}</textarea>
	</div>

Добавляем после

Код: Выделить всё

	<div><a href="#" onclick="resizeTextbox(true); return false;">[-]</a> <a href="#" onclick="resizeTextbox(false); return false;">[+]</a></div>

Проверяла только на Firefox.

[evrus01]

Opera, Chrome, IE — полет нормальный.

Спасибо огромное.

[MIT]

Скрипт этот срабатывает только для тех браузеров, у которых нет встроенной функции ресайза, т. е. для IE и Оперы.

CSS resize:none

[Nekstati]

MIT, зачем? Пусть юзается нативная функция.

[evrus01]

Действительно, лучше оставить функцию. Однако все равно спасибо MIT, теперь я знаю, что есть такое правило :)