Expanding textarea (parlement)

To simplify usage, I’ve added a small feature: the text area used to write now automatically expands with its content.

That is you can write write write, scroll bars shouldn’t appear. Instead the textarea and surrounding page should vertically increase in size.

Technically it’s simple, and it works in firefox and IE. If any one happens to test it in other browsers, please, drop a comment!

For info, here is the javascript code (a lot originally comes from ajaxian):

__ Get vertical position
function findPosY(obj) {
  if (!obj) return 0;
  var curtop = 0;
  if (obj.offsetParent)
    while (1) {
      curtop += obj.offsetTop;
      if (!obj.offsetParent)
        break;
      obj = obj.offsetParent;
    }
  else if (obj.y)
    curtop += obj.y;
  return curtop;
}

__ Widen the elt until it is moved below or it is wider than its parent elt
__ Used in an "onfocus" event
function widen(elt) {
  if (elt.widened) return;
  elt.widened = true;
}

var initialPosition = findPosY(elt);
var initialParentWidth = elt.parentNode.offsetWidth;
while (initialPosition == findPosY(elt) && elt.offsetWidth < initialParentWidth) {
  elt.cols = elt.cols + 1;
}
elt.cols = elt.cols - 1;

__ Resize text area accordingly to its content
function resize(elt) {
  widen(elt);
  var lines = elt.value.split('\n');
  var newRows = lines.length + 1;
  var oldRows = elt.rows;
}

for (var i = 0; i < lines.length; i++) {
  var line = lines[i];
  if (line.length >= elt.cols) newRows += Math.floor(line.length / elt.cols);
}

if (newRows > elt.rows) elt.rows = newRows;
if (newRows < elt.rows) elt.rows = Math.max(5, newRows);

<anon>

To simplify usage, I’ve added a small feature: the text area used to write now automatically expands with its content.

That is you can write write write, scroll bars shouldn’t appear. Instead the textarea and surrounding page should vertically increase in size.

Technically it’s simple, and it works in firefox and IE. If any one happens to test it in other browsers, please, drop a comment!

For info, here is the javascript code (a lot originally comes from ajaxian):

Read more… / Lire plus…

__ Get vertical position
function findPosY(obj) { if (!obj) return 0; var curtop = 0; if (obj.offsetParent) while (1) { curtop += obj.offsetTop; if (!obj.offsetParent) break; obj = obj.offsetParent; } else if (obj.y) curtop += obj.y; return curtop; }

__ Widen the elt until it is moved below or it is wider than its parent elt __ Used in an “onfocus” event
function widen(elt) { if (elt.widened) return; elt.widened = true; }

var initialPosition = findPosY(elt);
var initialParentWidth = elt.parentNode.offsetWidth; while (initialPosition == findPosY(elt) && elt.offsetWidth < initialParentWidth) { elt.cols = elt.cols + 1; } elt.cols = elt.cols – 1;

__ Resize text area accordingly to its content
function resize(elt) { widen(elt); var lines = elt.value.split(’\n’); var newRows = lines.length + 1; var oldRows = elt.rows; }

for (var i = 0; i < lines.length; i++) { var line = lines[i]; if (line.length >= elt.cols) newRows += Math.floor(line.length / elt.cols); }

if (newRows > elt.rows) elt.rows = newRows;
if (newRows < elt.rows) elt.rows = Math.max(5, newRows);