Browse Source

js & docs : enable transitions for Opera 12

remove $.browser

v1.5.20

Ref #265
pull/294/head
David DeSandro 12 years ago
parent
commit
deebbb2f3e
  1. 5
      _posts/demos/2011-06-13-hash-history.html
  2. 2
      _posts/docs/2010-12-01-introduction.mdown
  3. 4
      _posts/docs/2010-12-03-options.mdown
  4. 2
      _posts/docs/2010-12-09-animating.mdown
  5. 4
      _posts/docs/2011-12-11-help.mdown
  6. 2
      css/style.css
  7. 6
      jquery.isotope.js
  8. 4
      jquery.isotope.min.js

5
_posts/demos/2011-06-13-hash-history.html

@ -78,11 +78,6 @@ category: demos
layoutMode: 'masonry'
};
// ensure no transforms used in Opera
if ( $.browser.opera ) {
defaultOptions.transformsEnabled = false;
}
{% include random-sizes.js %}
var setupOptions = $.extend( {}, defaultOptions, {

2
_posts/docs/2010-12-01-introduction.mdown

@ -121,7 +121,7 @@ Add these styles to your CSS for [filtering](filtering.html), [animation](animat
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: top, left, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}

4
_posts/docs/2010-12-03-options.mdown

@ -298,13 +298,11 @@ The property name of the method within the `getSortData` option to sort item ele
<dl class="clearfix">
<dt><code>transformsEnabled</code></dt>
<dd class="option-type">Boolean</dd>
<dd class="default"><code>!$.browser.opera</code></dd>
<dd class="default"><code><span class="kc">true</span></code></dd>
</dl>
Isotope uses CSS3 transforms to position item elements, when available in the browser. Setting `transformsEnabled` to <code><span class="kc">false</span></code> will disable this feature so all browsers use top/left absolute positioning. Useful for [resolving issues with CSS transforms](help.html#css-transforms).
Default value is set to <code><span class="kc">false</span></code> for Opera. See [Help: CSS transforms in Opera](help.html#css_transforms_in_opera).
### Additional CSS {#transformsEnabled-css}
If you do disable transforms, but still want to use [CSS transitions](animating.html#css_transitions), you'll need add the following CSS:

2
_posts/docs/2010-12-09-animating.mdown

@ -49,7 +49,7 @@ To enable animation with CSS transitions, you'll need the following code in your
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: top, left, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}

4
_posts/docs/2011-12-11-help.mdown

@ -138,9 +138,7 @@ isotopeInstance.masonry.columnWidth; // Layout mode specific properties
## CSS transforms in Opera
Currently, [using CSS transforms in Opera distorts text rendering](http://dropshado.ws/post/1260101028/opera-transform-issues). To avoid this issue, the default value of [`transformsEnabled`](options.html#transformsenabled) is set to <code><span class="kc"></span></code> for Opera.
Also note that the [recommended transition CSS](animating.html#css_transitions) uses `left`/`top` properties for Opera.
[Using CSS transforms in older versions Opera (< 12) distorts text rendering](http://dropshado.ws/post/1260101028/opera-transform-issues). See how to enable [CSS transitions with top, left positioning](options.html#transformsEnabled-css).
## Infinite Scroll with filtering or sorting

2
css/style.css

@ -34,7 +34,7 @@
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: top, left, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}

6
jquery.isotope.js

@ -1,5 +1,5 @@
/**
* Isotope v1.5.19
* Isotope v1.5.20
* An exquisite jQuery plugin for magical layouts
* http://isotope.metafizzy.co
*
@ -260,7 +260,7 @@
transitionEndEvent = {
WebkitTransitionProperty: 'webkitTransitionEnd', // webkit
MozTransitionProperty: 'transitionend',
OTransitionProperty: 'oTransitionEnd',
OTransitionProperty: 'oTransitionEnd otransitionend',
transitionProperty: 'transitionend'
}[ transitionProp ];
@ -346,7 +346,7 @@
sortBy : 'original-order',
sortAscending : true,
resizesContainer : true,
transformsEnabled: !$.browser.opera, // disable transforms in Opera
transformsEnabled: true,
itemPositionDataEnabled: false
};

4
jquery.isotope.min.js vendored

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save