Form.Element.Resize.js

This is a JSAN-flavored library which implements some methods for add a mouse-driven resize feature on form fields such as text inputs, textareas and select controls.

Download

Current stable version is this:
Form.Element.Resize-0.05.tar.gz

You can find the complete distribution history on JSAN at http://openjsan.org/doc/e/ed/edoardo/.

Demo

The usage is really simple, the only thing needed is to instance a new Form.Element.Resize object for each element on which enable the resize feature.
The new() must be called when the page is fully loaded!
The code should be something like this:

new Form.Element.Resize({ elementId: 'myElementId' });

Some other optional properties can be overwritten for change the default behaviour.
Read the documentation to learn more.

It is possible to have multiple resizable elements in the same form, here is a demo. Enjoy!

Form.Element.Resize.js demo Who are you?

Give me your comment on this:

Rate this js class:

Note:
When you drag the corners you can press the SHIFT key to obtain a proportional resize!
A double click on the element restores its original dimensions (this does not work with select elements on some browsers).
The text element has the optional property minWidth which limits the minimun width allowed during the resize to 100px.
The textarea element has the two optional properties maxWidth and maxHeight specified to limit the maximum allowed resize both on width and height.

Documentation

What follows is the POD extraction from the module's source.

NAME

Form.Element.Resize - Unobtrusive javascript class for make a standard form field resizable with the mouse

SYNOPSIS

 <!-- XHTML page -->
 <form action="http://host.domain.tld/cgi-bin/script">
  <label for="message">Message:</label><br />
  <textarea id="message" name="message"></textarea>
 </form>

 // javascript code
 new Form.Element.Resize({ elementId: 'message' });

DESCRIPTION

This nice class implement some methods for add a mouse-driven resize feature on form fields such as text inputs, textareas and select controls. Clicking and dragging the borders or the corners of the form element will resize it while double clicking inside the element will restore its original dimensions (this does not work with select elements in Internet Explorer and Firefox). It is also possible to specify the minimum and maximum width and height allowed when the element is resized.

Tested under Firefox 2, Internet Explorer 6/7, Opera 9.

METHODS

new()

Class constructor, returns a new Form.Element.Resize object.

Parameters

oProps

Object literal where must be specified the element id on which activate the resize feature and other optional properties that overwrites the defaults.

Properties are:

elementId

ID of the element on which enable the resize feature. mandatory!

resizeType

Type of resize, shortcuts are auto, horizontal and vertical (default is auto).

- auto: resizable borders and corners are set automatically depending on the form element type. text input and non-multiple select have only the right border draggable; textarea and multple select have the right and bottom borders and the bottom-right corner draggable.

- horizontal: all field types have only the right border draggable.

- vertical: all field types have only the bottom border draggable.

It is also possible to specify each border/corner to activate by passing an object literal with one or more of the following keys:

n, ne, e, se, s, sw, w, nw

All are initially disabled, so for example, to activate only the bottom-right corner the property must be initialized like this:

 new Form.Element.Resize({ elementId: 'message', resizeType: { se: 1 } });

minWidth

Minimum width allowed for the element. When this value is reached the horizontal resize stops. By default this property is set to 1.

 new Form.Element.Resize({ elementId: 'message', minWidth: 100 });

minHeight

Minimum height allowed for the element. When this value is reached the vertical resize stops. By default this property is set to 1.

 new Form.Element.Resize({ elementId: 'message', minHeight: 50 });

maxWidth

Maximum width allowed for the element. When this value is reached the horizontal resize stops. By default this property is not set, so there is not limit to the resize.

 new Form.Element.Resize({ elementId: 'message', maxWidth: 400 });

maxHeight

Maximum height allowed for the element. When this value is reached the vertical resize stops. By default this property is not set, so there is not limit to the resize.

 new Form.Element.Resize({ elementId: 'message', maxHeight: 350 });

containerId

ID of the generated container element, useful for add some CSS rules on it.

containerClass

Class of the generated container element, useful for add some CSS rules on it.

EXAMPLES

 <!-- you can initialize the class within your XHTML page like this -->
 <form action="http://host.domain.tld/cgi-bin/script">
  <label for="message">Message:</label><br />
  <textarea id="message" name="message"></textarea>
  <script type="text/javascript">new Form.Element.Resize({ elementId: 'message', containerClass: 'resizable' });</script>
 </form>


 // or in a more unobtrusive way put the new in an included javascript file.
 // be sure to call the new when the page is loaded!
 // a cross-browser way may be this
 if( document.addEventListener )
 {
     document.addEventListener(
       'load',
       function() { new Form.Element.Resize({ elementId: 'message', containerClass: 'resizable' }); },
       false
     );

     return true;
 }
 else if( document.attachEvent )
 {
     return document.attachEvent(
       'onload',
       function() { new Form.Element.Resize({ elementId: 'message', containerClass: 'resizable' }); }
     );
 }

AUTHOR

Edoardo Sabadelli - http://www.sabadelli.it/edoardo

COPYRIGHT

This module is free software; you can redistribute it and/or modify it under the terms of the Artistic license.

Note:
XHTML validation on this page may fail due to the POD documentation inclusion, which can have some problems with the markup.

Edoardo Sabadelli