Resize textarea, в копилку.

[Robox]

Хай, как и в прошлой теме про Undo/Redo, я еще решил прикрутить к textarea возможность динамически изменять размер поля ввода.
Видели наверное в сафаре и хроме такую возможность...

Ну нашел плагин jQuery UI Resizable, но вариант уж очень громозок по коду, стилям, в общем отмел из-за громозкости.

Нашел как здесь в коментах, но он только вертикально мог менять размер окна ввода.
Еще нашел простенький без jQuery.

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

Начнем:

Стили:

.resizer {
	display: block;
	margin: 0px;
	padding: 0px;
}
.resizer a {
	background: url("../images/resize.gif") no-repeat 0 0;  
	width: 12px;
	height: 12px;
	margin: 0px;
	padding: 0px;	
    float: right;
	cursor: se-resize;	
}

jQuery:

(function(jQuery) {	
	jQuery.fn.resizer = function(id) {
  		return this.each(function() {
    	var me = jQuery(this);
    	if (typeof orig_w == 'undefined') var orig_w = me.width();
		if (typeof orig_h == 'undefined') var orig_h = me.height();		    
    	me.after(
      		jQuery('<div id="div_'+id+'"><a href="javascript:void(0);"></a></div>').addClass('resizer').width(orig_w).bind('mousedown', function(e) {
      		e = (typeof(e) == "undefined") ? window.event : e;  
        	var h = me.height(), w = me.width();       
        	var y = e.clientY, x = e.clientX;
        	var moveHandler = function(e) { 
        	me.height(Math.max(orig_h, e.clientY + h - y)).width(Math.max(orig_w, e.clientX + w - x)); jQuery('#div_'+id+'').width(Math.max(orig_w, e.clientX + w - x)); };
        	var upHandler = function(e) { jQuery('html').unbind('mousemove',moveHandler).unbind('mouseup',upHandler); };
        	jQuery('html').bind('mousemove', moveHandler).bind('mouseup', upHandler); return false;
      		})
    	);
  	  });
	};
})(jQuery);

После отрисовки textarea вызываем скрипт:

echo "<script type=\"text/javascript\">jQuery(document).ready(function(){jQuery('#id_textarea').resizer('id_textarea');});</script>";

кнопочку прикрепил.

тестировал в: IE7, IE8, лисе 3.5, хроме 8, сафари 5, опере 9, опере 11

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

Я вообще очень слаб во всем этом, буду рад услышать коменты, доработки.