diff --git a/README.markdown b/README.markdown new file mode 100644 index 0000000..ace1037 --- /dev/null +++ b/README.markdown @@ -0,0 +1,20 @@ +# expandable + +A jQuery plugin that auto-expands textareas to fit the contents as a user types. + + +## Settings + +The expandable plugin has 4 settings: + +* `duration` - The speed of the animation when expanding (or shrinking). Default is 'normal'. +* `interval` - The interval at which it checks the textarea. Default is 750. +* `within` - The number of rows left before expanding. Default is 1. +* `by` - The number of rows to expand by. Default is 2. + + +## License + +The expandable plugin is dual licensed *(just like jQuery)* under the [MIT](http://www.opensource.org/licenses/mit-license.php) and [GPL](http://www.opensource.org/licenses/gpl-license.php) licenses. + +Copyright (c) 2008 [Brandon Aaron](http://brandonaaron.net) \ No newline at end of file diff --git a/jquery.expandable.js b/jquery.expandable.js new file mode 100644 index 0000000..525e44d --- /dev/null +++ b/jquery.expandable.js @@ -0,0 +1,43 @@ +/*! Copyright (c) 2008 Brandon Aaron (http://brandonaaron.net) + * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) + * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. + */ + +(function($) { + +$.fn.extend({ + expandable: function(options) { + options = $.extend({ duration: 'normal', interval: 750, within: 1, by: 2 }, options); + return this.filter('textarea').each(function() { + var $this = $(this).css({ display: 'block', overflow: 'hidden' }), minHeight = $this.height(), interval, heightDiff = this.offsetHeight - minHeight, + rowSize = ( parseInt($this.css('lineHeight'), 10) || parseInt($this.css('fontSize'), 10) ), + $div = $('
').appendTo('body'); + $.each('borderTopWidth borderRightWidth borderBottomWidth borderLeftWidth paddingTop paddingRight paddingBottom paddingLeft fontSize fontFamily fontWeight fontStyle fontStretch fontVariant wordSpacing lineHeight width'.split(' '), function(i,prop) { + $div.css(prop, $this.css(prop)); + }); + $this + .bind('keypress', function(event) { if ( event.keyCode == '13' ) check(); }) + .bind('focus blur', function(event) { + if ( event.type == 'blur' ) clearInterval( interval ); + if ( event.type == 'focus' && !interval ) setInterval(check, options.interval); + }); + function check() { + var text = $this.val(), newHeight, height, usedHeight, usedRows, availableRows; + $div.html( text.replace(/\n/g, '