From c84c22c453f02dce02757ef0075d1dc72ec618ae Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Tue, 23 Aug 2011 10:44:33 -0400 Subject: [PATCH 1/2] src : dismiss clicks to hidden items with delegate --- jquery.isotope.js | 8 +++++++- jquery.isotope.min.js | 4 ++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/jquery.isotope.js b/jquery.isotope.js index d356600..899fd44 100644 --- a/jquery.isotope.js +++ b/jquery.isotope.js @@ -1,5 +1,5 @@ /** - * Isotope v1.4.110808 + * Isotope v1.4.110823 * An exquisite jQuery plugin for magical layouts * 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 ) { @@ -744,6 +749,7 @@ this.element .unbind('.isotope') + .undelegate( '.' + this.options.hiddenClass, 'click' ) .removeClass( this.options.containerClass ) .removeData('isotope'); diff --git a/jquery.isotope.min.js b/jquery.isotope.min.js index 3608f53..5c89d85 100644 --- a/jquery.isotope.min.js +++ b/jquery.isotope.min.js @@ -1,5 +1,5 @@ /** - * Isotope v1.4.110808 + * Isotope v1.4.110823 * An exquisite jQuery plugin for magical layouts * http://isotope.metafizzy.co * @@ -10,4 +10,4 @@ */ /*jshint curly: true, eqeqeq: true, forin: false, immed: false, newcap: true, noempty: true, undef: true */ /*global Modernizr: true */ -(function(a,b,c){function f(a){var b=document.documentElement.style,c;if(typeof b[a]=="string")return a;a=d(a);for(var f=0,g=e.length;f"+d+"{#modernizr{height:3px}}"+"").appendTo("head"),g=b('
').appendTo("html");a=g.height()===3,g.remove(),e.remove()}return a},csstransitions:function(){return!!f("transitionProperty")}};if(a.Modernizr)for(var i in h)Modernizr.hasOwnProperty(i)||Modernizr.addTest(i,h[i]);else a.Modernizr=function(){var a={_version:"1.6ish: miniModernizr for Isotope"},c=" ",d,e;for(e in h)d=h[e](),a[e]=d,c+=" "+(d?"":"no-")+e;b("html").addClass(c);return a}();if(Modernizr.csstransforms){var j=Modernizr.csstransforms3d?{translate:function(a){return"translate3d("+a[0]+"px, "+a[1]+"px, 0) "},scale:function(a){return"scale3d("+a+", "+a+", 1) "}}:{translate:function(a){return"translate("+a[0]+"px, "+a[1]+"px) "},scale:function(a){return"scale("+a+") "}},k=function(a,c,d){var e=b.data(a,"isoTransform")||{},f={},h,i={},k;f[c]=d,b.extend(e,f);for(h in e)k=e[h],i[h]=j[h](k);var l=i.translate||"",m=i.scale||"",n=l+m;b.data(a,"isoTransform",e),a.style[g]=n};b.cssNumber.scale=!0,b.cssHooks.scale={set:function(a,b){k(a,"scale",b)},get:function(a,c){var d=b.data(a,"isoTransform");return d&&d.scale?d.scale:1}},b.fx.step.scale=function(a){b.cssHooks.scale.set(a.elem,a.now+a.unit)},b.cssNumber.translate=!0,b.cssHooks.translate={set:function(a,b){k(a,"translate",b)},get:function(a,c){var d=b.data(a,"isoTransform");return d&&d.translate?d.translate:[0,0]}}}var l=b.event,m;l.special.smartresize={setup:function(){b(this).bind("resize",l.special.smartresize.handler)},teardown:function(){b(this).unbind("resize",l.special.smartresize.handler)},handler:function(a,b){var c=this,d=arguments;a.type="smartresize",m&&clearTimeout(m),m=setTimeout(function(){jQuery.event.handle.apply(c,d)},b==="execAsap"?0:100)}},b.fn.smartresize=function(a){return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])},b.Isotope=function(a,c){this.element=b(c),this._create(a),this._init()};var n=["overflow","position","width","height"];b.Isotope.settings={resizable:!0,layoutMode:"masonry",containerClass:"isotope",itemClass:"isotope-item",hiddenClass:"isotope-hidden",hiddenStyle:Modernizr.csstransforms&&!b.browser.opera?{opacity:0,scale:.001}:{opacity:0},visibleStyle:Modernizr.csstransforms&&!b.browser.opera?{opacity:1,scale:1}:{opacity:1},animationEngine:b.browser.opera?"jquery":"best-available",animationOptions:{queue:!1,duration:800},sortBy:"original-order",sortAscending:!0,resizesContainer:!0,transformsEnabled:!0,itemPositionDataEnabled:!1},b.Isotope.prototype={_create:function(c){this.options=b.extend({},b.Isotope.settings,c),this.styleQueue=[],this.elemCount=0;var d=this.element[0].style;this.originalStyle={};for(var e=0,f=n.length;eg?1:fd&&(e.x=0,e.y=e.height),c._pushPosition(a,e.x,e.y),e.height=Math.max(e.y+g,e.height),e.x+=f})},_fitRowsGetContainerSize:function(){return{height:this.fitRows.height}},_fitRowsResizeChanged:function(){return!0},_cellsByRowReset:function(){this.cellsByRow={index:0},this._getSegments(),this._getSegments(!0)},_cellsByRowLayout:function(a){var c=this,d=this.cellsByRow;a.each(function(){var a=b(this),e=d.index%d.cols,f=~~(d.index/d.cols),g=(e+.5)*d.columnWidth-a.outerWidth(!0)/2,h=(f+.5)*d.rowHeight-a.outerHeight(!0)/2;c._pushPosition(a,g,h),d.index++})},_cellsByRowGetContainerSize:function(){return{height:Math.ceil(this.$filteredAtoms.length/this.cellsByRow.cols)*this.cellsByRow.rowHeight+this.offset.top}},_cellsByRowResizeChanged:function(){return this._checkIfSegmentsChanged()},_straightDownReset:function(){this.straightDown={y:0}},_straightDownLayout:function(a){var c=this;a.each(function(a){var d=b(this);c._pushPosition(d,0,c.straightDown.y),c.straightDown.y+=d.outerHeight(!0)})},_straightDownGetContainerSize:function(){return{height:this.straightDown.y}},_straightDownResizeChanged:function(){return!0},_masonryHorizontalReset:function(){this.masonryHorizontal={},this._getSegments(!0);var a=this.masonryHorizontal.rows;this.masonryHorizontal.rowXs=[];while(a--)this.masonryHorizontal.rowXs.push(0)},_masonryHorizontalLayout:function(a){var c=this,d=c.masonryHorizontal;a.each(function(){var a=b(this),e=Math.ceil(a.outerHeight(!0)/d.rowHeight);e=Math.min(e,d.rows);if(e===1)c._masonryHorizontalPlaceBrick(a,d.rowXs);else{var f=d.rows+1-e,g=[],h,i;for(i=0;id&&(e.x=e.width,e.y=0),c._pushPosition(a,e.x,e.y),e.width=Math.max(e.x+f,e.width),e.y+=g})},_fitColumnsGetContainerSize:function(){return{width:this.fitColumns.width}},_fitColumnsResizeChanged:function(){return!0},_cellsByColumnReset:function(){this.cellsByColumn={index:0},this._getSegments(),this._getSegments(!0)},_cellsByColumnLayout:function(a){var c=this,d=this.cellsByColumn;a.each(function(){var a=b(this),e=~~(d.index/d.rows),f=d.index%d.rows,g=(e+.5)*d.columnWidth-a.outerWidth(!0)/2,h=(f+.5)*d.rowHeight-a.outerHeight(!0)/2;c._pushPosition(a,g,h),d.index++})},_cellsByColumnGetContainerSize:function(){return{width:Math.ceil(this.$filteredAtoms.length/this.cellsByColumn.rows)*this.cellsByColumn.columnWidth}},_cellsByColumnResizeChanged:function(){return this._checkIfSegmentsChanged(!0)},_straightAcrossReset:function(){this.straightAcross={x:0}},_straightAcrossLayout:function(a){var c=this;a.each(function(a){var d=b(this);c._pushPosition(d,c.straightAcross.x,0),c.straightAcross.x+=d.outerWidth(!0)})},_straightAcrossGetContainerSize:function(){return{width:this.straightAcross.x}},_straightAcrossResizeChanged:function(){return!0}},b.fn.imagesLoaded=function(a){var b=this.find("img"),c=[],d=this,e=b.length;if(!b.length){a.call(this);return this}b.one("load error",function(){--e===0&&(e=b.length,b.one("load error",function(){--e===0&&a.call(d)}).each(function(){this.src=c.shift()}))}).each(function(){c.push(this.src),this.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="});return this};var o=function(a){this.console&&console.error(a)};b.fn.isotope=function(a){if(typeof a=="string"){var c=Array.prototype.slice.call(arguments,1);this.each(function(){var d=b.data(this,"isotope");if(!d)o("cannot call methods on isotope prior to initialization; attempted to call method '"+a+"'");else{if(!b.isFunction(d[a])||a.charAt(0)==="_"){o("no such method '"+a+"' for isotope instance");return}d[a].apply(d,c)}})}else this.each(function(){var c=b.data(this,"isotope");c?(c.option(a),c._init()):b.data(this,"isotope",new b.Isotope(a,this))});return this}})(window,jQuery); +(function(a,b,c){function f(a){var b=document.documentElement.style,c;if(typeof b[a]=="string")return a;a=d(a);for(var f=0,g=e.length;f"+d+"{#modernizr{height:3px}}"+"").appendTo("head"),g=b('
').appendTo("html");a=g.height()===3,g.remove(),e.remove()}return a},csstransitions:function(){return!!f("transitionProperty")}};if(a.Modernizr)for(var i in h)Modernizr.hasOwnProperty(i)||Modernizr.addTest(i,h[i]);else a.Modernizr=function(){var a={_version:"1.6ish: miniModernizr for Isotope"},c=" ",d,e;for(e in h)d=h[e](),a[e]=d,c+=" "+(d?"":"no-")+e;b("html").addClass(c);return a}();if(Modernizr.csstransforms){var j=Modernizr.csstransforms3d?{translate:function(a){return"translate3d("+a[0]+"px, "+a[1]+"px, 0) "},scale:function(a){return"scale3d("+a+", "+a+", 1) "}}:{translate:function(a){return"translate("+a[0]+"px, "+a[1]+"px) "},scale:function(a){return"scale("+a+") "}},k=function(a,c,d){var e=b.data(a,"isoTransform")||{},f={},h,i={},k;f[c]=d,b.extend(e,f);for(h in e)k=e[h],i[h]=j[h](k);var l=i.translate||"",m=i.scale||"",n=l+m;b.data(a,"isoTransform",e),a.style[g]=n};b.cssNumber.scale=!0,b.cssHooks.scale={set:function(a,b){k(a,"scale",b)},get:function(a,c){var d=b.data(a,"isoTransform");return d&&d.scale?d.scale:1}},b.fx.step.scale=function(a){b.cssHooks.scale.set(a.elem,a.now+a.unit)},b.cssNumber.translate=!0,b.cssHooks.translate={set:function(a,b){k(a,"translate",b)},get:function(a,c){var d=b.data(a,"isoTransform");return d&&d.translate?d.translate:[0,0]}}}var l=b.event,m;l.special.smartresize={setup:function(){b(this).bind("resize",l.special.smartresize.handler)},teardown:function(){b(this).unbind("resize",l.special.smartresize.handler)},handler:function(a,b){var c=this,d=arguments;a.type="smartresize",m&&clearTimeout(m),m=setTimeout(function(){jQuery.event.handle.apply(c,d)},b==="execAsap"?0:100)}},b.fn.smartresize=function(a){return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])},b.Isotope=function(a,c){this.element=b(c),this._create(a),this._init()};var n=["overflow","position","width","height"];b.Isotope.settings={resizable:!0,layoutMode:"masonry",containerClass:"isotope",itemClass:"isotope-item",hiddenClass:"isotope-hidden",hiddenStyle:Modernizr.csstransforms&&!b.browser.opera?{opacity:0,scale:.001}:{opacity:0},visibleStyle:Modernizr.csstransforms&&!b.browser.opera?{opacity:1,scale:1}:{opacity:1},animationEngine:b.browser.opera?"jquery":"best-available",animationOptions:{queue:!1,duration:800},sortBy:"original-order",sortAscending:!0,resizesContainer:!0,transformsEnabled:!0,itemPositionDataEnabled:!1},b.Isotope.prototype={_create:function(c){this.options=b.extend({},b.Isotope.settings,c),this.styleQueue=[],this.elemCount=0;var d=this.element[0].style;this.originalStyle={};for(var e=0,f=n.length;eg?1:fd&&(e.x=0,e.y=e.height),c._pushPosition(a,e.x,e.y),e.height=Math.max(e.y+g,e.height),e.x+=f})},_fitRowsGetContainerSize:function(){return{height:this.fitRows.height}},_fitRowsResizeChanged:function(){return!0},_cellsByRowReset:function(){this.cellsByRow={index:0},this._getSegments(),this._getSegments(!0)},_cellsByRowLayout:function(a){var c=this,d=this.cellsByRow;a.each(function(){var a=b(this),e=d.index%d.cols,f=~~(d.index/d.cols),g=(e+.5)*d.columnWidth-a.outerWidth(!0)/2,h=(f+.5)*d.rowHeight-a.outerHeight(!0)/2;c._pushPosition(a,g,h),d.index++})},_cellsByRowGetContainerSize:function(){return{height:Math.ceil(this.$filteredAtoms.length/this.cellsByRow.cols)*this.cellsByRow.rowHeight+this.offset.top}},_cellsByRowResizeChanged:function(){return this._checkIfSegmentsChanged()},_straightDownReset:function(){this.straightDown={y:0}},_straightDownLayout:function(a){var c=this;a.each(function(a){var d=b(this);c._pushPosition(d,0,c.straightDown.y),c.straightDown.y+=d.outerHeight(!0)})},_straightDownGetContainerSize:function(){return{height:this.straightDown.y}},_straightDownResizeChanged:function(){return!0},_masonryHorizontalReset:function(){this.masonryHorizontal={},this._getSegments(!0);var a=this.masonryHorizontal.rows;this.masonryHorizontal.rowXs=[];while(a--)this.masonryHorizontal.rowXs.push(0)},_masonryHorizontalLayout:function(a){var c=this,d=c.masonryHorizontal;a.each(function(){var a=b(this),e=Math.ceil(a.outerHeight(!0)/d.rowHeight);e=Math.min(e,d.rows);if(e===1)c._masonryHorizontalPlaceBrick(a,d.rowXs);else{var f=d.rows+1-e,g=[],h,i;for(i=0;id&&(e.x=e.width,e.y=0),c._pushPosition(a,e.x,e.y),e.width=Math.max(e.x+f,e.width),e.y+=g})},_fitColumnsGetContainerSize:function(){return{width:this.fitColumns.width}},_fitColumnsResizeChanged:function(){return!0},_cellsByColumnReset:function(){this.cellsByColumn={index:0},this._getSegments(),this._getSegments(!0)},_cellsByColumnLayout:function(a){var c=this,d=this.cellsByColumn;a.each(function(){var a=b(this),e=~~(d.index/d.rows),f=d.index%d.rows,g=(e+.5)*d.columnWidth-a.outerWidth(!0)/2,h=(f+.5)*d.rowHeight-a.outerHeight(!0)/2;c._pushPosition(a,g,h),d.index++})},_cellsByColumnGetContainerSize:function(){return{width:Math.ceil(this.$filteredAtoms.length/this.cellsByColumn.rows)*this.cellsByColumn.columnWidth}},_cellsByColumnResizeChanged:function(){return this._checkIfSegmentsChanged(!0)},_straightAcrossReset:function(){this.straightAcross={x:0}},_straightAcrossLayout:function(a){var c=this;a.each(function(a){var d=b(this);c._pushPosition(d,c.straightAcross.x,0),c.straightAcross.x+=d.outerWidth(!0)})},_straightAcrossGetContainerSize:function(){return{width:this.straightAcross.x}},_straightAcrossResizeChanged:function(){return!0}},b.fn.imagesLoaded=function(a){var b=this.find("img"),c=[],d=this,e=b.length;if(!b.length){a.call(this);return this}b.one("load error",function(){--e===0&&(e=b.length,b.one("load error",function(){--e===0&&a.call(d)}).each(function(){this.src=c.shift()}))}).each(function(){c.push(this.src),this.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="});return this};var o=function(a){this.console&&console.error(a)};b.fn.isotope=function(a){if(typeof a=="string"){var c=Array.prototype.slice.call(arguments,1);this.each(function(){var d=b.data(this,"isotope");if(!d)o("cannot call methods on isotope prior to initialization; attempted to call method '"+a+"'");else{if(!b.isFunction(d[a])||a.charAt(0)==="_"){o("no such method '"+a+"' for isotope instance");return}d[a].apply(d,c)}})}else this.each(function(){var c=b.data(this,"isotope");c?(c.option(a),c._init()):b.data(this,"isotope",new b.Isotope(a,this))});return this}})(window,jQuery); From e5a25e811b2479c5c0717da5673b82d1e20d20ab Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Tue, 23 Aug 2011 11:00:07 -0400 Subject: [PATCH 2/2] docs : help : preventing clicks on filtered items; re: #74 --- _posts/docs/2011-12-11-help.mdown | 21 ++++ .../2011-08-23-unclickable-filtered.html | 118 ++++++++++++++++++ css/style.css | 8 ++ 3 files changed, 147 insertions(+) create mode 100644 _posts/tests/2011-08-23-unclickable-filtered.html 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)

+
+ +
+ + + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/css/style.css b/css/style.css index 5bc7038..d9f05f6 100644 --- 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 ****/