From 4634ee6f016be6c5919c2aed2109bee86e3b0b83 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 14 Jul 2011 17:59:57 -0400 Subject: [PATCH 1/7] tests : add masonry gutters --- _posts/tests/2011-07-14-masonry-gutters.html | 148 +++++++++++++++++++ 1 file changed, 148 insertions(+) create mode 100644 _posts/tests/2011-07-14-masonry-gutters.html diff --git a/_posts/tests/2011-07-14-masonry-gutters.html b/_posts/tests/2011-07-14-masonry-gutters.html new file mode 100644 index 0000000..babf2a4 --- /dev/null +++ b/_posts/tests/2011-07-14-masonry-gutters.html @@ -0,0 +1,148 @@ +--- +title: masonry gutters +layout: default +category: tests +--- + + + +
+

Modified masonry layout mode methods for gutterWidth. The items line up horiziontal flush with the container.

+

Set gutterWidth within masonry options.

+ +{% highlight javascript %} + +$('#container').isotope({ + masonry: { + columnWidth: 110, + gutterWidth: 10 + } +}); + +{% endhighlight %} + +
+ +
+ + {% include filter-buttons.html %} + + {% include sort-buttons.html %} + +

Etc

+ + + +
+ +
+ {% for elem_number in site.best_of_order %} + {% assign element = site.elements[elem_number] %} + {% include element-partial.html %} + {% endfor %} +
+ + + + + + \ No newline at end of file From 58333811e31c1c662c851b07968a89d7999efc4f Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 14 Jul 2011 18:01:27 -0400 Subject: [PATCH 2/7] demos : remove animationEngine for opera --- _posts/demos/2011-05-22-category-rows.html | 3 +-- _posts/tests/2011-05-18-centered-masonry.html | 1 - _posts/tests/2011-05-24-elements-complete-test.html | 2 -- _posts/tests/2011-07-07-masonry-corner-stamp.html | 1 - 4 files changed, 1 insertion(+), 6 deletions(-) diff --git a/_posts/demos/2011-05-22-category-rows.html b/_posts/demos/2011-05-22-category-rows.html index 8bb73c0..df05b3b 100644 --- a/_posts/demos/2011-05-22-category-rows.html +++ b/_posts/demos/2011-05-22-category-rows.html @@ -105,8 +105,7 @@ category: demos return $elem.attr('data-category'); } }, - sortBy: 'category', - animationEngine : $.browser.opera ? 'jquery' : 'best-available' + sortBy: 'category' }); {% include option-set-buttons.js %} diff --git a/_posts/tests/2011-05-18-centered-masonry.html b/_posts/tests/2011-05-18-centered-masonry.html index aa30722..c0e140a 100644 --- a/_posts/tests/2011-05-18-centered-masonry.html +++ b/_posts/tests/2011-05-18-centered-masonry.html @@ -114,7 +114,6 @@ category: tests masonry : { columnWidth : 120 }, - animationEngine : $.browser.opera ? 'jquery' : 'best-available', getSortData : { symbol : function( $elem ) { return $elem.attr('data-symbol'); diff --git a/_posts/tests/2011-05-24-elements-complete-test.html b/_posts/tests/2011-05-24-elements-complete-test.html index 6fda9d3..b4fbc5e 100644 --- a/_posts/tests/2011-05-24-elements-complete-test.html +++ b/_posts/tests/2011-05-24-elements-complete-test.html @@ -65,8 +65,6 @@ body_class: demos columnWidth : 240, rowHeight : 240 }, - animationEngine : $.browser.opera ? 'jquery' : 'best-available', - // animationEngine : 'jquery', getSortData : { symbol : function( $elem ) { return $elem.attr('data-symbol'); diff --git a/_posts/tests/2011-07-07-masonry-corner-stamp.html b/_posts/tests/2011-07-07-masonry-corner-stamp.html index 3168f1d..f9d9e6c 100644 --- a/_posts/tests/2011-07-07-masonry-corner-stamp.html +++ b/_posts/tests/2011-07-07-masonry-corner-stamp.html @@ -108,7 +108,6 @@ $('#container').isotope({ columnWidth : 120, cornerStampSelector: '.corner-stamp' }, - animationEngine : $.browser.opera ? 'jquery' : 'best-available', getSortData : { symbol : function( $elem ) { return $elem.attr('data-symbol'); From 1435b362781d251fb5062ec32d003d8466b788e4 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 14 Jul 2011 18:16:54 -0400 Subject: [PATCH 3/7] docs : help : poor type rendering in webkit --- _posts/docs/2011-12-11-help.mdown | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/_posts/docs/2011-12-11-help.mdown b/_posts/docs/2011-12-11-help.mdown index dbdbf55..c74e45b 100644 --- a/_posts/docs/2011-12-11-help.mdown +++ b/_posts/docs/2011-12-11-help.mdown @@ -13,6 +13,7 @@ toc: - { 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: Flash, anchor: flash } + - { title: Poor type rendering in WebKit, anchor: poor_type_rendering_in_webkit } --- @@ -126,3 +127,9 @@ If you do plan on implementing Infinite Scroll with filtering or sorting (which [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. + +## Poor type rendering in WebKit + +Type rendering may appear poor in WebKit browsers like Chrome and Safari. This is because of Isotope's activation of hardware acceleration. The solution is to add add a matching background to the item elements. See more: [dropshado.ws - Resolving anti-aliasing on WebKit hardware-accelerated elements](http://dropshado.ws/post/6142339613/resolving-anti-aliasing-on-webkit-hardware-accelerated) + +Activating hardware acceleration in WebKit with 3D CSS transforms changes the way WebKit renders text. From 772cbf61bd096a933f757e35e912c3cf7a482339 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 14 Jul 2011 18:17:57 -0400 Subject: [PATCH 4/7] docs : help : type in webkit typo --- _posts/docs/2011-12-11-help.mdown | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/_posts/docs/2011-12-11-help.mdown b/_posts/docs/2011-12-11-help.mdown index c74e45b..1ab45ef 100644 --- a/_posts/docs/2011-12-11-help.mdown +++ b/_posts/docs/2011-12-11-help.mdown @@ -130,6 +130,4 @@ The best way to resolve this issue is to disable CSS transforms by setting the [ ## Poor type rendering in WebKit -Type rendering may appear poor in WebKit browsers like Chrome and Safari. This is because of Isotope's activation of hardware acceleration. The solution is to add add a matching background to the item elements. See more: [dropshado.ws - Resolving anti-aliasing on WebKit hardware-accelerated elements](http://dropshado.ws/post/6142339613/resolving-anti-aliasing-on-webkit-hardware-accelerated) - -Activating hardware acceleration in WebKit with 3D CSS transforms changes the way WebKit renders text. +Type rendering may appear poor in WebKit browsers like Chrome and Safari. This is because of Isotope's activation of hardware acceleration. The solution is to add add a matching background to the item elements. See more: [dropshado.ws - Resolving anti-aliasing on WebKit hardware-accelerated elements](http://dropshado.ws/post/6142339613/resolving-anti-aliasing-on-webkit-hardware-accelerated). From c9f3bde75677eb0fe73e1ec5bdd49cc8b3666e5b Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Tue, 19 Jul 2011 15:08:38 -0400 Subject: [PATCH 5/7] tests : revise masonry centered and masonry gutter --- _posts/tests/2011-05-18-centered-masonry.html | 5 +---- _posts/tests/2011-07-14-masonry-gutters.html | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/_posts/tests/2011-05-18-centered-masonry.html b/_posts/tests/2011-05-18-centered-masonry.html index c0e140a..c303183 100644 --- a/_posts/tests/2011-05-18-centered-masonry.html +++ b/_posts/tests/2011-05-18-centered-masonry.html @@ -11,7 +11,7 @@ category: tests
-

Isotope’s capabilities are designed to be used together cohesively. You can do it all — filter, sort, change layout modes, add items — and Isotope will handle it with ease.

+

Modified masonry layout mode for centered container.

@@ -63,8 +63,6 @@ category: tests this.masonry.cols = cols; // i.e. this.masonry.columnWidth = ... this.masonry.columnWidth = colW; - - return this; }; $.Isotope.prototype._masonryReset = function() { @@ -77,7 +75,6 @@ category: tests while (i--) { this.masonry.colYs.push( 0 ); } - return this; }; $.Isotope.prototype._masonryResizeChanged = function() { diff --git a/_posts/tests/2011-07-14-masonry-gutters.html b/_posts/tests/2011-07-14-masonry-gutters.html index babf2a4..f68f5fe 100644 --- a/_posts/tests/2011-07-14-masonry-gutters.html +++ b/_posts/tests/2011-07-14-masonry-gutters.html @@ -15,7 +15,7 @@ category: tests
-

Modified masonry layout mode methods for gutterWidth. The items line up horiziontal flush with the container.

+

Modified masonry layout mode methods for gutterWidth. The items have no padding, so they can be lined-up horizontally adjacent to the container.

Set gutterWidth within masonry options.

{% highlight javascript %} From d71460cad1e229ccf9f568ab739e0213b23cf664 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 21 Jul 2011 10:38:57 -0400 Subject: [PATCH 6/7] docs : use Zootool for screenshots --- _posts/docs/2011-12-11-help.mdown | 3 ++- index.html | 26 +++++++++++++------------- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/_posts/docs/2011-12-11-help.mdown b/_posts/docs/2011-12-11-help.mdown index 1ab45ef..713c2ba 100644 --- a/_posts/docs/2011-12-11-help.mdown +++ b/_posts/docs/2011-12-11-help.mdown @@ -38,7 +38,8 @@ 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) ++ [Sites using Isotope on Zootool](http://zootool.com/user/desandro/tag:isotope), has screenshots ++ [Sites using Isotope on Delicious](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) diff --git a/index.html b/index.html index ce9eb67..a527d61 100644 --- a/index.html +++ b/index.html @@ -136,25 +136,25 @@ features: }; // dynamically load sites using Isotope from Ember app - $.getJSON('http://api.emberapp.com/users/view/' + - 'desandro/collections/view/isotope.json?callback=?') + $.getJSON('http://zootool.com/api/users/items/?username=desandro' + + '&apikey=8b604e5d4841c2cd976241dd90d319d7' + + '&tag=bestofisotope&callback=?') .error( ajaxError ) .success(function( data ){ - - // proceed only if we have images - if ( !data.response || !data.response.images ) { + + // proceed only if we have items + if ( !data || !data.length ) { ajaxError(); return; } - var images = data.response.images, - items = [], + var items = [], item, image; - - for ( var i=0, len = images.length; i < len; i++ ) { - image = images[i]; - item = '
  • ' - + '' - + '' + image.name + '' + + for ( var i=0, len = data.length; i < len; i++ ) { + datum = data[i]; + item = '
  • ' + + '' + + '' + datum.title + '' + '
    • '; items.push( item ); } From 26d5b222d482aebeebee153601054b490bb55f2f Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Thu, 21 Jul 2011 14:24:14 -0400 Subject: [PATCH 7/7] docs : index : typos --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index a527d61..43dfdf4 100644 --- a/index.html +++ b/index.html @@ -135,20 +135,20 @@ features: .text('Could not load sites using Isotope :('); }; - // dynamically load sites using Isotope from Ember app + // dynamically load sites using Isotope from Zootool $.getJSON('http://zootool.com/api/users/items/?username=desandro' + '&apikey=8b604e5d4841c2cd976241dd90d319d7' + '&tag=bestofisotope&callback=?') .error( ajaxError ) .success(function( data ){ - // proceed only if we have items + // proceed only if we have data if ( !data || !data.length ) { ajaxError(); return; } var items = [], - item, image; + item, datum; for ( var i=0, len = data.length; i < len; i++ ) { datum = data[i];