Javascript drag&drop expand/contract of textarea

Factual Questions
1

I’ve seen it as a Greasemonkey script and I know I’ve seen it on sites, but I can’t find an example of it now. I’ve tried to take the greasemonkey script but I can’t get it to work as a site script. Anyone have a site with an example of this? Or know where I can find it?

2

This works for me under Mozilla. I don’t currently have a working IE version to test on, but it’s probably not too hard to make it work under IE too.


<html>
<head><title>Resizable text-box</title>
<style type="text/css">
.draggable {
  background-color: #888;
  text-align:       center;
}
</style>
</head>
<script>
var ta;
var x_c, y_r;
var r, c;
var isactive = 0;
var x0, y0;
function init() {
  ta = document.getElementById("TA");
  c = ta.cols;
  r = ta.rows;
  x_c = ta.offsetWidth  / c;
  y_r = ta.offsetHeight / r;
}
function down(ev) {
  isactive = 1;
  x0 = ev.clientX;
  y0 = ev.clientY;
}
function up(ev) {
  if ( !isactive ) return;
  isactive = 0;

  var dx, dy;
  dx = ev.clientX - x0;
  dy = ev.clientY - y0;
  
  var dc, dr;
  dc = dx / x_c;
  dr = dy / y_r;

  c += dc; if ( c < 5 ) c = 5;
  r += dr; if ( r < 5 ) r = 5;
  
  ta.cols = c;
  ta.rows = r;
}
</script>
<body onmouseup='up(event)' onload='init()'>
<table>
<tr><td>
<textarea id="TA" rows=30 cols=80>
Click-and-drag the gray square to resize this box.  I recommend using the middle button since it has fewer events already associated with it.
</textarea></td>
<td></td></tr>
<tr><td></td>
<td width=30 height=30 class=draggable onmousedown='down(event)'></td></tr>
</body>
</html>

I didn’t try binding to mousemove, though that could maybe give animated drag-and-drop.

3

It’s a good start, thanks dude :slight_smile: