-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtest.html
110 lines (94 loc) · 3.08 KB
/
test.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Expanding Text Areas</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="stylesheets/jquery.elegantExpandingTextareas.css">
<link rel="stylesheet" href="stylesheets/styles.css">
</head>
<body>
<h1>
Direct binding:
</h1>
<pre>
$('#message_body').expandElegantly();
</pre>
<form id="single">
<fieldset>
<ol>
<li>
<label for="description">Message Body</label>
<div id="message_body" class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</li>
</ol>
</fieldset>
</form>
<h1>
Delegation:
</h1>
<pre>
$('#delegation').expandElegantly('.expandingArea');
</pre>
<form id="delegation">
<fieldset>
<ol>
<li>
<label for="description">Job Description</label>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea id="description"></textarea>
</div>
</li>
<li>
<label for="how">How do people apply for this job?</label>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea id="how"></textarea>
</div>
</li>
</ol>
</fieldset>
</form>
<h1>
Minimum height and pre-existing text:
</h1>
<pre>
$('#min_pre_existing').expandElegantly('.expandingArea');
</pre>
<form id="min_pre_existing">
<fieldset>
<ol>
<li>
<label for="tell_us_more">Tell us more about yourself.</label>
<div id="tell_us_more_container" class="expandingArea">
<pre><span></span><br></pre>
<textarea id="tell_us_more"></textarea>
</div>
</li>
<li>
<label for="futurama_quote">What is your favorite Futurama quote?</label>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea id="futurama_quote">Noooooo! You can see how I lived before I met you. It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter, while the octopus mooched off his girlfriend and watched TV. But then the winter came, and the grasshopper died, and the octopus ate all his acorns. Also he got a race car. Is any of this getting through to you?</textarea>
</div>
</li>
</ol>
</fieldset>
</form>
<script src="javascripts/vendor/jquery-1.7.min.js"></script>
<script src="javascripts/jquery.elegantExpandingTextareas.js"></script>
<script>
(function($) {
$(function() {
$('#message_body').expandElegantly();
$('#delegation').expandElegantly('.expandingArea');
$('#min_pre_existing').expandElegantly('.expandingArea');
});
})(jQuery);
</script>
</body>
</html>