-
Notifications
You must be signed in to change notification settings - Fork 73
/
index.html
50 lines (37 loc) · 2 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
<!doctype html><html dl><head>
<title>Expanding Textareas</title>
<link rel="stylesheet" type="text/css" href="libs/homepage.css">
<script type='text/javascript' src='libs/jquery-1.11.0.js'></script>
<script type='text/javascript' src='dist/expanding.jquery.js'></script>
<script type='text/javascript' src='libs/homepage.js'></script>
</head>
<body>
<div id="demo">
<textarea class="expanding" spellcheck="false"></textarea>
</div>
<div id="downarrow">ˇ</div>
<div id="narrative">
<div class="top">
<h1>Expanding Textareas</h1>
<iframe src="http://ghbtns.com/github-btn.html?user=bgrins&repo=ExpandingTextareas&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</div>
<h2>How do they work?</h2>
<p>Based on Neil Jenkins' work at <a href="www.alistapart.com/articles/expanding-text-areas-made-elegant/">alistapart</a>,
an invisible clone pre element is maintained behind your textarea. Whenever
the height of this pre changes, the textarea is updated.</p>
<h2>Usage</h2>
<p>Include <code><a href="expanding.js">expanding.js</a></code> and jQuery in your page. Any textareas with the
<code>expanding</code> class will then be transformed.</p>
<pre><code><script src='expanding.js'></script>
<textarea class='expanding'></textarea></code></pre>
<textarea class="expanding">Try typing here...</textarea>
<p>Advanced usage details on the
<a href="https://github.com/bgrins/ExpandingTextareas">GitHub page</a>
(includes programmatic creation).</p>
<h2>Styling</h2>
<p>You can style the textarea however you like (including <code>max-height</code>).
This plugin has been tested in Chrome, Safari, Firefox, IE8, and mobile Safari.</p>
<p class="footer">made by <a href="http://github.com/bgrins">@bgrins</a>, <a href="http://github.com/domchristie">@domchristie</a>, and <a href="http://github.com/bgrins/ExpandingTextareas/graphs/contributors">contributors</a></p>
</div>
</body>
</html>