diff --git a/_posts/docs/2010-12-03-options.mdown b/_posts/docs/2010-12-03-options.mdown index da8123e..140fa63 100644 --- a/_posts/docs/2010-12-03-options.mdown +++ b/_posts/docs/2010-12-03-options.mdown @@ -20,6 +20,7 @@ toc: - { title: resizesContainer, anchor: resizescontainer } - { title: sortAscending, anchor: sortascending } - { title: sortBy, anchor: sortby } + - { title: transformsEnabled, anchor: transformsenabled } - { title: visibleStyle, anchor: visiblestyle } - { title: Layout-specific options, anchor: layoutspecific_options } @@ -197,7 +198,7 @@ Triggers layout logic when browser window is resized.
true
false
, be sure to set a size for the container in your CSS, so it doesn't collapse when Isotope is triggered.
## sortAscending
@@ -226,6 +227,30 @@ The property name of the method within the `getSortData` option to sort item ele
+ `'original-order'` Sorts item elements by their original order.
+## transformsEnabled
+
+transformsEnabled
true
false
will disable this feature so all browsers use top/left absolute positioning.
+
+### 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:
+
+{% highlight css %}
+
+.isotope .isotope-item {
+ -webkit-transition-property: top, left, opacity;
+ -moz-transition-property: top, left, opacity;
+ transition-property: top, left, opacity;
+}
+
+{% endhighlight %}
+
## visibleStyle
false
.
{% highlight javascript %}
diff --git a/_posts/docs/2010-12-11-troubleshooting.mdown b/_posts/docs/2010-12-11-troubleshooting.mdown
index db003ec..ed9312c 100644
--- a/_posts/docs/2010-12-11-troubleshooting.mdown
+++ b/_posts/docs/2010-12-11-troubleshooting.mdown
@@ -7,12 +7,14 @@ related: z-etc
toc:
- { title: Reporting bugs and issues, anchor: reporting_bugs_and_issues }
- { title: Support license, anchor: support_license }
+ - { title: Additional resources, anchor: additional_resources }
- { title: Unloaded media, anchor: unloaded_media }
- { title: Images, anchor: images }
- { title: @font-face fonts, anchor: fontface_fonts }
- { title: CSS transforms in Opera, anchor: css_transforms_in_opera }
- { title: Infinite Scroll with filtering or sorting, anchor: infinite_scroll_with_filtering_or_sorting}
- { title: Prepending items, anchor: prepending_items }
+ - { title: Flash, anchor: flash }
---
@@ -34,6 +36,13 @@ If you've tried everything and would really like to get my eyes looking at your
Support License is included with Isotope Commercial License.
+## Additional resources
+
++ The [Metafizzy blog](http://metafizzy.co/blog/) has posts that cover specialized use cases
++ [Sites using Isotope](http://www.delicious.com/desandro/using:isotope)
++ [Miscelleanous Isotope content](http://www.delicious.com/desandro/re:isotope)
++ [Stack Overflow questions on Isotope](http://www.delicious.com/desandro/re:isotope+stackoverflow)
+
## Unloaded media
Most layout modes (i.e masonry, fitRows) need to measure the size of each item to appropriately account for its space in the layout. Unloaded media files like images and @font-face fonts can throw off layout and cause item elements to overlap one another. Ideally, Isotope layouts should be initialized after all inner content has loaded.
@@ -116,4 +125,10 @@ If you do plan on implementing Infinite Scroll with filtering or sorting (which
## Prepending items
-While there is no prepend method built into Isotope, you can add items to the beginning of a Isotope layout by using sorting and [`updateSortData`](methods.html#getsortdata). See [Isotope - prepending items on jsFiddle](http://jsfiddle.net/desandro/zXWkw/4/).
\ No newline at end of file
+While there is no prepend method built into Isotope, you can add items to the beginning of a Isotope layout by using sorting and [`updateSortData`](methods.html#getsortdata). See [Isotope - prepending items on jsFiddle](http://jsfiddle.net/desandro/zXWkw/4/).
+
+## Flash
+
+[Using CSS transforms with Flash content is a bit buggy in Safari and Firefox](http://dropshado.ws/post/4085720152/css-transforms-breaking-flash). This is problematic when using Isotope on item elements that contain Flash content like YouTube or Vimeo videos, Flash ads, or Flash audio players.
+
+The best way to resolve this issue is to disable CSS transforms by setting the [`transformsEnabled` option](options.html#transformsenabled) to false
.
diff --git a/css/style.css b/css/style.css
index c922610..d53d437 100644
--- a/css/style.css
+++ b/css/style.css
@@ -341,10 +341,6 @@ body.doc {
max-width: 640px;
}
-.doc #content {
- margin-bottom: 20px;
-}
-
.doc a:hover {
border-bottom: 1px dotted;
}
@@ -388,9 +384,12 @@ body.doc {
/**** Doc page nav ****/
-#docs-nav h1 {
+#docs-nav h1,
+#demo-nav {
font-size: 19px;
margin-bottom: 0.5em;
+ font-weight: bold;
+ font-family: 'Helvetica Neue', Arial, sans-serif;
}
#docs-nav h1 a,
@@ -399,10 +398,7 @@ body.doc {
#demo-nav a:hover { color: #4BF; }
#demo-nav {
- font-size: 16px;
- font-weight: bold;
padding-bottom: 0.5em;
- margin-bottom: 0.5em;
border-bottom: 1px solid #333;
}
@@ -433,8 +429,7 @@ body.doc {
/**** Doc content ****/
-.doc h2,
-.doc footer {
+.doc h2 {
border-top: 1px solid #333;
padding-top: 0.8em;
}
@@ -461,8 +456,9 @@ body.doc {
footer {
font-size: 12px;
+ font-style: italic;
border-top: 1px solid #333;
- padding-top: 0.8em;
+ padding: 0.8em 0;
}
pre {
diff --git a/jquery.isotope.js b/jquery.isotope.js
index a164043..2e24594 100644
--- a/jquery.isotope.js
+++ b/jquery.isotope.js
@@ -1,5 +1,5 @@
/**
- * Isotope v1.0.110316
+ * Isotope v1.0.110325
* An exquisite jQuery plugin for magical layouts
* http://isotope.metafizzy.co
*
@@ -353,7 +353,8 @@
},
sortBy : 'original-order',
sortAscending : true,
- resizesContainer : true
+ resizesContainer : true,
+ transformsEnabled : true
},
_filterFind: function( $elems, selector ) {
@@ -392,7 +393,7 @@
this.applyStyleFnName = Modernizr.csstransitions ? 'css' : 'animate';
}
- this.usingTransforms = Modernizr.csstransforms && Modernizr.csstransitions && !jQueryAnimation;
+ this.usingTransforms = this.options.transformsEnabled && Modernizr.csstransforms && Modernizr.csstransitions && !jQueryAnimation;
this.getPositionStyles = this.usingTransforms ? this._translate : this._positionAbs;
diff --git a/jquery.isotope.min.js b/jquery.isotope.min.js
index 26e0b27..ed04698 100644
--- a/jquery.isotope.min.js
+++ b/jquery.isotope.min.js
@@ -1,5 +1,5 @@
/**
- * Isotope v1.0.110316
+ * Isotope v1.0.110325
* An exquisite jQuery plugin for magical layouts
* http://isotope.metafizzy.co
*
@@ -14,18 +14,18 @@ j,u=n.length;if(l.Modernizr)for(j=0;jh?1:g