Browse files

should be working much better now in IE. Significantly improved the s…

…afe outer height/width calculations in IE.
  • Loading branch information...
1 parent 5500ad1 commit e9427933d4faf818d547cc6d49f5d51c473a9395 @heygrady committed Aug 11, 2010
Showing with 101 additions and 23 deletions.
  1. +8 −1 css/style.css
  2. +91 −20 lib/jquery.transform.js
  3. +2 −2 test.html
View
9 css/style.css
@@ -27,7 +27,7 @@ h2 {
margin-right: 10px;
}
.outer {
- height: 150px;
+ /*height: 150px;*/
width: 150px;
background-color: #000000;
@@ -42,6 +42,13 @@ h2 {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7F000000',EndColorStr='#7F000000')"; /* IE8 */
}
+.animate,
+.transition,
+.transform {
+ height: 150px;
+ width: 150px;
+}
+
.plain .animate,
.plain .transition,
.plain .transform {
View
111 lib/jquery.transform.js
@@ -126,7 +126,7 @@
/**
* Class for creating cross-browser transformations
- * @class
+ * @constructor
*/
$.extend({
transform: function(elem) {
@@ -142,6 +142,23 @@
* @var string
*/
this.transformProperty = this.getTransformProperty();
+
+ /**
+ * Remember the css height and width to save time
+ * This is only really used in IE
+ * @var Number
+ */
+ this.height = null;
+ this.width = null;
+ this.outerHeight = null;
+ this.outerWidth = null;
+
+ /**
+ * We need to know the box-sizing in IE for building the outerHeight and outerWidth
+ * @var string
+ */
+ this.boxSizingValue = null;
+ this.boxSizingProperty = null;
}
});
@@ -331,6 +348,8 @@
var matrixFilter = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + a + ', M12=' + c + ', M21=' + b + ', M22=' + d + ', sizingMethod=\'auto expand\')';
var filter = style.filter || jQuery.curCSS( this.$elem[0], "filter" ) || "";
style.filter = rmatrix.test(filter) ? filter.replace(rmatrix, matrixFilter) : filter ? filter + ' ' + matrixFilter : matrixFilter;
+
+ //TODO: this doesn't need set over and over
this.$elem.css({zoom: 1});
// IE can't set the origin or translate directly
@@ -398,7 +417,7 @@
if (this.transformProperty) {
return this.transformProperty;
}
- var elem = this.$elem[0];
+ var elem = document.body;
var transformProperty;
var property = {
transform : 'transform',
@@ -485,43 +504,67 @@
* @return Number
*/
safeOuterHeight: function() {
- return this.safeOuterLength('Height');
+ return this.safeOuterLength('height');
},
/**
* @param void
* @return Number
*/
safeOuterWidth: function() {
- return this.safeOuterLength('Width');
+ return this.safeOuterLength('width');
},
/**
* Returns reliable outer dimensions for an object that may have been transformed.
- * @param String dim Height or Width
+ * @param String dim height or width
* @return Number
*/
safeOuterLength: function(dim) {
- var func = 'outer' + (dim.toLowerCase() == 'width' ? 'Width' : 'Height');
+ var funcName = 'outer' + (dim == 'width' ? 'Width' : 'Height');
+
if ($.browser.msie) {
- // TODO: it'd be nice if there were a reliable way to remember this and not have it get stale
- var elem = this.$elem[0];
- // remember the originals
- var style = elem.style.filter;
-
- // clear the filter
- elem.style.filter = '';
+ // make the variables more generic
+ dim = dim == 'width' ? 'width' : 'height';
+ var side = {
+ height: ['top', 'bottom'],
+ width: ['left', 'right']
+ };
- // pull out the pixel values
- var length = this.$elem[func]();
+ // setup some variables
+ var elem = this.$elem[0],
+ outerLen = parseFloat($.curCSS(elem, dim, true)), //TODO: this can be cached on animations that do not animate height/width
+ boxSizingProp = this.boxSizingProperty,
+ boxSizingValue = this.boxSizingValue;
- // undo our mess
- elem.style.filter = style;
+ // IE6 && IE7 will never have a box-sizing property, so fake it
+ if (!this.boxSizingProperty) {
+ boxSizingProp = this.boxSizingProperty = _findBoxSizingProperty() || 'box-sizing';
+ boxSizingValue = this.boxSizingValue = this.$elem.css(boxSizingProp) || 'content-box';
+ }
- // Tell the world
- return length;
+ // return it immediately if we already know it
+ if (this[funcName] && this[dim] == outerLen) {
+ return this[funcName];
+ } else {
+ this[dim] = outerLen;
+ }
+
+ // add in the padding and border
+ if (boxSizingProp && (boxSizingValue == 'padding-box' || boxSizingValue == 'content-box')) {
+ outerLen += parseFloat($.curCSS(elem, 'padding-' + side[dim][0], true)) || 0 +
+ parseFloat($.curCSS(elem, 'padding-' + side[dim][1], true)) || 0;
+ }
+ if (boxSizingProp && boxSizingValue == 'content-box') {
+ outerLen += parseFloat($.curCSS(elem, 'border-' + side[dim][0] + '-width', true)) || 0 +
+ parseFloat($.curCSS(elem, 'border-' + side[dim][1] + '-width', true)) || 0;
+ }
+
+ // remember and return the outerHeight
+ this[funcName] = outerLen;
+ return outerLen;
}
- return this.$elem[func]();
+ return this.$elem[funcName]();
},
/**
@@ -666,6 +709,34 @@
}
return len == 1 ? result[0] : result;
}
+
+ /**
+ * Determine the correct property for checking the box-sizing property
+ * @param void
+ * @return string
+ */
+ var _boxSizingProperty = null;
+ function _findBoxSizingProperty () {
+ if (_boxSizingProperty) {
+ return _boxSizingProperty;
+ }
+
+ var property = {
+ boxSizing : 'box-sizing',
+ MozBoxSizing : '-moz-box-sizing',
+ WebkitBoxSizing : '-webkit-box-sizing',
+ OBoxSizing : '-o-box-sizing'
+ },
+ elem = document.body;
+
+ for (var p in property) {
+ if (typeof elem.style[p] != 'undefined') {
+ _boxSizingProperty = property[p];
+ return _boxSizingProperty;
+ }
+ }
+ return null;
+ }
})(jQuery, this, this.document);
View
4 test.html
@@ -128,12 +128,12 @@
<script src="lib/jquery.transform.js"></script>
<script type="text/javascript">
$('#go').click(go);
+
var $elem = $('.transform, .transition');
var $anim = $('.animate');
var $text = $('h2');
- var step = 17;
+ var step = 0;
function go() {
- console.log($elem[0].filter);
switch (step) {
case 0:
$elem.transform({"reflect": true});

0 comments on commit e942793

Please sign in to comment.