Установка: Оффтоп

Подключаем небольшой файлик [textarearesize-min.js] из аттача и в css добавляем новый сласс.

div.textarea-resize-handle{background:#738fbf; height:5px; border:solid #738fbf; border-width:0 1px 1px 1px; cursor:s-resize;}
или класс с картинкой
div.textarea-resize-handle{background:url(../путь до картинки/grippie.png) no-repeat scroll center 2px; height:9px; cursor:s-resize;}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Примечание: Оффтоп

По дефолту инициализируются все textarea с классом "textarea".
Если ваши воблотекстарии имеют другой класс, нужно заменить на соответствующий в [textarearesize-min.js]

YAHOO.util.Event.onDOMReady(function(){createResTextarea("textarea")});

Однако во издежание путаницы все же стоит добавить ко всем воблотекстареям некий уникальный класс (textarea, textarearesize, resizeable...), который будет использован именно для ресайзера.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

на скрине просто тестовая страничка, демонстрирующая работу js скрипта

Что то у меня не работает...

Подскажите где ошибка?

<div class="resizable-textarea"><span>
			 <script type="text/javascript" src="clientscript/jquery.textarearesizer.compressed.js"></script>
			 <script type="text/javascript">
				/* jQuery textarea resizer plugin usage */
				$(document).ready(function() {
				$('textarea.resizable:not(.processed)').TextAreaResizer();
				//if ($('.smiliebox_wrap table').height() > 360) $('.smiliebox_wrap').width(172);
				});
				</script>

				<textarea name="message" id="{$editorid}_textarea" rows="10" cols="60" style="display:block; width:$stylevar[messagewidth]; height:{$editor_height}px" tabindex="1" dir="$stylevar[textdirection]" class="bginput fblue resizable processed" onKeyPress="if (event.ctrlKey&&((event.keyCode==10)||(event.keyCode==13))){this.form.submit();}">$newpost[message]</textarea>
				<div class="grippie" style="margin-right: 0px;"></div>
		</span></div>

Содержание jquery.textarearesizer.compressed.js

(function($){var textarea,staticOffset;var iLastMousePos=0;var iMin=32;var grip;$.fn.TextAreaResizer=function(){return this.each(function(){textarea=$(this).addClass('processed'),staticOffset=null;$(this).wrap('<div class="resizable-textarea"><span></span></div>').parent().append($('<div class="grippie"></div>').bind("mousedown",{el:this},startDrag));var grippie=$('div.grippie',$(this).parent())[0];grippie.style.marginRight=(grippie.offsetWidth-$(this)[0].offsetWidth)+'px'})};function startDrag(e){textarea=$(e.data.el);textarea.blur();iLastMousePos=mousePosition(e).y;staticOffset=textarea.height()-iLastMousePos;textarea.css('opacity',0.25);$(document).mousemove(performDrag).mouseup(endDrag);return false}function performDrag(e){var iThisMousePos=mousePosition(e).y;var iMousePos=staticOffset+iThisMousePos;if(iLastMousePos>=(iThisMousePos)){iMousePos-=5}iLastMousePos=iThisMousePos;iMousePos=Math.max(iMin,iMousePos);textarea.height(iMousePos+'px');if(iMousePos<iMin){endDrag(e)}return false}function endDrag(e){$(document).unbind('mousemove',performDrag).unbind('mouseup',endDrag);textarea.css('opacity',1);textarea.focus();textarea=null;staticOffset=null;iLastMousePos=0}function mousePosition(e){return{x:e.clientX+document.documentElement.scrollLeft,y:e.clientY+document.documentElement.scrollTop}}})(jQuery);

CSS

.controlbar.textarea {padding-right: 2px;}
td.controlbar.textarea div.grippie {background: #EFEFEF url(images/misc/grippie.png) no-repeat scroll center 3px;cursor: s-resize;height: 11px;border: 1px solid #BCBEC5;border-top: 0;overflow: hidden;}
div.grippie {background: transparent url(images/misc/grippie.png) no-repeat scroll center 1px;
cursor: s-resize;height: 6px;overflow: hidden;}

сейчас любой нормальный браузер умеет ресайзить поля текстареа без всяких скриптов
хак наверное был актуален, когда они этого не умели =)
ну и да, здесь тема по ресайзеру библиотеки YUI
jQuery - это совсем другая библиотека

Originally Posted by kerk

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

Угу

Подскажите а как тогла сделать, такого рода "увеличиволку" и "уменьшалку" поля ввода?