Block Resizer

This is a small script for resizing textareas and other block elements (div, table, p, blockquote, etc.) vertically by dragging. It can use pre-made resizing handle or add one automatically at the bottom of the element when run. I know, Safari 3.0 has native support for resizing textareas and there are several plugins for Firefox that can add that. However most users still don’t have that (quite useful) option.

Demo (Opens in a popup window)

Download Block Resizer 1.0

Installation

Just link the js file in the header and add the style for the resizing handle if using the automatically created one:

<script type=”text/javascript” src=”block-resizer.js”></script>
<style type=”text/css”>
#auto-handle {font-size:6px;height:6px;cursor:s-resize;border-top:3px dashed #aaa;}
</style>

Activation

Activates with onmouseover="Resizer.Init(element.id, handle.id)" on the handle element if using pre-made handles, or onclick="Resizer.Init(this.id)" on the element when auto-creating handles. See the source of the demo for some examples.

2 Comments

  • #2 by sofiane February 20, 2010 at: 12:40 pm

    I really like this plugin, it’s not going to be hard to resize by the left and right, very useful,
    thank you very much.

  • #1 by Michael November 5, 2008 at: 5:30 pm

    nice!!! I like it… how about a JS to drag the block around?