<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>BigSmoke &#187; textarea</title>
	<atom:link href="http://blog.bigsmoke.us/tag/textarea/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.bigsmoke.us</link>
	<description>Smokes your problems, coughs fresh air.</description>
	<lastBuildDate>Sat, 04 Feb 2012 18:03:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>jQuery plugin for auto-growing textareas</title>
		<link>http://blog.bigsmoke.us/2010/02/04/auto-grow-textarea-jquery-plugin</link>
		<comments>http://blog.bigsmoke.us/2010/02/04/auto-grow-textarea-jquery-plugin#comments</comments>
		<pubDate>Thu, 04 Feb 2010 19:28:38 +0000</pubDate>
		<dc:creator>Rowan Rodrik</dc:creator>
				<category><![CDATA[Technology]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[textarea]]></category>

		<guid isPermaLink="false">http://blog.bigsmoke.us/?p=1194</guid>
		<description><![CDATA[]]></description>
			<content:encoded><![CDATA[<p>With my big blog redesign, I wanted a auto-growing comment box. In the past, I&#8217;ve written a nice <a href="http://blog.bigsmoke.us/2007/02/18/automatic-html-textarea-resizing">auto-resize textarea JavaScript function</a> 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.</p>

<p>I added the <a href="http://plugins.jquery.com/project/autogrow"><cite>Auto Growing Textareas</cite></a> plugin by Chrys Bader to my theme. In my <tt>header.php</tt>:</p>

<pre class="xml"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;?php</span> wp_enqueue_script<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'jqueryautogrow'</span>, get_bloginfo<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'template_directory'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #ff0000;">'/jquery.autogrow.js'</span>, array<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'jquery'</span><span style="color: #66cc66;">&#41;</span>, <span style="color: #ff0000;">'1.2.2'</span><span style="color: #66cc66;">&#41;</span> <span style="font-weight: bold; color: black;">?&gt;</span></span>
<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;script</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text/javascript&quot;</span><span style="font-weight: bold; color: black;">&gt;</span></span>
$ = jQuery; /* FIXME: Ugly hack */
jQuery(document).ready(function(){
  jQuery('textarea[name=comment]').autogrow();
});
<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/script<span style="font-weight: bold; color: black;">&gt;</span></span></span></pre>

<p>However, I <a href="http://blog.bigsmoke.us/2010/01/30/hp-laserjet-6p-under-ubuntu#comment-91343">noticed</a> that the <tt>&lt;textarea&gt;</tt> shrunk beyond the original number of rows defined in the <tt>rows</tt> attribute. (My own <a href="http://blog.bigsmoke.us/2007/02/18/automatic-html-textarea-resizing">function</a> used this attribute as the minimum number of rows.)</p>

<p>While looking for documentation on Chrys Bader&#8217;s plugin, I noticed that all the links on the <a href="http://plugins.jquery.com/project/autogrow">plugin page</a> now redirect to crysbader.com. (Sometimes, I really <em>hate</em> these catch-all redirects! <img src='http://blog.bigsmoke.us/wp-factory/wp-includes/images/smilies/icon_mad.gif' alt=':-x' class='wp-smiley' /> ) I also found the <a href="http://plugins.jquery.com/project/autogrowupdate"><cite>Auto Growing Textareas <strong>Update</strong></cite></a> plugin by daaz, which is the same with a few updates because the former project <q>has not been updated since January 12, 2008, and had some issues that needed to be resolved.</q> Sounds like a good idea to install the update.</p>

<p>Back to the minimum height problem: the plugin&#8217;s source file proved a good source of documentation. I learned that it has a <tt>minHeight</tt> option. I didn&#8217;t manage to actually pass that option in JavaScript, though; doing the following didn&#8217;t work:</p>

<pre class="javascript">jQuery<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'textarea[name=comment]'</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">autogrow</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span>minHeight: <span style="color: #CC0000;">8</span><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;</pre>

<p>Luckily, it defaults to the <tt>min-height</tt> defined in the element&#8217;s CSS, so I could add the following to my stylesheet to stop the auto-shrinkage madness:</p>

<pre class="css">#comments textarea
<span style="color: #66cc66;">&#123;</span>
  min-<span style="color: #000000; font-weight: bold;">height</span>: 8em;
  <span style="color: #000000; font-weight: bold;">height</span>: 8em;
<span style="color: #66cc66;">&#125;</span></pre>]]></content:encoded>
			<wfw:commentRss>http://blog.bigsmoke.us/2010/02/04/auto-grow-textarea-jquery-plugin/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

