diff --git a/_posts/docs/2011-12-11-help.mdown b/_posts/docs/2011-12-11-help.mdown
index ebd2e5d..1fcd12f 100644
--- a/_posts/docs/2011-12-11-help.mdown
+++ b/_posts/docs/2011-12-11-help.mdown
@@ -16,6 +16,7 @@ toc:
- { title: Flash, anchor: flash }
- { title: Poor type rendering in WebKit, anchor: poor_type_rendering_in_webkit }
- { title: Right-to-left layouts, anchor: righttoleft_layouts }
+ - { title: Preventing clicks on filtered items, anchor: unclickable-filtered }
---
@@ -196,4 +197,24 @@ $('#container').isotope({
transition-property: right, top, transform, opacity;
}
+{% endhighlight %}
+
+## Preventing clicks on filtered items {: #unclickable-filtered}
+
+The [recommended CSS for filtering](filtering.html#recommended_css) includes `pointer-events: none` for `.isotope-hidden`. Unfortunately, Opera and Internet Explorer still let click events propagate with this style in place. But you can still dismiss click events in your click handler by checking to see if the element or element's parent is a filtered item.
+
+[See test: Unclickable filtered](../tests/unclickable-filtered.html)
+
+{% highlight javascript %}
+
+$('.item a').click(function(){
+ var $this = $(this);
+ // back out if hidden item
+ if ( $this.parents('.isotope-item').hasClass('isotope-hidden') ) {
+ return;
+ }
+ // otherwise, continue to do stuff...
+ console.log('item was clicked');
+});
+
{% endhighlight %}
\ No newline at end of file
diff --git a/_posts/tests/2011-08-23-unclickable-filtered.html b/_posts/tests/2011-08-23-unclickable-filtered.html
new file mode 100644
index 0000000..76550ea
--- /dev/null
+++ b/_posts/tests/2011-08-23-unclickable-filtered.html
@@ -0,0 +1,118 @@
+---
+title: Unclickable filtered
+layout: default
+category: tests
+body_class: demos
+---
+
+
+
+
+ For Internet Explorer and Opera, you might need to dismiss event on filtered out items. You should not be able to click on the big red blocks when filtered-out
+ (Last item clicked)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+