BetterGrow

jquerylogo256_thumb[1]

Many things grow, but none grow better than when they BetterGrow.  Used by products such as Facebook and Basecamp, textareas that can adapt to user input, growing or shrinking their height to the demands of the text entered, provide an oft-desired minimalistic user experience of progressive enhancement – providing just what is needed by the consumer when it is needed.

facebook

Despite the widespread appeal of dynamic height textareas, I have been unable to find one such code snippet or JavaScript plugin that would meet all my needs; the most important of which was responsiveness.  Every dynamic textarea plugin that I found had some shortcoming, from delayed reaction to required grow/shrink event, to annoying visual flickers and blinks.  BetterGrow was designed to have none of these quirks, and simply grow (and shrink) better, based on the specified options and text content.

I wanted a dynamic and customizable textarea that kept up with me, that

didn’t wait until I was done typing to resize,
was much more ‘elastic’ than other similar plugins,
never obscured the entered text,
adapted both quickly and smoothly to the user.

So, I wrote the BetterGrow jQuery plugin and open-sourced it under both GPL and MIT License so that I, and everyone else, could benefit from a textarea that didn’t just grow, but grew better when it had BetterGrow. ;-)

grow_and_shrink

Usage

BetterGrow is a customizable jQuery plugin for enabling the improved, dynamic expansion of a textarea.

<div>
	<textarea id="area51">
	</textarea>
</div>
$('#area51').BetterGrow({ / * OPTIONS * / });

When the text within the target textarea exceeds the initial textarea height the textarea increases its height sufficiently to accommodate the new text.

When the text within the target textarea decreases sufficiently to allow for a lesser height, and the height is greater than the minimum textarea height or initial textarea height, then the textarea height is reduced to the minimum height required to display the text within, while not obscuring the visibility or requiring a scrollbar to view any of the text

Important:  The textarea must reside within an encapsulating DIV.  And, to avoid problems in IE, you should explicitly set the textarea’s width.

Method

When initialized, the textarea object and its parent DIV have their attributes adjusted.  The method implementation supports chaining and returns the jQuery object.

The DIV should add no size to the textarea object or region.  DIV height is automatically set to AUTO.

The textarea’s overflow is set to HIDDEN and the WIDTH is set to the current WIDTH. (FYI:  WIDTH of textarea must be defined to work in IE)

If the DIV is missing, the plugin will attempt to wrap the textarea in a new DIV.  It is recommended that all targeted textareas are wrapped in a DIV before calling BetterGrow to avoid unexpected behavior.

If the textarea already has text within it when BetterGrow is initialized, the textarea’s height is automatically adjusted to fit the text (if a height greater than the initial height is needed to present the text unobscured).

Settings

By default, the textarea’s initial empty height, aka minimum height, is set to 26px, with no special event handling enabled.  These and many other characteristics are fully customizable, and fully itemized and explained below.

To change these settings, they can either be accessed directly…

$.fn.BetterGrow.settings.initial_height = 100px;

… or at the time of initialization…

$('#area52').BetterGrow({
	initial_height:	50px,
	on_enter:		function() {
        				submit_form();
				},
	do_not_enter:	false
});

The default settings data structure is…

$.fn.BetterGrow.settings = {
	initial_height:	26,                // specified in pixels
	on_enter:		null,         // callback function; if specified, this is called when enter is pressed
	do_not_enter:	true         // if true and on_enter is not null then enter event does not cascade / pass-through to textarea
};

The parameters are defined (and all can be overridden) thus…

initial_height

  • minimum height in pixels for the textarea
  • if the textarea is EMPTY, this is the initial height

on_enter

  • callback function that is called when ENTER is pressed within the target textarea(s)
  • by default, on_enter is DISABLED (set to NULL)

do_not_enter

  • if on_enter is ENABLED (pointing to a callback function) and
    • if do_not_enter is TRUE,  then the ENTER event DOES NOT CASCADE / pass-through to the text area
    • if do_not_enter is FALSE, then the ENTER event will trigger the calling of the function referenced by on_enter and be reflected within the textarea
  • In other words, if TRUE then the content of the textarea will not change as a direct result of the user pressing ENTER.

Get It

You can download BetterGrow, dual licensed under GPL and MIT, from…

Git
Public Clone URL: git://github.com/theproductguy/BetterGrow.git
GitHub: http://github.com/theproductguy/BetterGrow

Demo

http://theproductguy.com/bettergrow/bettergrow.demo.html

Known Issues

  • None

Release Notes

Version 1.0 – 2009.12.02
Initial release.

If you find this useful, or have any questions, ideas, or issues, leave a comment.

Enjoy!

Jeremy Horn
The Product Guy

About these ads

4 thoughts on “BetterGrow

  1. Hey i used your plugin in a scenario where i show the textarea with content from the database .
    Now the textarea was not showing all text loaded from database, the last about 2 rows were not showing so i hacked the code abit just to get it to work but i suppose there could be a better way to hande this

    here is a snippet of the code i modified

    // apply the math
    if (curr_scroll_height > min_height)
    {
    // alert(“current scroll height is “+curr_scroll_height);
    obj.height(curr_scroll_height+20); min_height)
    {
    // alert(“min_height is “+min_height);
    obj.height(min_height);
    }

    Could you kindly highlight on this?

    Great Job!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s