Skip to content
This repository
Browse code

cleaning up the form. The next step is to test out animating the tran…

…sform origin.
  • Loading branch information...
commit 05434daf9156c8afdda5c01bd456b81594eda4a5 1 parent 28d3a44
Grady Kuhnline authored
23 css/transform.css
... ... @@ -1,12 +1,5 @@
1   -textarea {
2   - width: 100%;
3   - height: 10em;
4   -}
5   -section table th,
6   -section table td {
7   - padding: 3px;
8   - border-left: none;
9   - border-right: none;
  1 +form .line {
  2 + margin-bottom: 10px;
10 3 }
11 4 .right-col {
12 5 background-repeat: no-repeat;
@@ -15,9 +8,8 @@ section table td {
15 8 .holder {
16 9 position: relative;
17 10 overflow: visible;
18   - height: 100px;
19   - width: 100px;
20   - border: 1px solid black;
  11 + height: 130px;
  12 + width: 130px;
21 13 background-color: #cccccc;
22 14 margin: 50px;
23 15 }
@@ -29,10 +21,3 @@ section table td {
29 21 border: 5px solid black;
30 22 padding: 10px;
31 23 }
32   -
33   -.transform-ie {
34   - /*-moz-transform-origin: top left;
35   - -webkit-transform-origin: top left;
36   - -o-transform-origin: top left;*/
37   - position: relative;
38   -}
42 lib/form.js
... ... @@ -1,22 +1,4 @@
1   -(function() {
2   - // do an initial transform for the fun of it
3   - $('#target').transform({
4   - rotate: 170,
5   - origin: ['right', 'top']
6   - }, true);
7   -
8   - $('#target2').transform({
9   - rotate: 170,
10   - origin: ['right', 'top']
11   - }, true);
12   -
13   - // output the initial CSS
14   - var transform = new Transform($('#target')[0]);
15   - $("textarea").text(transform.generateCSS({
16   - rotate: 170,
17   - origin: ['right', 'top']
18   - }));
19   -
  1 +(function($, window, document, undefined) {
20 2 // capture form clicks
21 3 $('#transform').submit(function(e) {
22 4 e.preventDefault();
@@ -25,6 +7,8 @@
25 7 $('#go').click(function(e) {
26 8 e.preventDefault();
27 9 processForm();
  10 + var $el = $(this);
  11 + $el.animate({rotate: '+=360deg'});
28 12 });
29 13
30 14 /**
@@ -84,11 +68,17 @@
84 68 funcs[key] = val;
85 69 }
86 70 }
87   -
88   - $('#target').transform(funcs);
89   - $('#target2').transform(funcs, true);
90   -
91   - var transform = new Transform($('#target')[0]);
92   - $("textarea").text(transform.generateCSS(funcs));
  71 + if ($('#animate').is(':checked')) {
  72 + $.each(funcs, function(func, val) {
  73 + if ($.isArray(val)) {
  74 + funcs[func] = val.join(' ');
  75 + }
  76 + });
  77 + $('#target, #target2').transform({}).animate(funcs);
  78 + } else {
  79 + $('#target').transform(funcs);
  80 +
  81 + $('#target2').transform(funcs, true);
  82 + }
93 83 }
94   -})();
  84 +})(jQuery, this, this.document);
2  lib/jquery.transform.js
@@ -1032,7 +1032,7 @@
1032 1032 * @param string axis
1033 1033 */
1034 1034 function _convertLengthToPx(elem, length, inside, axis) {
1035   - $elem = $(elem);
  1035 + var $elem = $(elem);
1036 1036 // make sure we've provided a unit
1037 1037 if (rnumUnitless.test(length)) {
1038 1038 return length + 'px';
51 transform.html
@@ -21,20 +21,18 @@
21 21 </header>
22 22 <article class="body" role="main">
23 23 <aside class="right-col">
24   - <h3>Standard transform</h3>
  24 + <h3>Default Origin (Center)</h3>
25 25 <div class="holder">
26   - <div id="target" class="transform">Standard</div>
  26 + <div id="target" class="transform">I've got an origin in my center.</div>
27 27 </div>
28 28 <hr />
29   - <h3>Forced top, left origin</h3>
30   - <p>(uses absolute positioning)</p>
  29 + <h3>Top Left Origin</h3>
31 30 <div class="holder">
32   - <div id="target2" class="transform transform-ie">Forced</div>
  31 + <div id="target2" class="transform">I transform around my top left corner.</div>
33 32 </div>
34 33 </aside>
35 34 <section class="main">
36 35 <div class="line">
37   - <ul id="ie-barf"></ul>
38 36 <div class="unit size1of2">
39 37 <form id="transform" name="transform" action="">
40 38 <div class="line">
@@ -107,14 +105,15 @@
107 105 <input id="origin-y" name="origin-y" type="text" class="text size1of4" />y%
108 106 </div>
109 107 </div>
  108 + <div class="line">
  109 + <div class="unit size1of4">&nbsp;</div>
  110 + <div class="unit size3of4 lastUnit">
  111 + <label for="animate"><input id="animate" name="animate" type="checkbox" class="checkbox" value="1" /> Animate?</label>
  112 + </div>
  113 + </div>
110 114 <button id="go">Go!</button>
111 115 </form>
112 116 </div>
113   - <div class="unit size1of2 lastUnit">
114   -
115   - </div>
116   - <pre id="result"></pre>
117   - <textarea cols="" rows=""></textarea>
118 117 </div>
119 118 </section>
120 119 </article>
@@ -133,34 +132,8 @@
133 132 var thing = $('.transform');
134 133 var i = 0;
135 134 thing.click(function() {
136   - var $el = $(this);
137   - $el.animate({rotate: '+=45deg'});
138   - });
139   -
140   - $(document).keydown(function(e) {
141   - var prop = {};
142   - var pos = thing.position();
143   - switch (e.which) {
144   - case 40: prop.top = (pos.top + 1) + 'px';break;
145   - case 38: prop.top = (pos.top - 1) + 'px';break;
146   - case 39: prop.left = (pos.left + 1) + 'px';break;
147   - case 37: prop.left = (pos.left - 1) + 'px';break;
148   - }
149   - if (!$.isEmptyObject(prop)) {
150   - e.preventDefault();
151   - thing.css(prop);
152   - }
153   - });
154   -
155   - function shake() {
156   - var thing = $(this);
157   - thing.animate({rotate: '+=2.5', skew: '-=2.5'}, 100, 'easeOutBack', function() {
158   - thing.animate({rotate: '-=5', skew: '+=5'}, 200, 'easeOutBack', function() {
159   - thing.animate({rotate: '+=2.5', skew: '-=2.5'}, 200, 'easeOutElastic');
160   - });
161   - });
162   - }
163   -
  135 + $(this).animate({rotate: '+=45deg'});
  136 + });
164 137 </script>
165 138 </body>
166 139 </html>

0 comments on commit 05434da

Please sign in to comment.
Something went wrong with that request. Please try again.