With my big blog redesign, I wanted a auto-growing comment box. In the past, I’ve written a nice auto-resize textarea JavaScript function which does just that, but with jQuery belonging to the standard equipment of WordPress these days, I thought it would be cooler to find a nice jQuery plugin to do this.

I added the Auto Growing Textareas plugin by Chrys Bader to my theme. In my header.php:

<?php wp_enqueue_script('jqueryautogrow', get_bloginfo('template_directory').'/jquery.autogrow.js', array('jquery'), '1.2.2') ?>
<script type="text/javascript">
$ = jQuery; /* FIXME: Ugly hack */
jQuery(document).ready(function(){
  jQuery('textarea[name=comment]').autogrow();
});
</script>

However, I noticed that the <textarea> shrunk beyond the original number of rows defined in the rows attribute. (My own function used this attribute as the minimum number of rows.)

While looking for documentation on Chrys Bader’s plugin, I noticed that all the links on the plugin page now redirect to crysbader.com. (Sometimes, I really hate these catch-all redirects! :-x) I also found the Auto Growing Textareas Update plugin by daaz, which is the same with a few updates because the former project has not been updated since January 12, 2008, and had some issues that needed to be resolved. Sounds like a good idea to install the update.

Back to the minimum height problem: the plugin’s source file proved a good source of documentation. I learned that it has a minHeight option. I didn’t manage to actually pass that option in JavaScript, though; doing the following didn’t work:

jQuery('textarea[name=comment]').autogrow({minHeight: 8});

Luckily, it defaults to the min-height defined in the element’s CSS, so I could add the following to my stylesheet to stop the auto-shrinkage madness:

#comments textarea
{
  min: 8em;
 : 8em;
}