forked from LeaVerou/stretchy
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (108 loc) · 7.11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Stretchy: Form element autosizing, the way it should be.</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1><iframe src="logo.svg"></iframe></h1>
<div>
<p>Form element autosizing,<br /> the way it should be.</p>
<nav>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="stretchy.js" download>Download</a></li>
</ul>
</nav>
</div>
</header>
<section id="features">
<h1>Features</h1>
<ul>
<li><strong>Handles multiple types of form controls</strong> Textareas? Inputs? Select menus? You name it!</li>
<li><strong>Tiny footprint</strong> Less than 1.5KB minified and gzipped!</li>
<li><strong>Automatically accounts for newly added controls</strong> via mutation observers, where supported</li>
<li><strong>Restrict form controls by a selector</strong> …or don’t and autosize all your form controls!</li>
<li><strong>Completely standalone</strong> no jQuery or other dependencies</li>
<li><strong>Plays well with existing HTML/CSS</strong> Follows placeholders, styling, <code>min/max-width/height</code> constraints, transitions</li>
<li><strong>No JS knowledge required</strong> Everything configurable via HTML!</li>
<li><strong><a href="#browser-support">Works in all modern browsers</a></strong> Chrome, FF 3.6, IE9, Opera, Safari, Android & more.</li>
</ul>
</section>
<section id="examples">
<h1>Examples</h1>
<label>Textarea:
<textarea placeholder="Type here too"></textarea>
</label>
<label>Input with placeholder:
<input placeholder="Type some text" />
</label>
<label>Input with intial value:
<input value="Some text" />
</label>
<label>Select:
<select>
<option>CSS</option>
<option>JavaScript</option>
<option>HTML</option>
<option>SVG</option>
<option>WAI-ARIA</option>
</select>
</label>
</section>
<section id="usage">
<h1>Usage</h1>
<p>Just include the script anywhere in the page:</p>
<pre><code class="language-markup"><script src="<a href="stretchy.min.js" download>stretchy.min.js</a>" async></script></code></pre>
<p>By default, it applies to all <code><textarea></code>s, <code><select></code> menus with no <code>size</code> attribute and <code><input></code> elements that are text fields (e.g. with no <code>type</code> attribute, or with one equal to <code>text</code>, <code>tel</code>, <code>email</code>, <code>url</code>).</p>
<p>To limit that set further you can use the <code>data-stretchy-filter</code> attribute, on any element. Note that this means you can use the attribute on the <code><script></code> element that calls Stretchy itself, in which case you can also shorten its name to <code>data-filter</code>.</p>
<p>For example, to restrict it to elements that either have the <code>foo</code> class or are inside another element that does, you could use <code>data-stretchy-filter=".foo, .foo *"</code> on an element or call Stretchy like this:</p>
<pre><code class="language-markup"><script src="<a href="stretchy.min.js" download>stretchy.min.js</a>" data-filter=".foo, .foo *" async></script></code></pre>
<p>If you specify the <code>data-stretchy-filter</code> attribute on multiple elements, the last value (in source order) wins. <code>data-filter</code> directly on Stretchy’s <code><script></code> element takes priority over any <code>data-stretchy-filter</code> declaration.</p>
<p>If you want to avoid modifying the markup, you can use JavaScript instead:</p>
<pre><code class="language-javascript">Stretchy.selectors.filter = ".foo, .foo *";</code></pre>
<p>Note that to prevent Stretchy from being applied to elements that don’t match the selector at all, you would need to run that line before <code>DOMContentLoaded</code> fires.</p>
</section>
<section id="api">
<h1>JavaScript API</h1>
<p>Stretchy has a spartan API, since in most cases you don’t need to call it at all. Stretchy works via event delegation and detects new elements via mutation observers, so <strong>you do not need to call any API methods for adding new elements</strong> via scripting (e.g. AJAX).</p>
<p>If needed, these are Stretchy’s API methods:</p>
<dl>
<dt>Stretchy.resize(element)</dt>
<dd>Autosize one element based on its content. Note that this does not set up any event listeners, it just calculates and sets the right dimension (width or height, depending on the type of control) once.</dd>
<dt>Stretchy.resizeAll(elements)</dt>
<dd>Apply <code>Stretchy.resize()</code> to a collection of elements, or all Stretchy is set to apply to, if no argument is provided.</dd>
<dt>Stretchy.resizes()</dt>
<dd>Can Stretchy be used on this particular element? (checks if element is in the DOM, if it's of the right type and if it matches the selector filter provided by <code>data-stretchy-selector</code>, if the attribute is set.</dd>
<dt>Stretchy.active</dt>
<dd>Boolean. Set to <code>false</code> to temporarily disable Stretchy.</dd>
</dl>
</section>
<section id="browser-support">
<h1>Browser Support Notes</h1>
<ul>
<li>On <a href="http://caniuse.com/#feat=mutationobserver">browsers that do not support mutation observers</a>, you have to manually call <code>Stretchy.resize()</code> on new elements. </li>
<li>IE has an issue with <code><input></code> elements, due to it misreporting <code>scrollWidth</code>. If this matters to you, you can use <a href="https://github.com/gregwhitworth/scrollWidthPolyfill">this polyfill</a> by Greg Whitworth (under development).</li>
</ul>
</section>
<footer>
Made with ♥ by <a href="http://lea.verou.me">Lea Verou</a>
• <a href="http://lea.verou.me/2015/07/stretchy-form-element-autosizing-the-way-it-should-be">About</a>
• <a href="javascript:(function(script){script.src='https://leaverou.github.io/stretchy/stretchy.min.js';document.body.appendChild(script);})(document.createElement('script'))">Use as a bookmarklet!</a>
<a href="https://github.com/LeaVerou/stretchy" class="github-ribbon">Fork me on GitHub</a>
<div class="social-media">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="LeaVerou">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</script>
<iframe src="https://ghbtns.com/github-btn.html?user=leaverou&repo=stretchy&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="97" height="20"></iframe>
<iframe style='vertical-align: middle' src="https://ghbtns.com/github-btn.html?user=leaverou&repo=stretchy&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
</div>
</footer>
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=leaveroume" id="_carbonads_js"></script>
<script src="stretchy.js"></script>
</body>
</html>