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
-Isotope will set the height (for vertical layout modes) or width (for horizontal layout modes) of the container after layout. If `resizesContainer` is set to `false`, be sure to set a size for the container in your CSS, so it doesn't collapse when Isotope is triggered. +Isotope will set the height (for vertical layout modes) or width (for horizontal layout modes) of the container after layout. If `resizesContainer` is set to 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
+
Boolean
+
true
+
+ +Isotope uses CSS3 transform to position item elements, when available in the browser. Setting `transformsEnabled` to 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
diff --git a/_posts/docs/2010-12-07-sorting.mdown b/_posts/docs/2010-12-07-sorting.mdown index 3160505..2c84694 100644 --- a/_posts/docs/2010-12-07-sorting.mdown +++ b/_posts/docs/2010-12-07-sorting.mdown @@ -126,7 +126,7 @@ There is an additional sorting data built in to Isotope `'original-order'`. Sort ## sortAscending option -By default, Isotope sorts data in ascension. If our data for name is "Gold, Antimony, Lead, Iron, Silver", when sorted by name, the elements will be ordered ABC.. : "Antimony, Gold, Iron, Lead, Silver." To reverse the order and sort data in descension, set [`sortAscending`](options.html#sortascending) to `false`. +By default, Isotope sorts data in ascension. If our data for name is "Gold, Antimony, Lead, Iron, Silver", when sorted by name, the elements will be ordered ABC.. : "Antimony, Gold, Iron, Lead, Silver." To reverse the order and sort data in descension, set [`sortAscending`](options.html#sortascending) to 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:gh?1:gb.width){b.fitRows.x=0;b.fitRows.y=b.fitRows.height}b._pushPosition(c,b.fitRows.x+b.posLeft,b.fitRows.y+b.posTop);b.fitRows.height=Math.max(b.fitRows.y+e,b.fitRows.height);b.fitRows.x+=d});return this},_fitRowsReset:function(){this.fitRows={x:0,y:0,height:0};return this},_fitRowsGetContainerSize:function(){return{height:this.fitRows.height}},_fitRowsResize:function(){return this.reLayout()}, _cellsByRowReset:function(){this.cellsByRow={};this._getSegments("cellsByRow");this.cellsByRow.rowHeight=this.options.cellsByRow.rowHeight||this.$allAtoms.outerHeight(true);return this},_cellsByRowLayout:function(a){var b=this,c=this.cellsByRow.cols;this.cellsByRow.atomsLen=a.length;a.each(function(d){var e=f(this),g=(d%c+0.5)*b.cellsByRow.columnWidth-e.outerWidth(true)/2+b.posLeft;d=(~~(d/c)+0.5)*b.cellsByRow.rowHeight-e.outerHeight(true)/2+b.posTop;b._pushPosition(e,g,d)});return this},_cellsByRowGetContainerSize:function(){return{height:Math.ceil(this.cellsByRow.atomsLen/