4umi.com/web/javascript/textarearesize

Resizable textarea

Dynamic Javascript

Wouldn't it be nice to have a little icon on a textarea (or any element, frankly) allowing you to size it to the shape you want? Well, guess what, you have come to just the right page...

An adjustable form

Drag the lower right corner to suit your creativity.

This is just some filler text, lacking even a hint at content.

The script

One global variable ob exists to refer to the object currently being dragged. Other than that, all code is contained in one function, document wide event handlers are added and removed dynamically.

function resizeel() {

 function c( o ) {
  var x=0, y=0;
  do {
   x += o.offsetLeft;
   y += o.offsetTop;
  } while ( ( o = o.offsetParent ) );
  return { x: x, y: y };
 }
 function g( e ) {
  e = e || window.event || {};
  return 'number'===typeof e.clientY ? {x: e.clientX, y: e.clientY} : {x: e.x, y: e.y};
 }
 function l( o, p, v ) { o.style[p] = Math.max( 1, v ) + u; }

 var d = document,
  a = resizeel.arguments, i = a.length, m = d.createElement( 'div' ),
  o, p, s = 13, t, u = 'px', y = s + u;
 if( !i ) { a = d.getElementsByTagName( 'textarea' ); i = a.length; if( !i ) { return; } }
 m.style.background = 'url( /image/icon/arrow/move' + s + '.gif ) no-repeat';
 m.style.position = 'absolute';
 m.style.cursor = 'move';
 m.style.width = y;
 m.style.height = y;
 while( i-- ) {
  t = a[i]; p = c( t ); o = m.cloneNode( true );
  l( o, 'left', p.x + t.offsetWidth - s );
  l( o, 'top', p.y + t.offsetHeight - s );
  o.onmousedown = function( e ) {
   e = e || window.event || {};
   ob = this; p = c( ob ); q = g(); ob.oX = q.x - p.x; ob.oY = q.y - p.y;
   d.onmousemove = function() { var p = c( ob.nextSibling ), q = g();
    l( ob.nextSibling, 'width', Math.max( s, q.x - ob.oX - p.x + 6 ) );
    l( ob.nextSibling, 'height', Math.max( s, q.y - ob.oY - p.y + 6 ) );
    l( ob, 'left', q.x - ob.oX );
    l( ob, 'top', q.y - ob.oY );
   };
   d.onselectstart = function() { return false; };
   d.onmouseup = function() {
    ob=null; d.onmousemove=null; d.onselectstart=null; d.onmouseup=null;
   };
  };
  t.parentNode.insertBefore( o, t );
 }
}

var ob;  //  initialize global variable
resizeel();  //  call the function