Permalink
Browse files

updating readme

  • Loading branch information...
bgrins committed Nov 2, 2011
1 parent 301d9a0 commit 142e23ee97650acd1f27fa154fcf87b21e61cd8e
Showing with 52 additions and 11 deletions.
  1. +52 −11 README.md
View
@@ -6,32 +6,73 @@ Based off of work by [Neil Jenkins](http://nmjenkins.com/) that can be seen here
Start with markup like this:
+ <script src='expanding.js' type='text/javascript'></script>
<textarea class='expanding'></textarea>
+*And that's it*. The plugin finds textareas with the 'expanding' class on page load and initializes them for you. If you would prefer to initialize the textareas on your own, do something like this:
+
+ <script type='text/javascript'>
+ $("#element").expandingTextarea();
+ </script>
+
+If you'd like to change the initial selector to grab ALL textareas on load, you can change this property:
+
+ $.fn.expandingTextarea.initialSelector = "textarea";
+
+### How it works
+
+See the [original article](http://www.alistapart.com/articles/expanding-text-areas-made-elegant/) for a great explanation of how this technique works.
+
The plugin will automatically find this textarea, and turn it into an expanding one. The final (generated) markup will look something like this:
<div class="expandingText">
<textarea class="expanding"></textarea>
- <pre class="textareaClone"><span></span><br></pre>
+ <pre class="textareaClone"><div></div></pre>
</div>
-
-You can style things how you'd like for the textarea, but it is best (especially if you are using percentages for values, if you combine these into a rule with the `pre` tag, like this:
+The way it works is that as the user types, the text content is copied into the div inside the pre (which is actually providing the height of the textarea). So it could look like this:
- textarea, .textareaClone {
- padding: 3%;
+ <div class="expandingText">
+ <textarea class="expanding">Some Content\nWas Entered</textarea>
+ <pre class="textareaClone"><div>Some Content
+ Was Entered</div></pre>
+ </div>
+
+### Styling
+
+You can style things how you'd like for the textarea, and they will automatically be copied over to the invisible pre tag.
+
+ textarea {
+ padding: 10px;
background: transparent;
font-family: Arial;
font-style: italic;
- font-size:33px;
- white-space: pre-wrap;
- word-wrap: break-word;
+ font-size:20px;
}
-
-See the [original article](http://www.alistapart.com/articles/expanding-text-areas-made-elegant/) for a great explanation of how this technique works.
+
+If you'd like to use percentage widths, there are two options. One is to apply the rule to both the textarea and the invisible pre, like this:
+
+ textarea, .textareaClone {
+ width: 50%;
+ }
+
+If you'd prefer to center the content, set the width to 100% on the textarea, and specify the width on the expandingText container:
+
+ textarea {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 100%;
+ }
+ .expandingText {
+ width: 50%;
+ margin: 0 auto;
+ }
+
See the [demo](http://bgrins.github.com/ExpandingTextareas/) to see the plugin in action.
### Browser Support
-At the moment, I have not tested this in IE. I believe the technique will work, but it probably is not yet. I will update this when IE is definitely supported.
+I have checked this in Chrome, Safari, Firefox, IE7, and mobile Safari and it works in all of them.

0 comments on commit 142e23e

Please sign in to comment.