forked from bgrins/ExpandingTextareas
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
330 lines (266 loc) · 9.01 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
<!doctype html>
<html>
<head>
<title>Expanding Textareas jQuery Plugin</title>
<style>
body {
background-color: #f4f4f4;
background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.3) 50%);
background-image: -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.3) 50%);
background-image: linear-gradient(0, transparent 50%, rgba(255,255,255,.3) 50%);
background-size: 50px;
color: #333;
font-family: Lucida Sans, Droid Sans, Arial;
margin:20px;
}
h1, h2, h3 {
font-family: Georgia, serif;
}
.container {
width: 80%;
margin: 5px auto;
}
.example {
margin-bottom: 10px;
padding-bottom: 10px;
margin-left: 15px;
border-bottom: dotted 1px;
}
.example p {
padding:0;
margin: 5px 0;
}
.group {
background: rgba(128, 128, 128, .1);
padding:0 4px;
border: solid 2px #fff;
border-radius: 4px;
margin-top: 10px;
margin-bottom: 20px;
box-shadow: 0 0 2px #001;
}
/* Note: None of these rules are necessary to have this plugin work! */
textarea {
padding: .5em;
background: #fff;
white-space: pre-wrap;
word-wrap: break-word;
font-size: 1em;
line-height: 1.5em;
margin: .5em 0;
}
textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
.exampleFonts textarea {
font-family: Arial;
color: orange;
letter-spacing: 2px;
font-style: italic;
font-size: 1.75em;
}
.exampleMinHeight textarea, .exampleMinHeight .textareaClone {
min-height: 6em;
}
.exampleMaxHeight textarea, .exampleMaxHeight .textareaClone {
max-height: 8em;
}
.exampleBorder textarea {
border: double 8px #333;
border-radius: 5px;
}
/* Need to include .textareaClone if the rule uses percentages.
This way everything can stay in sync without extra javascript */
.exampleProportional textarea,
.exampleProportional .textareaClone {
padding: 1em;
margin: 1em;
width: 50%;
}
.exampleCentered .expandingText {
width: 75%;
margin: 0 auto;
}
.exampleDestroy textarea {
height: 120px;
}
#resizeLog {
display: none;
}
</style>
<script type='text/javascript' src='jquery-1.7.js'></script>
<script type='text/javascript' src='expanding.js'></script>
</head>
<body>
<a href="http://github.com/bgrins/ExpandingTextareas"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<div class='container'>
<h1>Expanding Textareas jQuery Plugin</h1>
<div class='example'>
<textarea class='expanding' placeholder='Enter Some Text And Watch the Textarea Grow'></textarea>
</div>
<div class='group'>
<h2>Usage</h2>
<div class='example'>
<p>
<pre><code><script src='expanding.js></script>
<textarea class='expanding'></textarea></code></pre>
No extra JavaScript calls needed if you already have the 'expanding class' on the textarea.
If you'd like to manually call the plugin instead, use:
<pre><code><script>
$("#element").expandingTextarea();
</script></code></pre>
See the <a href='http://github.com/bgrins/ExpandingTextareas'>project page</a> for an explanation of how it works.
</p>
</div>
</div>
<div class='group'>
<h2>Highlights</h2>
<p>What makes this plugin cool?</p>
<ul>
<li><a href='http://www.alistapart.com/articles/expanding-text-areas-made-elegant/'>Expanding Text Areas Made Elegant</a></li>
<li>Mobile Friendly</li>
<li>Wide browser support. Works in IE6+, Safari, Chrome, Firefox, Opera</li>
<li>No <code>cols</code> hacks, or counting characters</li>
<li>Easy to style</li>
<li>Resize Friendly.
Content automatically resizes <em>without using the window.resize event or JavaScript to calculate sizes</em>!
<textarea class='expanding'>Resize your browser window to make this switch from one line to two, or two lines to three. Try copying and pasting more content in then resizing.</textarea>
</li>
</ul>
</div>
<div class='group'>
<h2>Examples</h2>
<p>
Almost all customization of the expandingTextareas plugin is simply done in CSS.
Here are some of the things you can do:
</p>
<div class='example exampleMinHeight'>
<h3>Minimum Height</h3>
<p>
Sometimes you may want to start off with a couple of lines to make it obvious that there is a textarea.
This is easy - just use CSS to add a min height to the textarea and the .textareaClone, like so:
</p>
<pre><code>
textarea, .textareaClone {
min-height: 6em;
}</code></pre>
<textarea class='expanding' placeholder='Enter Some Text'></textarea>
</div>
<div class='example exampleMaxHeight'>
<h3>Maximum Height</h3>
<p>
Set a <code>max-height</code> on the textarea to get scrolling after a certain size.
This is done just like the min height example above:
</p>
<pre><code>
textarea, .textareaClone {
max-height: 8em;
}</code></pre>
<textarea class='expanding' placeholder='Enter Some Text'></textarea>
</div>
<div class='example exampleFonts'>
<h3>
Custom font properties
</h3>
<p>
All fonts, colors, and spacings can be set to whatever you want, and the plugin will automatically copy the styles over to the invisible pre tag.
</p>
<textarea class='expanding'>This font is styled differently, but the resizing still works</textarea>
</div>
<div class='example exampleBorder'>
<h3>Custom borders</h3>
<p>
Custom border sizes on the textarea are handled as well
</p>
<textarea class='expanding' placeholder='Enter Some Text'></textarea>
</div>
<div class='example exampleProportional'>
<h3>Proportional paddings, margins, and widths</h3>
<p>
Percentages are a little tricky. <em>Firefox seems to have some problems rendering percentage paddings and margins on textareas, it is probably best if you avoid this technique.</em> Using ems for margin and padding seems to work fine.
You can use percentages on widths in all browsers, as you place the CSS rule on both elements, like so:
</p>
<pre><code>
textarea, .textareaClone {
padding: 1em;
margin: 1em;
width: 50%;
}</code></pre>
<textarea class='expanding' placeholder='Enter Some Text'></textarea>
</div>
<div class='example exampleCentered'>
<h3>Centering</h3>
<p>Centering the textarea is actually pretty easy, just set a width and a <code>margin: 0 auto;</code> on the container. Make sure your textarea has 100% width with border-box sizing too!</p>
<pre><code>
.expandingText {
width: 75%;
margin: 0 auto;
}
textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}</code></pre>
<textarea class='expanding' placeholder='Enter Some Text'></textarea>
</div>
<div class='example exampleDestroy'>
<h3>Destroying</h3>
<p>Allows for removing the expanding functionality.</p>
<pre><code><script>
$("#element").expandingTextarea('destroy');
</script></code></pre>
<textarea class='expanding'>This textarea
is currently
expanding...
But you
can change that.
↓</textarea>
<button>Remove the expanding functionality. Right now.</button>
<script type='text/javascript'>
$(function() {
$('.exampleDestroy button').click(function() {
var textarea = $('.exampleDestroy .expanding');
if (textarea.hasClass("expanding-init")) {
textarea.expandingTextarea('destroy');
$(this).text("Renable...");
}
else {
textarea.expandingTextarea();
$(this).text("Remove...");
}
});
});
</script>
</div>
<div class='example exampleEvents'>
<h3>Callbacks</h3>
<h4><code>resize</code></h4>
<p>Sometimes other parts of your application need to be notified when a textarea changes its height (e.g., to move out of its way!). You can dispatch such notifications through callback functions passed in when you first initialize the plug-in, like so:</p>
<pre><code><script>
$("#element").expandingTextarea({
resize: callback
});
</script></code></pre>
<textarea>This textarea
will log changes below
↓ </textarea>
<br />
<div id='resizeLog'>Current Height: <em></em></div>
<script type='text/javascript'>
$(function() {
$('.exampleEvents textarea').expandingTextarea({
resize: function(h) {
$("#resizeLog").show().find("em").text($(this).height() + "px");
}
});
});
</script>
</div>
</div>
</div>
</body>
</html>