The jQuery autogrow plugin expands textarea to fit their content. The function is as follows.
(function($) {
/*
* Auto-growing textareas; technique ripped from Facebook
*/
$.fn.autogrow = function(options) {
this.filter('textarea').each(function() {
var $this = $(this),
minHeight = $this.height(),
lineHeight = $this.css('lineHeight');
var shadow = $('<div></div>').css({
position: 'absolute',
top: -10000,
left: -10000,
width: $(this).width(),
fontSize: $this.css('fontSize'),
fontFamily: $this.css('fontFamily'),
lineHeight: $this.css('lineHeight'),
resize: 'none'
}).appendTo(document.body);
var update = function() {
var val = this.value.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/&/g, '&')
.replace(/\n/g, '<br/>');
shadow.html(val);
$(this).css('height', Math.max(shadow.height() + 20, minHeight));
}
$(this).change(update).keyup(update).keydown(update);
update.apply(this);
});
return this;
}
})(jQuery);
It is then triggered $('textarea').autogrow();
. After a JQuery load function we load in a new textarea. Thus I triggered this.
$('.commentslogic').load(window.location.href + ' .commentslogic .inner', function(){
$('textarea').autogrow();
});
But it does not apply to the new textarea, furthermore there is no error reported in FireBug. Help!
Fiddle dee dee Fiddle dee dum http://jsfiddle.net/JTmND/8/
As figured out in the comments, this fiddle is the solution: http://jsfiddle.net/JTmND/11/
$(document).ready(function() {
$('textarea').autogrow();
$('.button').click(function() {
$('.test').html('<textarea></textarea>');
$('.test').find('textarea').autogrow();
});
});
It doesn't matter how the new textareas are added to the dom (manually or by ajax callback method), it is necessary to use jquery selectors to assign the autogrow functionality.