From 49273ff041e4020e8bf816f17febaef9380aa93d Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 25 Mar 2011 16:40:49 -0400 Subject: [PATCH 1/5] src & docs : add transformsEnabled option. --- _posts/docs/2010-12-03-options.mdown | 25 +++++++++++++++++++++++++ jquery.isotope.js | 5 +++-- jquery.isotope.min.js | 24 ++++++++++++------------ 3 files changed, 40 insertions(+), 14 deletions(-) diff --git a/_posts/docs/2010-12-03-options.mdown b/_posts/docs/2010-12-03-options.mdown index da8123e..d31c71e 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 } @@ -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/jquery.isotope.js b/jquery.isotope.js index a164043..b760790 100644 --- a/jquery.isotope.js +++ b/jquery.isotope.js @@ -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..3ae1130 100644 --- a/jquery.isotope.min.js +++ b/jquery.isotope.min.js @@ -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/ From fe6afc2a9aa267142c80ad3f3ea22b933b62f525 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 25 Mar 2011 16:45:34 -0400 Subject: [PATCH 2/5] docs : syntax highlight `false` --- _posts/docs/2010-12-03-options.mdown | 2 +- _posts/docs/2010-12-07-sorting.mdown | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/_posts/docs/2010-12-03-options.mdown b/_posts/docs/2010-12-03-options.mdown index d31c71e..140fa63 100644 --- a/_posts/docs/2010-12-03-options.mdown +++ b/_posts/docs/2010-12-03-options.mdown @@ -198,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 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 %} From 227d47691a9195dc6405c8b78f6cf9ef7f51ad0b Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 25 Mar 2011 16:46:14 -0400 Subject: [PATCH 3/5] docs : Troubleshooting : add Flash & Additional Resources --- _posts/docs/2010-12-11-troubleshooting.mdown | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) 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. From da606d86b992da5a095fe822390ab1a1ecb2312d Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 25 Mar 2011 16:47:10 -0400 Subject: [PATCH 4/5] src : bump version # --- jquery.isotope.js | 2 +- jquery.isotope.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/jquery.isotope.js b/jquery.isotope.js index b760790..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 * diff --git a/jquery.isotope.min.js b/jquery.isotope.min.js index 3ae1130..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 * From f508982e03fcc08c77170784db040e7669b794ef Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Fri, 25 Mar 2011 17:01:08 -0400 Subject: [PATCH 5/5] docs : style : footer and #demo-nav --- css/style.css | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) 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 {