Making a Resizable div in JS is Very Simple

Create this form. Pulling the corner of which, you can stretch and compress the field horizontally and vertically.


HTML

<form>
  <textarea rows="2" cols="50" OnKeyUp="ResizeTextArea(this,2);"></textarea>
</form>

We set the minimum dimensions and embellish.

textarea {
   width: 30em;
   height: 5em;
   border-radius: 3px;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.7); 				
}

Javascript

function countLines(strtocount, cols) {
	var hard_lines = 1;
	var last = 0;
	while ( true ) {
		last = strtocount.indexOf("\n", last+1);
		hard_lines ++;
		if ( last == -1 ) break;
		}
	var soft_lines = Math.ceil(strtocount.length / (cols-1));
	var hard = eval("hard_lines " + unescape("%3e") + "soft_lines;");
	if ( hard ) soft_lines = hard_lines;
	return soft_lines;
}

function ResizeTextArea(the_form,min_rows) {
	the_form.rows = Math.max(min_rows,countLines(the_form.value,the_form.cols) +1);
}

That’s all. Such a small but very useful script.

This entry was posted in Free Scripts. Bookmark the permalink.
А так же:

Leave a Reply

Your email address will not be published. Required fields are marked *