Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

114 lines (80 sloc) 4.57 KB
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/autogrow.css">
<header role="banner">
<p class="tagline">Less frustrating textareas</p>
<div role="main">
<p>Sometimes textareas suck. Often times they're not very pleasant to use, especially when you're going to write lots of text, because at some point that scrollbar will appear, and nobody likes that. Right? It certainly doesn't make for a very nice user-experience.</p>
<p>So this is what autogrow is trying to solve. There are other scripts like this out there, but many of them depend on jQuery, autogrow doesn't. Then <cite><a href="">“Expanding Text Areas Made Elegant”</a></cite> by <a href="">Neil Jenkins</a> got published and he demonstrated a very nice way to deal with expanding textareas, autogrow is based on his code, but made to be more reusable, customizable and well... Slightly different. You can read some <a href="">more background in this blog post</a>.</p>
<h2>Try it out!</h2>
<label for="autogrow">One</label>
<div class="autogrow-container">
<textarea id="autogrow" rows="14" cols="20" placeholder="Type something…"></textarea>
<label for="autogrow2">Two</label>
<div class="autogrow-container">
<textarea id="autogrow2" rows="14" cols="20" placeholder="Type something…"></textarea>
<p>You can get the code from Github, either by <a href="">downloading a .zip-file</a> or by cloning the repository, like so:</p>
<p><code>$ git clone</code></p>
<p>To use autogrow in you project, include the stylesheet and javascript file that comes with it.</p>
<div>Add this line inside your <code>&lt;head&gt;</code></div>
<p><code>&lt;link rel="stylesheet" href="path/to/autogrow.css"&gt;</code></p>
<div>And this one before <code>&lt;/body&gt;</code></div>
<p><code>&lt;script src="path/to/autogrow.js"&gt;&lt;/script&gt;</code></p>
<p>As an alternative you could just copy-and-paste the following code into your existing project files.</p>
<h3><label for="css">CSS</label></h3>
<textarea id="css" readonly rows="24" cols="80">
<?php echo file_get_contents('css/autogrow.css'); ?>
<h3><label for="js">JS</label></h3>
<textarea id="js" readonly rows="24" cols="80">
<?php echo file_get_contents('js/autogrow.js'); ?>
<p>After you have linked to the autogrow files, you'll need to wrap your <code>textarea</code>s in a container, a <code>div</code> for example, but anything works, and set the containers <code>class</code> to <code>.autogrow-container</code>. You can also set your own class on the container, see customization options below. This is what it should look like with the default container class-name:</p>
<code>&lt;div class="autogrow-container"&gt;</code>
<p>Lastly, call <code>autogrow.init()</code> from your script.</p>
<p>autogrow gives you options to set different class-names to the elements that get generated by the script. These are the options that you can set:</p>
<code>containerClass: 'your-container-class',</code>
<code>spanClass: 'your-span-class',</code>
<code>mirrorClass: 'your-mirror-class',</code>
<code>activeClass: 'your-active-class',</code>
<code>areaClass: 'your-area-class'</code>
<h2>Browser support</h2>
<p>The code for autogrow is tested and is working in the following browsers:</p>
<li>Chrome 18</li>
<li>Firefox 11</li>
<li>Safari 5</li>
<li>Opera 11 (Kinda works) *</li>
<p>* <small>Kinda works in Opera 11, but there's a quite annoying flickering when entering new lines. At the moment the solution is to use browser-sniffing and address the issue specifically for Opera, but i want to avoid that. I'll see if i can address this in a sane way in a future release.</small></p>
<p>Browsers that doesn't support autogrow should instead get a standard textarea, instead of the enhanced autogrowing one.</p>
<footer role="contentinfo">
<small>This project was brought to you by: <a href="">Carl Räfting</a>.</small>
<script src="js/autogrow.js"></script>
<script src="js/global.js"></script>
Jump to Line
Something went wrong with that request. Please try again.