In a few applications, I've noticed a relatively new feature (at least, new to me): a "handle", or bar, at the bottom of a textarea that allows you to resize it by clicking-and-dragging. I think this is a great addition to the usability of any site where a user might type in just a little or a lot into a textarea.
There are a number of JavaScript toolkits which can give you this capability, but not everyone wants to add the loadtime of a full toolkit to their site. So I'll point out one script that can give you this capability: Jonathan Leighton's Textarea Resizer.
Textarea Resizer works by putting a "handle" at the bottom of textareas which can be pulled up or down, changing the height of the textarea as you go. Here's an example below:
This functionality can be implemented very easily, as per the directions on Jonathan's site. First, just embed the textarea-resizer.js script in the head of your document:
<script language="JavaScript" src="/js/textarea-resizer.js"></script>
Then, you can either call the script on all of the textarea elements in the page at once...
window.onload = function() { textareaResizer.addToAll(); }
...or, you can call the script on individual textareas like so:
new textareaResizer(textarea name);
The handle won't show up unless you specify a style for it. The style that Jonathan gives in his example, a black bar, is a little too unsophisticated to be attractive, if you ask me, so I suggest adding a background image for a set of what I'll call "nubbins" or "grips", and setting the handle's color to grey:
<style type="text/css">
.textarea-handle {
height: 5px;
display: block;
width: 450px;
background: #C5C5C5;
background-image: url('http://www.mollerus.net/images/grab-handle.gif');
background-repeat: no-repeat;
background-position: 50% 50%;
}
</style>
So go out there and have some fun with the textarea-resizer script. I think your users will appreciate being able to set the size of textareas themselves.
Comments (4)
February 28, 2008
11:26AM | #
Keep in mind that Safari 3 users already have this ability built into the browser, so you may want to disable this feature for users with Safari 3.
February 28, 2008
11:41AM | #
@Brian: You're right, Safari 3 does have a resizing handle baked in to the lower-right-hand corner of all textareas. I'll drop a note to Jonathan that he may want to add some detection to his script.
August 13, 2009
4:43PM | #
Your wiki link (last link) is broken.
February 5, 2010
7:22AM | #
Not able to download source code. It seems link is broken.