Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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

…sform origin.
  • Loading branch information...
commit 05434daf9156c8afdda5c01bd456b81594eda4a5 1 parent 28d3a44
@heygrady authored
View
23 css/transform.css
@@ -1,12 +1,5 @@
-textarea {
- width: 100%;
- height: 10em;
-}
-section table th,
-section table td {
- padding: 3px;
- border-left: none;
- border-right: none;
+form .line {
+ margin-bottom: 10px;
}
.right-col {
background-repeat: no-repeat;
@@ -15,9 +8,8 @@ section table td {
.holder {
position: relative;
overflow: visible;
- height: 100px;
- width: 100px;
- border: 1px solid black;
+ height: 130px;
+ width: 130px;
background-color: #cccccc;
margin: 50px;
}
@@ -29,10 +21,3 @@ section table td {
border: 5px solid black;
padding: 10px;
}
-
-.transform-ie {
- /*-moz-transform-origin: top left;
- -webkit-transform-origin: top left;
- -o-transform-origin: top left;*/
- position: relative;
-}
View
42 lib/form.js
@@ -1,22 +1,4 @@
-(function() {
- // do an initial transform for the fun of it
- $('#target').transform({
- rotate: 170,
- origin: ['right', 'top']
- }, true);
-
- $('#target2').transform({
- rotate: 170,
- origin: ['right', 'top']
- }, true);
-
- // output the initial CSS
- var transform = new Transform($('#target')[0]);
- $("textarea").text(transform.generateCSS({
- rotate: 170,
- origin: ['right', 'top']
- }));
-
+(function($, window, document, undefined) {
// capture form clicks
$('#transform').submit(function(e) {
e.preventDefault();
@@ -25,6 +7,8 @@
$('#go').click(function(e) {
e.preventDefault();
processForm();
+ var $el = $(this);
+ $el.animate({rotate: '+=360deg'});
});
/**
@@ -84,11 +68,17 @@
funcs[key] = val;
}
}
-
- $('#target').transform(funcs);
- $('#target2').transform(funcs, true);
-
- var transform = new Transform($('#target')[0]);
- $("textarea").text(transform.generateCSS(funcs));
+ if ($('#animate').is(':checked')) {
+ $.each(funcs, function(func, val) {
+ if ($.isArray(val)) {
+ funcs[func] = val.join(' ');
+ }
+ });
+ $('#target, #target2').transform({}).animate(funcs);
+ } else {
+ $('#target').transform(funcs);
+
+ $('#target2').transform(funcs, true);
+ }
}
-})();
+})(jQuery, this, this.document);
View
2  lib/jquery.transform.js
@@ -1032,7 +1032,7 @@
* @param string axis
*/
function _convertLengthToPx(elem, length, inside, axis) {
- $elem = $(elem);
+ var $elem = $(elem);
// make sure we've provided a unit
if (rnumUnitless.test(length)) {
return length + 'px';
View
51 transform.html
@@ -21,20 +21,18 @@
</header>
<article class="body" role="main">
<aside class="right-col">
- <h3>Standard transform</h3>
+ <h3>Default Origin (Center)</h3>
<div class="holder">
- <div id="target" class="transform">Standard</div>
+ <div id="target" class="transform">I've got an origin in my center.</div>
</div>
<hr />
- <h3>Forced top, left origin</h3>
- <p>(uses absolute positioning)</p>
+ <h3>Top Left Origin</h3>
<div class="holder">
- <div id="target2" class="transform transform-ie">Forced</div>
+ <div id="target2" class="transform">I transform around my top left corner.</div>
</div>
</aside>
<section class="main">
<div class="line">
- <ul id="ie-barf"></ul>
<div class="unit size1of2">
<form id="transform" name="transform" action="">
<div class="line">
@@ -107,14 +105,15 @@
<input id="origin-y" name="origin-y" type="text" class="text size1of4" />y%
</div>
</div>
+ <div class="line">
+ <div class="unit size1of4">&nbsp;</div>
+ <div class="unit size3of4 lastUnit">
+ <label for="animate"><input id="animate" name="animate" type="checkbox" class="checkbox" value="1" /> Animate?</label>
+ </div>
+ </div>
<button id="go">Go!</button>
</form>
</div>
- <div class="unit size1of2 lastUnit">
-
- </div>
- <pre id="result"></pre>
- <textarea cols="" rows=""></textarea>
</div>
</section>
</article>
@@ -133,34 +132,8 @@
var thing = $('.transform');
var i = 0;
thing.click(function() {
- var $el = $(this);
- $el.animate({rotate: '+=45deg'});
- });
-
- $(document).keydown(function(e) {
- var prop = {};
- var pos = thing.position();
- switch (e.which) {
- case 40: prop.top = (pos.top + 1) + 'px';break;
- case 38: prop.top = (pos.top - 1) + 'px';break;
- case 39: prop.left = (pos.left + 1) + 'px';break;
- case 37: prop.left = (pos.left - 1) + 'px';break;
- }
- if (!$.isEmptyObject(prop)) {
- e.preventDefault();
- thing.css(prop);
- }
- });
-
- function shake() {
- var thing = $(this);
- thing.animate({rotate: '+=2.5', skew: '-=2.5'}, 100, 'easeOutBack', function() {
- thing.animate({rotate: '-=5', skew: '+=5'}, 200, 'easeOutBack', function() {
- thing.animate({rotate: '+=2.5', skew: '-=2.5'}, 200, 'easeOutElastic');
- });
- });
- }
-
+ $(this).animate({rotate: '+=45deg'});
+ });
</script>
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.