Browse Source

Merge branch 'master' into gh-pages

v1
David DeSandro 13 years ago
parent
commit
7e55fc6947
  1. 21
      _posts/docs/2011-12-11-help.mdown
  2. 118
      _posts/tests/2011-08-23-unclickable-filtered.html
  3. 8
      css/style.css
  4. 8
      jquery.isotope.js
  5. 4
      jquery.isotope.min.js

21
_posts/docs/2011-12-11-help.mdown

@ -16,6 +16,7 @@ toc:
- { title: Flash, anchor: flash } - { title: Flash, anchor: flash }
- { title: Poor type rendering in WebKit, anchor: poor_type_rendering_in_webkit } - { title: Poor type rendering in WebKit, anchor: poor_type_rendering_in_webkit }
- { title: Right-to-left layouts, anchor: righttoleft_layouts } - { title: Right-to-left layouts, anchor: righttoleft_layouts }
- { title: Preventing clicks on filtered items, anchor: unclickable-filtered }
--- ---
@ -197,3 +198,23 @@ $('#container').isotope({
} }
{% endhighlight %} {% 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 %}

118
_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>

8
css/style.css

@ -385,7 +385,15 @@ body {
.color-shape.wide, .color-shape.big { width: 150px; } .color-shape.wide, .color-shape.big { width: 150px; }
.color-shape.tall, .color-shape.big { height: 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 ****/ /**** Horizontal ****/

8
jquery.isotope.js

@ -1,5 +1,5 @@
/** /**
* Isotope v1.4.110808 * Isotope v1.4.110823
* An exquisite jQuery plugin for magical layouts * An exquisite jQuery plugin for magical layouts
* http://isotope.metafizzy.co * http://isotope.metafizzy.co
* *
@ -388,6 +388,11 @@
}); });
} }
// dismiss all click events from hidden events
this.element.delegate( '.' + this.options.hiddenClass, 'click', function(){
return false;
});
}, },
_getAtoms : function( $elems ) { _getAtoms : function( $elems ) {
@ -744,6 +749,7 @@
this.element this.element
.unbind('.isotope') .unbind('.isotope')
.undelegate( '.' + this.options.hiddenClass, 'click' )
.removeClass( this.options.containerClass ) .removeClass( this.options.containerClass )
.removeData('isotope'); .removeData('isotope');

4
jquery.isotope.min.js vendored

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save