Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 327 lines (274 sloc) 12.211 kb
a458244 Create "quick demo" demonstrating a small sample of PIE-supported CSS3 f...
Jason Johnston authored
1 <!DOCTYPE html>
2 <html>
3 <head>
4
5 <meta content="text/html; charset=UTF-8" http-equiv="content-type">
6 <title>PIE CSS3 Quick Demo</title>
7
8 <style type="text/css">
9 #demo {
10 width: 600px;
11 border: 1px solid #CCC;
12 padding: 20px 20px 0;
13 position: relative;
14 font-size: 11px;
15 font-family: sans-serif;
16 }
17
18 #target {
19 position: absolute;
20 left: 20px;
21 top: 20px;
22 width: 200px;
23 text-align: center;
24 padding: 60px 0;
25 background: #EEE;
26 border: 1px solid #999;
27 font-size: 18px;
28
29 /* default CSS3 values: */
30 /*-webkit-border-radius: 8px;
31 -moz-border-radius: 8px;
32 border-radius: 8px;
33 -webkit-box-shadow: #666 0 2px 3px;
34 -moz-box-shadow: #666 0 2px 3px;
35 box-shadow: #666 0 2px 3px;
36 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));
7b143ad Update docs and demos to include updated browser gradient support: -webk...
Jason Johnston authored
37 background: -webkit-linear-gradient(#9F9, #393);
a458244 Create "quick demo" demonstrating a small sample of PIE-supported CSS3 f...
Jason Johnston authored
38 background: -moz-linear-gradient(#9F9, #393);
7b143ad Update docs and demos to include updated browser gradient support: -webk...
Jason Johnston authored
39 background: -ms-linear-gradient(#9F9, #393);
40 background: -o-linear-gradient(#9F9, #393);
a458244 Create "quick demo" demonstrating a small sample of PIE-supported CSS3 f...
Jason Johnston authored
41 -pie-background: linear-gradient(#9F9, #393);*/
42 }
43
44 #controls {
45 margin: 0 0 20px 220px;
46 }
47
48 #controls input {
49 font-family: monospace;
50 font-size: 1em;
51 }
52
53 #controls fieldset {
54 border: 1px solid #CCC;
55 padding: 3px 10px 5px;
56 margin: 0 0 10px;
57 }
58
59 #controls fieldset legend {
60 line-height: normal;
61 color: #000;
62 }
63
64 #controls fieldset fieldset {
65 margin: 0 0 5px;
c7cbd34 Add JS color picker to gradient color fields in demo
Jason Johnston authored
66 padding-left: 5px;
a458244 Create "quick demo" demonstrating a small sample of PIE-supported CSS3 f...
Jason Johnston authored
67 line-height: 25px;
68 }
69
70 #controls ul, #controls li {
71 display: block;
72 list-style: none;
73 margin: 0;
74 padding: 0;
75 }
76
77 #controls .toggle {
78 float: left;
79 }
80 #controls .details {
81 float: right;
82 }
c7cbd34 Add JS color picker to gradient color fields in demo
Jason Johnston authored
83 #controls .details label {
84 margin-left: 2px;
85 }
86
87 .colorPicker {
88 position: absolute;
89 margin-top: 20px;
90 border: 1px solid #CCC;
91 background: #FFF;
92 }
a458244 Create "quick demo" demonstrating a small sample of PIE-supported CSS3 f...
Jason Johnston authored
93
94 #output {
95 display: block;
96 border: 1px solid #CCC;
97 background: #EEE;
98 margin: 0 0 20px;
99 padding: 20px;
100 white-space: pre;
101 }
102 </style>
103
c7cbd34 Add JS color picker to gradient color fields in demo
Jason Johnston authored
104 <link href="farbtastic/farbtastic.css" rel="stylesheet" type="text/css" />
a458244 Create "quick demo" demonstrating a small sample of PIE-supported CSS3 f...
Jason Johnston authored
105 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
c7cbd34 Add JS color picker to gradient color fields in demo
Jason Johnston authored
106 <script type="text/javascript" src="farbtastic/farbtastic.min.js"></script>
a458244 Create "quick demo" demonstrating a small sample of PIE-supported CSS3 f...
Jason Johnston authored
107
108 <script type="text/javascript">
109 $( function() {
110
111 var loaded = false,
112 behaviorId,
e6f4ece Create new directory for demo files to be added
Jason Johnston authored
113 behaviorUrl = '../build/PIE.htc';
a458244 Create "quick demo" demonstrating a small sample of PIE-supported CSS3 f...
Jason Johnston authored
114
115 function getBorderRadiusCss() {
95613c5 Cleanup in the demo JS
Jason Johnston authored
116 var on = $( '#borderRadiusToggle' ).is(':checked'),
117 size = $( '#borderRadiusSize' ).val();
a458244 Create "quick demo" demonstrating a small sample of PIE-supported CSS3 f...
Jason Johnston authored
118 return on ? [ '-webkit-border-radius: ' + size + 'px;', '-moz-border-radius: ' + size + 'px;', 'border-radius: ' + size + 'px;' ] : []
119 }
120
121 function getBoxShadowCss() {
95613c5 Cleanup in the demo JS
Jason Johnston authored
122 var on = $( '#boxShadowToggle' ).is(':checked'),
123 x = $( '#boxShadowX' ).val(),
124 y = $( '#boxShadowY' ).val(),
125 blur = $( '#boxShadowBlur' ).val(),
a458244 Create "quick demo" demonstrating a small sample of PIE-supported CSS3 f...
Jason Johnston authored
126 cssVal = on ? '#666 ' + x + 'px ' + y + 'px ' + blur + 'px;' : '';
127 return cssVal ? [ '-webkit-box-shadow: ' + cssVal, '-moz-box-shadow: ' + cssVal, 'box-shadow: ' + cssVal ] : [];
128 }
129
130 function getGradientCss() {
95613c5 Cleanup in the demo JS
Jason Johnston authored
131 var on = $( '#gradientToggle' ).is(':checked'),
132 color1 = $( '#gradientColor1' ).val(),
133 color2 = $( '#gradientColor2' ).val(),
a458244 Create "quick demo" demonstrating a small sample of PIE-supported CSS3 f...
Jason Johnston authored
134 css = [ 'background: ' + color1 + ';' ];
135 if( on ) {
136 css.push( 'background: -webkit-gradient(linear, 0 0, 0 bottom, from(' + color1 + '), to(' + color2 + '));' );
7b143ad Update docs and demos to include updated browser gradient support: -webk...
Jason Johnston authored
137 css.push( 'background: -webkit-linear-gradient(' + color1 + ', ' + color2 + ');' );
a458244 Create "quick demo" demonstrating a small sample of PIE-supported CSS3 f...
Jason Johnston authored
138 css.push( 'background: -moz-linear-gradient(' + color1 + ', ' + color2 + ');' );
7b143ad Update docs and demos to include updated browser gradient support: -webk...
Jason Johnston authored
139 css.push( 'background: -ms-linear-gradient(' + color1 + ', ' + color2 + ');' );
140 css.push( 'background: -o-linear-gradient(' + color1 + ', ' + color2 + ');' );
157383a Add standard background:linear-gradient line to demo CSS
Jason Johnston authored
141 css.push( 'background: linear-gradient(' + color1 + ', ' + color2 + ');' );
95613c5 Cleanup in the demo JS
Jason Johnston authored
142 if( $( '#pieToggle' ).is(':checked') ) {
a458244 Create "quick demo" demonstrating a small sample of PIE-supported CSS3 f...
Jason Johnston authored
143 css.push( '-pie-background: linear-gradient(' + color1 + ', ' + color2 + ');' );
144 }
145 }
146 return css;
147 }
148
149 function updateCss() {
150 var tgtEl = $( '#target' )[0],
151 css = [ 'border: 1px solid #696;', 'padding: 60px 0;', 'text-align: center; width: 200px;' ].concat( getBorderRadiusCss() ).concat( getBoxShadowCss() ).concat( getGradientCss() );
152
95613c5 Cleanup in the demo JS
Jason Johnston authored
153 if( $( '#pieToggle' ).is(':checked') ) {
a458244 Create "quick demo" demonstrating a small sample of PIE-supported CSS3 f...
Jason Johnston authored
154 css.push( 'behavior: url(' + behaviorUrl + ');' );
155 }
156 $( '#output' ).html( css.join( '<br>' ) );
157
158 tgtEl.style.cssText = css.join( '' );
159
160 if( tgtEl.addBehavior ) {
95613c5 Cleanup in the demo JS
Jason Johnston authored
161 if( $( '#pieToggle' ).is(':checked') ) {
a458244 Create "quick demo" demonstrating a small sample of PIE-supported CSS3 f...
Jason Johnston authored
162 if( !behaviorId ) {
163 behaviorId = tgtEl.addBehavior( behaviorUrl );
164 }
165 }
166 else if( behaviorId ) {
167 tgtEl.removeBehavior( behaviorId );
168 behaviorId = null;
169 }
170 }
171 }
172
173 function updateDetailsVis() {
174 $( '#controls .toggle > input' ).each( function() {
175 var checked = this.checked,
176 deets = $( this ).closest( 'fieldset' ).find( '.details' );
177 if( loaded ) {
178 deets[ checked ? 'fadeIn' : 'fadeOut' ]( 'fast' );
179 } else {
180 deets[ checked ? 'show' : 'hide' ]();
181 }
182 } );
183 }
184
185 function updateCodeVis() {
186 var checked = $( '#codeToggle' ).is( ':checked' ),
187 code = $( '#output' );
188 if( loaded ) {
189 code[ checked ? 'slideDown' : 'slideUp' ]( 'fast' );
190 } else {
191 code[ checked ? 'show' : 'hide' ]();
192 }
193 }
194
195 $( '#controls input' ).change( updateCss );
196 $( '#controls .toggle > input' ).change( updateDetailsVis );
197 $( '#codeToggle' ).change( updateCodeVis );
198
c7cbd34 Add JS color picker to gradient color fields in demo
Jason Johnston authored
199 $( '#controls input.color' ).each( function() {
200 var inp = $( this ),
201 picker = $( '<div class="colorPicker"/>' ),
202 farb = $.farbtastic( picker, function( c ) {
203 if( c ) {
204 inp[0].value = c.toUpperCase();
205 inp.change();
206 }
207 } );
208
209 inp.focus( function() {
210 farb.setColor( this.value );
211 picker.css( inp.position() ).fadeIn();
212 $( document ).bind( 'mousedown', function handler() {
213 picker.fadeOut();
214 $( this ).unbind( 'mousedown', handler )
215 } );
216 } );
217
218 picker.insertAfter( inp ).hide().mousedown( function( e ) {
219 e.stopPropagation();
220 } );
221 } );
222
a458244 Create "quick demo" demonstrating a small sample of PIE-supported CSS3 f...
Jason Johnston authored
223 updateCss();
224 updateDetailsVis();
225 updateCodeVis();
226 loaded = true;
227 } );
228 </script>
229
230 </head>
231 <body>
232
233 <h1>PIE CSS3 Quick Demo</h1>
234
235 <p>Adjust the controls on the right and see the CSS3 in action. Remember, there are no images used at all!</p>
236
237 <div id="demo">
238
239 <div id="target">
240 Mmmmm, pie.
241 </div>
242
243 <div id="controls">
244 <fieldset id="featureControls">
245 <legend>CSS3 features</legend>
246
247 <fieldset>
248 <legend>border-radius</legend>
249
250 <div class="toggle">
251 <input type="checkbox" id="borderRadiusToggle" class="featureToggle" checked="checked" />
252 <label for="borderRadiusToggle">Enable</label>
253 </div>
254
255 <div class="details">
256 <label for="borderRadiusSize">Radius size:</label>
257 <!--<input type="number" id="borderRadiusSize" min="0" max="20" value="8" size="2" />-->
258 <input type="text" id="borderRadiusSize" value="8" size="3" />
259 </div>
260 </fieldset>
261
262 <fieldset>
263 <legend>box-shadow</legend>
264
265 <div class="toggle">
266 <input type="checkbox" id="boxShadowToggle" class="featureToggle" checked="checked" />
267 <label for="boxShadowToggle">Enable</label>
268 </div>
269
270 <div class="details">
271 <label for="boxShadowBlur">Blur size:</label>
272 <!--<input type="number" id="boxShadowBlur" min="0" max="10" value="3" size="2" />-->
273 <input type="text" id="boxShadowBlur" value="3" size="3" />
274
275 <label for="boxShadowX">X offset:</label>
276 <!--<input type="number" id="boxShadowX" min="-10" max="10" value="0" size="3" />-->
277 <input type="text" id="boxShadowX" value="0" size="3" />
278
279 <label for="boxShadowY">Y offset:</label>
280 <!--<input type="number" id="boxShadowY" min="-10" max="10" value="2" size="3" />-->
281 <input type="text" id="boxShadowY" value="2" size="3" />
282 </div>
283
284 </fieldset>
285
286 <fieldset>
287 <legend>linear-gradient</legend>
288
289 <div class="toggle">
290 <input type="checkbox" id="gradientToggle" class="featureToggle" checked="checked" />
291 <label for="gradientToggle">Enable</label>
292 </div>
293
294 <div class="details">
295 <label for="gradientColor1">Top color:</label>
296 <!--<input type="color" id="gradientColor1" value="#99FF99" size="7" />-->
c7cbd34 Add JS color picker to gradient color fields in demo
Jason Johnston authored
297 <input type="text" class="color" id="gradientColor1" value="#99FF99" size="7" />
a458244 Create "quick demo" demonstrating a small sample of PIE-supported CSS3 f...
Jason Johnston authored
298
299 <label for="gradientColor2">Bottom color:</label>
300 <!--<input type="color" id="gradientColor2" value="#339933" size="7" />-->
c7cbd34 Add JS color picker to gradient color fields in demo
Jason Johnston authored
301 <input type="text" class="color" id="gradientColor2" value="#339933" size="7" />
a458244 Create "quick demo" demonstrating a small sample of PIE-supported CSS3 f...
Jason Johnston authored
302 </div>
303 </fieldset>
304 </fieldset>
305
306 <fieldset id="pieControls">
307 <legend>Options</legend>
308 <ul>
309 <li>
310 <input type="checkbox" id="pieToggle" checked="checked" />
311 <label for="pieToggle">Enable PIE (only affects IE)</label>
312 </li>
313 <li>
314 <input type="checkbox" id="codeToggle" />
315 <label for="codeToggle">Show CSS</label>
316 </li>
317 </ul>
318 </fieldset>
319 </div>
320
321 <code id="output">
322
323 </code>
324 </div>
325
326 </body>
327 </html>
Something went wrong with that request. Please try again.