Pretty comments
Feb 01
UPDATE: Please refer to this post for support/updates on prettyComments
Here’s a small jQuery plugin that allow textareas to strech as content is put in. If the content goes over the defined height of the textarea, the textarea will stretch.
So no need to more scroll up in that cramped space to take a look at what you wrote 10 lines before.
It’s really easy to use, just download the file pretty-comments.js and include it in the html page where you want to allow the comment box stretching. Then put that bit of code in that same page to include the script:
<script src=“the-path/js/pretty-comments.js” type=“text/javascript” charset=“utf-8″></script>
You can then play a bit with the options which are located at the top of the javascript file, you can define if you want to have it animated or not and the speed of the animation.
Then put that bit of code in the same page you have your comment box, you need to pass the comment box id as a parameter for it to work.
<script type=”text/javascript” charset=”utf-8″>
$(document).ready(function(){
prettyComments.init(’comment’);
});
</script>
That’s really all there’s to it, if you want a demo, just leave a comment, you’ll see the box stretch 
Files: Un-compressed (3kb,options)
Packed (1kb, animated, no options)
Demo: Right in that page, just enter a lot of content in the comment box.
If you notice any bug, need any support, just leave a comment, I’ll do my best to help you!
Note: You also need the jQuery library in order to use this plugin
Update: Version: 1.1 relased! Now the textarea can shrink back to it’s original size when you delete content from it!
Feb 05 at 08:58
I saw that many of you post “tests” comments that are only on one line.
Your comments need to be on multiple lines, the textarea will only stretch vertically, not horizontally.
Go ahead try it!
Feb 05 at 15:00
How about the reverse? If I have a lot of text, then delete half of it, shouldn’t the box shrink back to normal?
Feb 05 at 16:06
I cannot get this work in IE7 - it’s fine of course in FF.
In IE7, the box stays the same height and the oldest lines of text disappear from view.
On the positive side, in IE7 there is no pulsing as there is in the other jQuery plugin (autogrow) that offers similar functionality
Feb 05 at 16:21
@Sami Hoda and @Bruce, several people pointed it to me. It was intentional at first, but on second thought it’s better to have it shrink when the user delete content.
I’m working on a new version where you won’t have to init the function (just need to include the javacript) and that will handle multiple input boxes.
Feb 05 at 16:56
@Bruce Do you have any demo page where I can test this, might be caused by something external.
I tested it on my IE7 environment and it’s working fine for me.
Thanks
Feb 05 at 17:09
Nice work!
Feb 05 at 18:42
hey this is a cool!
Feb 06 at 01:18
[...] Pretty comments Here’s a small jQuery plugin that allow textareas to strech as content is put in. If the content goes over the defined height of the textarea, the textarea will stretch. (tags: jquery) [...]
Feb 06 at 04:11
Can you get it work with a class instead of an id, as it would work for pages that have several textareas.
Thanks anyway, good work !
Feb 06 at 04:24
ok… no need to publish those two comments, but you should add that by changing “id” into “class” and “#” into “.” in your js, your pretty comments will work with classes.
It is important to me (and i’m not the only one i suppose) because xhtml strict does not support several occurrences of a unique idea in a page, but it has no problem with classes.
And again thanks for your work, really appreciated !
Feb 06 at 07:42
Try pasting text multiple times. It doesn’t always grow in FF2.
Feb 06 at 09:13
@Chocopunk I’m planning this in a future release, eventually I want it to parse all the textarea in a page and make them stretchable Thanks for your input
@Felix Gartsman Thanks for your input, i’ll look into the issue!
Feb 06 at 17:29
Muy interesante el articulo.
Enhorabuena por la web!!
Saduso
Feb 07 at 04:10
[...] Pretty comments permite modificar a uma textarea de uma forma especial. Quantas vezes estas a escrever um comentário num blog e quando o espaço acaba aparece uma scrollbar de lado? [...]
Feb 09 at 14:42
[...] пример вы можете увидеть на блоге автора скрипта, либо прямо на моем блоге на страницах, где [...]
Feb 09 at 16:44
[...] example, you can see on the author’s blog, or directly to my blog on pages where there is a form of [...]
Feb 18 at 06:10
C’est super!!
Feb 22 at 06:30
Amazing! Can I take it for WP?
Feb 23 at 12:36
@David Jacques-Louis Sure, you can use it wherever you want!
Feb 26 at 21:17
You make my day!
Mar 07 at 03:22
“For the Web2.0 and IE lover in you….NOT!”
hehehe, thank you for this
I like Web2.0 but IE sucks a lot!!!
Couldn’t we simply ban this browser off the world?
Mar 13 at 01:14
it’s cool
Mar 13 at 19:44
Aha~!
Mar 30 at 11:12
heelp i cant include it to my site, im a starter…
Apr 03 at 14:07
[...] heelp i cant include it to my site, im a starter……nomma [...]
Apr 03 at 16:51
Vraiment sympa, j’aime bien
Apr 03 at 16:54
[...] Pretty Comments is a tiny (1kb) jQuery plugin that makes textareas grow as content goes in. This should make a pretty cool addition to any jQuerified comment form. I think I’ll add this here to my own theme when I have some time to do some coding in order to get rid of Prototype. Share This [...]
Apr 06 at 21:07
very nice!
Apr 10 at 13:56
woah, very cool
Apr 12 at 01:12
nice work
Apr 15 at 07:58
This is really nice! Would love to see a dark theme as well and hopefully someone would be kind enough to write a wordpress plugin as well.
Apr 16 at 21:35
WOW ! great!
Apr 23 at 14:50
Helo! It is cool…
Apr 29 at 07:02
cool
Apr 29 at 11:39
Fantastisk
Apr 30 at 09:18
cool
May 07 at 15:00
Hai its cool
May 11 at 03:08
Muchas gracias por el fichero.
Enhorabuena por la web. Un saludo
May 16 at 05:16
mmm nice
May 27 at 07:02
cool
Jun 03 at 15:14
This is really nice! Would love to see a dark theme as well and hopefully someone would be kind enough to write a wordpress plugin as well.
Jun 23 at 07:22
Very Cool
Jun 25 at 02:59
nice one
Jun 27 at 12:13
Цікаво, як з українською мовою?)))
Jul 06 at 13:42
nice one
Jul 13 at 09:03
Is it possible to reduce the minimum height for the textarea? Currently it seems to always go to 55px, even if the textarea started off smaller. I want very small textareas, about 25px high.
Thanks, it’s brilliant
Jul 14 at 04:15
Can I have more than one comment area per page? I am working on a project that has tens or maybe even hundreds or comment fields. Trying to init each one with a separate id leaves me with only the last one working. Is it also possible to init this function by class name instead of ID?
Jul 14 at 15:48
@Mark the minimum height is set in the CSS, as the user enters content it will grow and if the user delete content it will come back as far as it’s original height.
As for the multiple textareas, you can visit the new project page for details instructions:
http://www.no-margin-for-errors.com/projects/prettyComments/
Thanks!