@@ -61,13 +62,9 @@ category: demos
});
// filter buttons
- $('#filters').find('a').click(function(){
- // get href attribute, minus the #, plus a . to make it a class
- var filterName = $(this).attr('data-filter');
- // var filterTest = 'filter ' + filterName;
- // console.time( filterTest );
- $demo.isotope({ filter: filterName })
- // console.timeEnd( filterTest );
+ $('#filters a').click(function(){
+ var selector = $(this).attr('data-filter');
+ $demo.isotope({ filter: selector });
return false;
});
diff --git a/_posts/demos/2010-12-30-sorting.html b/_posts/demos/2010-12-30-sorting.html
index 5ea5e2a..21bfe28 100644
--- a/_posts/demos/2010-12-30-sorting.html
+++ b/_posts/demos/2010-12-30-sorting.html
@@ -27,7 +27,7 @@ category: demos
-
+
{% for element in site.elements_best_of %}
{% include element-partial.html %}
{% endfor %}
diff --git a/_posts/docs/2010-12-03-options.mdown b/_posts/docs/2010-12-03-options.mdown
index 1c79cd9..6d69e9d 100644
--- a/_posts/docs/2010-12-03-options.mdown
+++ b/_posts/docs/2010-12-03-options.mdown
@@ -23,7 +23,7 @@ body_class: option-def
Determines the jQuery method to apply styles, `.css()` or `.animate()`. Useful for relying on CSS transitions to handle animation.
-### Values
+### Values {#animationEngine-values}
+ `'best-available'`: if browser supports CSS transitions, Isotope uses `.css()`. If not, falls back to using `.animate()`.
@@ -73,6 +73,10 @@ The class applied to the container element.
Setting a filter with show item elements that match the selector, and hide elements that do not match.
+### Values {#filter-values}
+
++ `'*'` Shows all item elements
+
## getSortData
diff --git a/_posts/docs/2010-12-06-filtering.mdown b/_posts/docs/2010-12-06-filtering.mdown
new file mode 100644
index 0000000..f36dff6
--- /dev/null
+++ b/_posts/docs/2010-12-06-filtering.mdown
@@ -0,0 +1,71 @@
+---
+
+title: Filtering
+category: docs
+layout: doc
+
+---
+
+Isotope can hide and show item elements via the `filter` option. The `filter` option accepts a jQuery selector. Items that match that selector will be shown. Items that do not match will be hidden.
+
+[**See Demo: Filtering**](../demos/filtering.html)
+
+## Markup
+
+Each item element has several identifying classes. In this case, `transition`, `metal`, `lanthanoid`, `alkali`, etc.
+
+{% highlight html %}
+
+
+
...
+
...
+
...
+
...
+
...
+
...
+
...
+ ...
+
+
+{% endhighlight %}
+
+## jQuery script
+
+To show only `.metal` items, the jQuery script would be:
+
+{% highlight javascript %}
+
+$('#demo').isotope({ filter: '.metal' });
+
+{% endhighlight %}
+
+Filtering selectors work just as expected. `.alkali, alkaline-earth` with show both `.alkali` AND ` .alkaline-earth` items, and hide all others. `.metal:not(.transition)` will show `.metal` item elements that are not `.transition`.
+
+## Buttons
+
+Let's use a basic list for our buttons
+
+{% highlight html %}
+
+
+
+{% endhighlight %}
+
+Here we set the filter for each link with a `data-filter` attribute. In our jQuery script, whenever a link is clicked, we'll use this attribute as the filter secltor.
+
+{% highlight javascript %}
+
+$('#filters a').click(function(){
+ var selector = $(this).attr('data-filter');
+ $('#demo').isotope({ filter: selector });
+ return false;
+});
+
+{% endhighlight %}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 49ed927..2cfc274 100644
--- a/css/style.css
+++ b/css/style.css
@@ -320,7 +320,7 @@ body.doc {
}
pre {
- padding: 0.5em;
+ padding: 10px;
}
pre, code {