prettyComments, a solution to comment boxes

by: Stéphane Caron

Here's my solution to comment boxes that are alway too small for long comment. As the user enter comment in this box, the box will stretch so the full comment will always be visible, making it easier for the user to review and edit his comment before posting it.

If you have any comment or ways to improve it, just leave me a comment!

Below you can se a demo of it in action.

Demo

Enter your comment. This also work with multiple textarea.

Browser support

This plugin has been tested and is known to work in the following browsers

• Firefox 3.0 (Mac/PC)
• Firefox 2.0 (Mac/PC)
• Opera 9.5 (Mac/PC)
• Safari 3.1.1 (Mac)
• Internet Explorer 6.0 (PC)
• Internet Explorer 7.0 (PC)

Copyright

This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones. Donations are always welcome.

Download

Uncompressed version (Script: 2.7kb)

Compressed version (Script: 1.8kb)

Version history

• 1.4: Added max-height support, made the code execute faster, changed the code to act as a real plugin.
• 1.3: Fixed various utilisability bugs.
• 1.2: Added support for multiple textareas, optimized the code.
• 1.1: Added the ability to shrink the textareas.
• 1.0: Initial release of prettyComments.

How to use

Nothing is easier to use. First include the jQuery library then include the prettyComments javascript in the head of the page(s) where you want to use prettyComments.
jQuery can be download here

					
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/prettyComments.js" type="text/javascript" charset="utf-8"></script>
					
				

Then you need to initalize prettyComments.

					
	<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$('textarea').prettyComments();
		});
	</script>
					
				

If you want prettyComments to be initialized on specific textareas, you can specify which element by using a CSS selector, like so:

					
	<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$('#textarea1,.classOnTextarea2').prettyComments();
		});
	</script>
					
				

You can also specify settings for the plugin, those are:

• animate: true/false
• animationSpeed: 'slow'/'normal'/'fast'
• maxHeight: 500 (numeric value)

To specify the settings you want to uses for each of you textarea, you need to initialize the plugin like so:

					
	<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$('#textarea1').prettyComments();
			$('.classOnTextarea2').prettyComments({animate: true, maxHeight:100});
		});
	</script>
					
				

That's it, now your teaxtareas should behave the same as in the demo on this page

Support

If you need support, you can leave a comment in the main prettyComments post.

Donations

I've spent a lot of time to develop/support this script. You liked it? Feel free to donate!

© Stéphane Caron 2008