Comments on: ResizingTextArea Prototype Component http://ajaxian.com/archives/resizingtextarea-prototype-component Cleaning up the web with Ajax Thu, 09 Feb 2012 06:55:33 +0000 hourly 1 http://wordpress.org/?v=3.2 By: Bermi http://ajaxian.com/archives/resizingtextarea-prototype-component/comment-page-1#comment-247396 Bermi Wed, 21 Feb 2007 09:40:56 +0000 http://ajaxian.com/?p=2015#comment-247396 Seems like Wordpress ate my code, so I've here is a direct link to the <a href="http://www.bermi.org/code/resizable_textarea.js" rel="nofollow">Javascript Textarea Resizer</a> Seems like WordPress ate my code, so I’ve here is a direct link to the Javascript Textarea Resizer

]]> By: Bermi http://ajaxian.com/archives/resizingtextarea-prototype-component/comment-page-1#comment-246413 Bermi Mon, 22 Jan 2007 23:27:25 +0000 http://ajaxian.com/?p=2015#comment-246413 I did this one some time ago inspired by a <a href="http://openjsan.org/doc/g/gu/gugod/Widget/Textarea/Resizable/0.01/lib/Widget/Textarea/Resizable.html" title="resizable text area widget" rel="nofollow">JSAN widget</a>. It uses styles for calculating the height. And has been tested in IE 6/7,Safari and Firefox, although it might need some refactoring you might find it useful. <code> ResizeableTextarea = Class.create(); ResizeableTextarea.prototype = { initialize: function(element, options) { this.element = $(element); this.size = Element.getStyle(this.element, 'height').match(/^\d+/).first()*1; this.options = Object.extend({ inScreen: false, resizeStep: 10, minHeight: this.size, }, options || {}); Event.observe(this.element, "keyup", this.resize.bindAsEventListener(this)); if ( !this.options.inScreen ) { this.element.style.overflow = 'hidden'; } this.element.setAttribute("wrap","vitual"); }, resize : function(){ this.shrink(); this.grow(); }, shrink : function(){ if ( this.size this.element.clientHeight ) { if ( this.options.inScreen && (20 + this.element.offsetTop + this.element.clientHeight) > document.body.clientHeight ) { return; } this.size += 1; this.element.style.height = (this.options.resizeStep + this.size)+'px'; this.grow(); } } } </code> Then just add <code> onfocus="new ResizeableTextarea(this);" </code> to the textarea you want to resize. I did this one some time ago inspired by a JSAN widget.

It uses styles for calculating the height. And has been tested in IE 6/7,Safari and Firefox, although it might need some refactoring you might find it useful.


ResizeableTextarea = Class.create();
ResizeableTextarea.prototype = {
initialize: function(element, options) {
this.element = $(element);
this.size = Element.getStyle(this.element, 'height').match(/^\d+/).first()*1;
this.options = Object.extend({
inScreen: false,
resizeStep: 10,
minHeight: this.size,
}, options || {});
Event.observe(this.element, "keyup", this.resize.bindAsEventListener(this));
if ( !this.options.inScreen ) {
this.element.style.overflow = 'hidden';
}
this.element.setAttribute("wrap","vitual");
},
resize : function(){
this.shrink();
this.grow();
},
shrink : function(){
if ( this.size this.element.clientHeight ) {
if ( this.options.inScreen && (20 + this.element.offsetTop + this.element.clientHeight) > document.body.clientHeight ) {
return;
}
this.size += 1;
this.element.style.height = (this.options.resizeStep + this.size)+'px';
this.grow();
}
}
}

Then just add


onfocus="new ResizeableTextarea(this);"

to the textarea you want to resize.

]]> By: Leland Scott http://ajaxian.com/archives/resizingtextarea-prototype-component/comment-page-1#comment-246227 Leland Scott Thu, 18 Jan 2007 02:18:38 +0000 http://ajaxian.com/?p=2015#comment-246227 FYI, if you're using the nightly WebKit build or Safari 3.0, you don't need any javascript magic to get resizable textareas. They're standard fare... every textarea you encounter on the web can be resized as needed. WebKit may have turned the preference for this off by default, but if you enter the following command in the terminal, I think this is the command I issued some time ago to turn resizable textareas on: defaults write com.apple.safari WebKitTextAreasAreResizable boolean true Cheers, Leland FYI, if you’re using the nightly WebKit build or Safari 3.0, you don’t need any javascript magic to get resizable textareas. They’re standard fare… every textarea you encounter on the web can be resized as needed. WebKit may have turned the preference for this off by default, but if you enter the following command in the terminal, I think this is the command I issued some time ago to turn resizable textareas on:

defaults write com.apple.safari WebKitTextAreasAreResizable boolean true

Cheers,
Leland

]]> By: Morgan Roderick http://ajaxian.com/archives/resizingtextarea-prototype-component/comment-page-1#comment-246193 Morgan Roderick Wed, 17 Jan 2007 12:14:15 +0000 http://ajaxian.com/?p=2015#comment-246193 Does not exactly work as intended with non-strict rendering in Gecko / WebKit browsers. Perhaps a little more testing is needed. Does not exactly work as intended with non-strict rendering in Gecko / WebKit browsers. Perhaps a little more testing is needed.

]]> By: Jason Moser http://ajaxian.com/archives/resizingtextarea-prototype-component/comment-page-1#comment-246174 Jason Moser Tue, 16 Jan 2007 22:51:06 +0000 http://ajaxian.com/?p=2015#comment-246174 This is a pretty simple and easy way to make text areas grow when need be. Came in pretty handy for my app and i made a quick demo since a few people asked for it. http://jasonmoser.com/ajax This is a pretty simple and easy way to make text areas grow when need be. Came in pretty handy for my app and i made a quick demo since a few people asked for it.

http://jasonmoser.com/ajax

]]> By: boodie http://ajaxian.com/archives/resizingtextarea-prototype-component/comment-page-1#comment-246164 boodie Tue, 16 Jan 2007 20:42:43 +0000 http://ajaxian.com/?p=2015#comment-246164 Does this really have anything to do with ajax? it's javascript counting characters... Does this really have anything to do with ajax? it’s javascript counting characters…

]]> By: Chris Burnett http://ajaxian.com/archives/resizingtextarea-prototype-component/comment-page-1#comment-246163 Chris Burnett Tue, 16 Jan 2007 20:31:18 +0000 http://ajaxian.com/?p=2015#comment-246163 oh well. oh well.

]]> By: Chris Burnett http://ajaxian.com/archives/resizingtextarea-prototype-component/comment-page-1#comment-246162 Chris Burnett Tue, 16 Jan 2007 20:30:09 +0000 http://ajaxian.com/?p=2015#comment-246162 try this again. <code> $.fn.ResizeArea = function() { var defaultRows = 1; var resizeNeeded = function () { var lines = $(this).val().split('\n'); var newRows = lines.length + 1; var oldRows = $(this).attr('rows'); for (var i = 0; i = $(this).attr('cols')) newRows += Math.floor(line.length / $(this).attr('cols')); } if (newRows > $(this).attr('rows')) $(this).attr('rows',newRows); if (newRows </code> try this again.

$.fn.ResizeArea = function() {
var defaultRows = 1;
var resizeNeeded = function () {
var lines = $(this).val().split('\n');
var newRows = lines.length + 1;
var oldRows = $(this).attr('rows');
for (var i = 0; i = $(this).attr('cols'))
newRows += Math.floor(line.length / $(this).attr('cols'));
}
if (newRows > $(this).attr('rows'))
$(this).attr('rows',newRows);
if (newRows

]]> By: Chris Burnett http://ajaxian.com/archives/resizingtextarea-prototype-component/comment-page-1#comment-246161 Chris Burnett Tue, 16 Jan 2007 20:28:30 +0000 http://ajaxian.com/?p=2015#comment-246161 Re-written for jquery: <code> $.fn.ResizeArea = function() { var defaultRows = 1; var resizeNeeded = function () { var lines = $(this).val().split('\n'); var newRows = lines.length + 1; var oldRows = $(this).attr('rows'); for (var i = 0; i = $(this).attr('cols')) newRows += Math.floor(line.length / $(this).attr('cols')); } if (newRows > $(this).attr('rows')) $(this).attr('rows',newRows); if (newRows </code> Re-written for jquery:

$.fn.ResizeArea = function() {
var defaultRows = 1;
var resizeNeeded = function () {
var lines = $(this).val().split('\n');
var newRows = lines.length + 1;
var oldRows = $(this).attr('rows');
for (var i = 0; i = $(this).attr('cols'))
newRows += Math.floor(line.length / $(this).attr('cols'));
}
if (newRows > $(this).attr('rows'))
$(this).attr('rows',newRows);
if (newRows

]]> By: tobi http://ajaxian.com/archives/resizingtextarea-prototype-component/comment-page-1#comment-246155 tobi Tue, 16 Jan 2007 17:59:50 +0000 http://ajaxian.com/?p=2015#comment-246155 The problem is that this does a lot of math based on the Col parameter of the text area which is not accurate when the text area is resized with CSS. The problem is that this does a lot of math based on the Col parameter of the text area which is not accurate when the text area is resized with CSS.

]]>