docs : help : preventing clicks on filtered items; re: #74

13 years ago · e5a25e811b
3 changed files with 147 additions and 0 deletions
--- 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 %}
--- a/_posts/tests/2011-08-23-unclickable-filtered.html
+++ b/_posts/tests/2011-08-23-unclickable-filtered.html
@ -0,0 +1,118 @@
+---
+title: Unclickable filtered
+layout: default
+category: tests
+body_class: demos
+---
+
+<style>
+  #container {
+    width: 50%;
+  }
+  
+  #clicked-display {
+    display: inline-block;
+    border: 1px dotted white;
+    font-size: 1.1em;
+    padding: 0 0.5em;
+  }
+</style>
+
+<section id="copy">
+  <p>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</p>
+  <p id="clicked-display">(Last item clicked)</p>
+</section>
+
+<section id="options" class="clearfix">
+
+  <ul id="etc" class="clearfix">
+    <li id="toggle-red"><a href="#toggle-red">Toggle big red blocks</a></li>
+    <li id="shuffle"><a href='#shuffle'>Shuffle</a></li>
+  </ul>
+
+</section> <!-- #options -->
+
+<div id="container" class="clearfix">
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape big red"><a href="#big-red-block"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape big red"><a href="#big-red-block"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape big red"><a href="#big-red-block"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+  <div class="color-shape small blue round"><a href="#small-blue-circle"></a></div>
+</div>
+
+
+<script src="../{{ site.jquery_js }}"></script>
+<script src="../{{ site.isotope_js }}"></script>
+<script>
+  $(function(){
+
+    var $container = $('#container'),
+        isRedFiltered = true;
+
+    $container.isotope({
+      itemSelector : '.color-shape',
+      masonry: {
+        columnWidth: 80
+      },
+      hiddenStyle: {
+        opacity: 0.25
+      }
+    }).isotope({
+      filter: '.blue'
+    }).isotope('shuffle');
+    
+    $('#toggle-red a').click(function(){
+      isRedFiltered = !isRedFiltered;
+      var selector = isRedFiltered ? '.blue' : '*';
+      $container.isotope({ filter: selector });
+      return false;
+    });
+    
+    $('#shuffle a').click(function(){
+      $container.isotope('shuffle');
+      return false;
+    });
+
+    var $clickedDisplay = $('#clicked-display');
+
+    $('.color-shape a').click(function(){
+      var $this = $(this);
+      // back out if hidden item
+      if ( $this.parents('.isotope-item').hasClass('isotope-hidden') ) {
+        return;
+      }
+      $clickedDisplay.text( $(this).attr('href') );
+    });
+
+  });
+</script>
--- a/css/style.css
+++ b/css/style.css
@ -385,7 +385,15 @@ body {
 .color-shape.wide, .color-shape.big { width: 150px; }
 .color-shape.tall, .color-shape.big { height: 150px; }

+.color-shape a {
+  display: block;
+  height: 100%;
+}

+.color-shape a:hover {
+  background: white;
+  background: hsla( 0, 0%, 100%, 0.5 );
+}

 /**** Horizontal ****/