Textarea Resizer

Textarea Resizer is a Javascript class that adds a "handle" to the bottom of textareas and allows the users to resize them with drag-drop interaction like you might resize the window of a desktop application.

Example

You can see an bare-bones example of Textarea Resizer in action here.

Implementation

These instructions assume that you at least have a rough idea about how to use HTML. They don't — however — require you to be a wizardly Javascript genius or Jeffrey Zeldman (you can rest assured that I am neither).

Installation

First you need to download the .js and stick it somewhere on your web server. Link to it with using the script element inside the head of your web page.

Attaching to textareas

The script will need to be called for each textarea in the document that you wish to have a draggable handle. An instance needs to be created like so:

new textareaResizer(textarea);

textarea is a textarea DOM node. You'd want this code to execute once the document has fully loaded, so would attach it to the window.onload event handler. Generally you probably want all textareas in the document to be resizable, so there is a static helper method ( textareaResizer.addToAll() ) which finds all textareas in the document and creates a textareaResizer instance for them. Therefore, you can just attach textareaResizer.addToAll() to the window.onload event and be away. That can be done like so:

window.onload = function() { textareaResizer.addToAll(); };

Styling the handle

When the a textarea's handle is created, it is just an empty span element with no styling. Therefore, you will not actually be able to see it unless you use CSS to give it a size (and make it a block-level element). Each handle has a class of "textarea-handle". You can use this in your stylesheet to select all textarea handles. Here is an example of styling you could use:

.textarea-handle {
	height: 5px;
	display: block;
	background: black;
}

The height and display properties are essential for the handle to actually be visible in the document. The background property here allows it to be seen against a white background.

Browser Support

Browsers it works in:

• IE 6
• Gecko
• Safari

Turned off in:

• Konqueror
• Opera
• IE 5/Win

Compatibility not known about in:

• IE5/Win
• IE5/Mac