Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joefiorini/textareaautoheight
Yet another autosize textarea jQuery plugin that allows animating the changes via CSS3 transitions
https://github.com/joefiorini/textareaautoheight
Last synced: 7 days ago
JSON representation
Yet another autosize textarea jQuery plugin that allows animating the changes via CSS3 transitions
- Host: GitHub
- URL: https://github.com/joefiorini/textareaautoheight
- Owner: joefiorini
- License: mit
- Created: 2012-09-18T03:55:51.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2012-09-18T05:21:14.000Z (over 12 years ago)
- Last Synced: 2025-01-16T18:17:26.801Z (8 days ago)
- Language: JavaScript
- Size: 117 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# textareaAutoHeight
### Background
I know there are already n+1 jQuery plugins that handle autosizing textareas. It's a boring, solved problem.
#### Or is it?
In our search we couldn't find any good plugins that allowed us to very subtly animate the textarea changing. jQuery.autoheight solves exactly that problem.
#### Old, crappy and out-dated... I mean, not animated, bleh.
#### Animated, ain't it purdy?
### Usage
Grab both `jquery.textareaAutoHeight.js` and `jquery.fieldselection.js` and put them wherever you keep your vendored javascripts.
In your code use some selector for textareas that you want to autosize and call `textareaAutoHeight` on them like so:
```javascript
$("textarea[autosize=true]").textareaAutoHeight();
```
And that's it!
### Bonus!!!
And you thought you just came here for a Javascript plugin, didn't you? Here's the CSS snippet I use to animate this (using SCSS & Compass's CSS3 mixins):
```scss
@include transition(height 50ms linear);
```
It really couldn't be any simpler.
### Contribute
You might be asking yourself how you can contribute to such an awesome project. Look no further, here's your answer:
1. Open an issue demonstrating the problem with a clear use case (what did you do, what did you expect to happen, what actually happened?) – Gist, [CodePen](http://www.codepen.io) or [jsfiddle](http://www.jsfiddle.net) happily accepted
2. Fix the issue you found and open a pull request
3. Describe your fix and why you made any changes unrelated to the fix
### Known Issues
If you _really_ want to contribute, here's a good place to start:
1. Caret positioning is probably messed up in IE – I did my best to maintain cross-browser support but haven't had the chance to check in IE yet. If anyone is up to the challenge, please try inserting/deleting text at arbitrary positions throughout the textarea and see if it works or breaks.
2. It doesn't work when pasting text – obviously this needs to be fixed, and soon; if someone else can get to it before I can, great! If not, I'll get to it eventually.
3. Performance? It stills feels a tiny bit sluggish.
### Double Plus Bonus
And for reading this all the way through, your reward is a rainbow pooping unicorn. Aren't you lucky?
