TextArea Resizer-轻识

* Added live demo page (url at bottom of page)

This project allows the user to extend the textarea element/area within the web page whenever they feel.

I noticed this functionality when adding a plugin to this website, I guess it's not used that often on other websites.

It is part of the Drupal code, although I haven't much experience with Drupal.

I found it useful and could see an immediate use for it on one of the web applications that I use (Tridion).

Anyway, I decide to spend a few minutes (it was a quick conversion) and turn the functionality in to a jQuery plugin (I couldn't see it in the repository).

To use it you'll need to add the usual jQuery javascript and the plugin to your web page HEAD section:

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
 <script type="text/javascript" src="jquery.textarearesizer.compressed.js"></script> 

And then add a little style sheet information:

  <style type="text/css">
 div.grippie {
 background:#EEEEEE url(grippie.png) no-repeat scroll center 2px;
 border-color:#DDDDDD;
 border-style:solid;
 border-width:0pt 1px 1px;
 cursor:s-resize;
 height:9px;
 overflow:hidden;
 }
 .resizable-textarea textarea {
 display:block;
 margin-bottom:0pt;
 width:95%;
 height: 20%;
 }
 </style> 

Finally, it's a simple case of activating it against a given element set:

  <script type="text/javascript">
 /* jQuery textarea resizer plugin usage */
 $(document).ready(function() {
 $('textarea.resizable:not(.processed)').TextAreaResizer();
 });
 </script> 

An example is included in the release.

* Please note that it also uses a tiny 'png' image, although it's entirely optional as this is part of the example style sheet (as seen in the Drupal version).

Enjoy!

My other projects include:
Bounce - http://plugins.jquery.com/project/Bounce
Hover Image Text - http://plugins.jquery.com/project/HoverImageText