diff --git a/_includes/add-buttons.js b/_includes/add-buttons.js
index 9ff999e..62e2797 100644
--- a/_includes/add-buttons.js
+++ b/_includes/add-buttons.js
@@ -1,23 +1,14 @@
$('#insert a').click(function(){
- var i = Math.ceil( Math.random()*3 + 1 ),
- newEls = '';
- while ( i-- ) {
- newEls += fakeElement.create();
- }
- var $newEls = $( newEls )
+ var $newEls = $( fakeElement.getGroup() );
$container.isotope( 'insert', $newEls );
return false;
});
$('#append a').click(function(){
- var i = Math.ceil( Math.random()*3 + 1 ),
- newEls = '';
- while ( i-- ) {
- newEls += fakeElement.create();
- }
- var $newEls = $( newEls )
+ var $newEls = $( fakeElement.getGroup() );
$container.append( $newEls ).isotope( 'appended', $newEls );
return false;
- });
\ No newline at end of file
+ });
+
\ No newline at end of file
diff --git a/_posts/demos/2011-01-02-adding-items.html b/_posts/demos/2011-01-02-adding-items.html
index cea2327..8412211 100644
--- a/_posts/demos/2011-01-02-adding-items.html
+++ b/_posts/demos/2011-01-02-adding-items.html
@@ -8,6 +8,7 @@ related: methods
The insert
method will append, add items to the widget, filter, sort, and then layout all items
The appended
method adds items to the widget, and then lays out only the new items.
+ The reloadItems
method re-collects all items in their current order in the DOM, which can be useful for prepending items.
See docs on adding items.
@@ -15,6 +16,7 @@ related: methods
@@ -34,6 +36,16 @@ related: methods
{% include add-buttons.js %}
+ $('#prepend a').click(function(){
+ var $newEls = $( fakeElement.getGroup() );
+ $container
+ .prepend( $newEls ).isotope('reloadItems').isotope({ sortBy: 'original-order' })
+ // set sort back to symbol for inserting
+ .isotope('option', { sortBy: 'symbol' });
+
+ return false;
+ });
+
$(function(){
$container.isotope({
diff --git a/_posts/docs/2010-12-04-methods.mdown b/_posts/docs/2010-12-04-methods.mdown
index c9048a5..df21c13 100644
--- a/_posts/docs/2010-12-04-methods.mdown
+++ b/_posts/docs/2010-12-04-methods.mdown
@@ -12,6 +12,7 @@ toc:
- { title: layout, anchor: layout }
- { title: option, anchor: option }
- { title: reLayout, anchor: relayout }
+ - { title: reloadItems, anchor: reloaditems }
- { title: remove, anchor: remove }
- { title: updateSortData, anchor: updatesortdata }
@@ -120,6 +121,18 @@ Resets layout properties and lays-out every item element.
[**See Demo: reLayout**](../demos/relayout.html)
+## reloadItems
+
+{% highlight javascript %}
+
+.isotope( 'reloadItems' )
+
+{% endhighlight %}
+
+Re-collects all item elements in their current order in the DOM. Useful for prepending.
+
+[**See Demo: Adding items**](../demos/adding-items.html).
+
## remove
{% highlight javascript %}
diff --git a/_posts/docs/2010-12-10-adding-items.mdown b/_posts/docs/2010-12-10-adding-items.mdown
index 392b2f4..360b89d 100644
--- a/_posts/docs/2010-12-10-adding-items.mdown
+++ b/_posts/docs/2010-12-10-adding-items.mdown
@@ -8,6 +8,7 @@ toc:
- { title: addItems method, anchor: additems_method }
- { title: insert method, anchor: insert_method }
- { title: appended method, anchor: appended_method }
+ - { title: Prepending method, anchor: prepending }
---
@@ -44,3 +45,15 @@ The [`appended` method](methods.html#appended) is a convenience method triggers
[**See Demo: Infinite Scroll**](../demos/infinite-scroll.html).
See also [Infinite Scroll with filtering or sorting](troubleshooting.html#infinite_scroll_with_filtering_or_sorting)
+
+## Prepending
+
+Because of Isotope's sorting functionality, prepending isn't as straight forward as might expect. However, it can be replicated fairly easy. After prepending new content to the container, you can re-collect all the item elements and update their sorting order with the [`reloadItems` method](methods.html#reloaditems). Then trigger a re-layout, with the original DOM order.
+
+{% highlight javascript %}
+
+var $newItems = $('');
+$('#container').prepend( $newItems)
+ .isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
+
+{% endhighlight %}
\ No newline at end of file
diff --git a/jquery.isotope.js b/jquery.isotope.js
index fadf380..2d1abba 100644
--- a/jquery.isotope.js
+++ b/jquery.isotope.js
@@ -1,5 +1,5 @@
/**
- * Isotope v1.2.110513
+ * Isotope v1.2.110516
* An exquisite jQuery plugin for magical layouts
* http://isotope.metafizzy.co
*
@@ -9,6 +9,9 @@
* Copyright 2011 David DeSandro / Metafizzy
*/
+/*jshint forin: false */
+/*global jQuery: true, Modernizr: true */
+
(function( window, $, undefined ){
// ========================= getStyleProperty by kangax ===============================
@@ -24,7 +27,9 @@
prefixed;
// test standard property first
- if (typeof style[propName] == 'string') return propName;
+ if (typeof style[propName] === 'string') {
+ return propName;
+ }
// capitalize
propName = propName.charAt(0).toUpperCase() + propName.slice(1);
@@ -32,7 +37,9 @@
// test vendor specific properties
for (var i=0, l=prefixes.length; ih?1:gb.width){b.fitRows.x=0;b.fitRows.y=b.fitRows.height}b._pushPosition(c,b.fitRows.x+b.posLeft,b.fitRows.y+b.posTop);b.fitRows.height=
-Math.max(b.fitRows.y+e,b.fitRows.height);b.fitRows.x+=d});return this},_fitRowsReset:function(){this.fitRows={x:0,y:0,height:0};return this},_fitRowsGetContainerSize:function(){return{height:this.fitRows.height}},_fitRowsResize:function(){return this.reLayout()},_cellsByRowReset:function(){this.cellsByRow={};this._getSegments("cellsByRow");this.cellsByRow.rowHeight=this.options.cellsByRow.rowHeight||this.$allAtoms.outerHeight(true);return this},_cellsByRowLayout:function(a){var b=this,c=this.cellsByRow.cols;
-this.cellsByRow.atomsLen=a.length;a.each(function(d){var e=f(this),g=(d%c+0.5)*b.cellsByRow.columnWidth-e.outerWidth(true)/2+b.posLeft;d=(~~(d/c)+0.5)*b.cellsByRow.rowHeight-e.outerHeight(true)/2+b.posTop;b._pushPosition(e,g,d)});return this},_cellsByRowGetContainerSize:function(){return{height:Math.ceil(this.cellsByRow.atomsLen/this.cellsByRow.cols)*this.cellsByRow.rowHeight+this.posTop}},_cellsByRowResize:function(){var a=this.cellsByRow.cols;this._getSegments("cellsByRow");this.cellsByRow.cols!==
-a&&this.reLayout();return this},_straightDownReset:function(){this.straightDown={y:0};return this},_straightDownLayout:function(a){var b=this;a.each(function(){var c=f(this);b._pushPosition(c,b.posLeft,b.straightDown.y+b.posTop);b.straightDown.y+=c.outerHeight(true)});return this},_straightDownGetContainerSize:function(){return{height:this.straightDown.y+this.posTop}},_straightDownResize:function(){this.reLayout();return this},_masonryHorizontalPlaceBrick:function(a,b,c){b=Math.min.apply(Math,c);
-for(var d=b+a.outerWidth(true),e=c.length,g=e,h=this.masonryHorizontal.rows+1-e;e--;)if(c[e]===b)g=e;this._pushPosition(a,b,this.masonryHorizontal.rowHeight*g+this.posTop);for(e=0;eb.height){b.fitColumns.x=b.fitColumns.width;
-b.fitColumns.y=0}b._pushPosition(c,b.fitColumns.x+b.posLeft,b.fitColumns.y+b.posTop);b.fitColumns.width=Math.max(b.fitColumns.x+d,b.fitColumns.width);b.fitColumns.y+=e});return this},_fitColumnsGetContainerSize:function(){return{width:this.fitColumns.width}},_fitColumnsResize:function(){return this.reLayout()},_cellsByColumnReset:function(){this.cellsByColumn={};this._getSegments("cellsByColumn",true);this.cellsByColumn.columnWidth=this.options.cellsByColumn.columnWidth||this.$allAtoms.outerHeight(true);
-return this},_cellsByColumnLayout:function(a){var b=this,c=this.cellsByColumn.rows;this.cellsByColumn.atomsLen=a.length;a.each(function(d){var e=f(this),g=(~~(d/c)+0.5)*b.cellsByColumn.columnWidth-e.outerWidth(true)/2+b.posLeft;d=(d%c+0.5)*b.cellsByColumn.rowHeight-e.outerHeight(true)/2+b.posTop;b._pushPosition(e,g,d)});return this},_cellsByColumnGetContainerSize:function(){return{width:Math.ceil(this.cellsByColumn.atomsLen/this.cellsByColumn.rows)*this.cellsByColumn.columnWidth+this.posLeft}},_cellsByColumnResize:function(){var a=
-this.cellsByColumn.rows;this._getSegments("cellsByColumn",true);this.cellsByColumn.rows!==a&&this.reLayout();return this}};f.fn.imagesLoaded=function(a){var b=this.find("img"),c=b.length,d=this;b.length||a.call(this);b.bind("load",function(){--c<=0&&a.call(d)}).each(function(){if(this.complete||this.complete===s){var e=this.src;this.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";this.src=e}});return this};f.widget=f.widget||{};f.widget.bridge=f.widget.bridge||function(a,
-b){f.fn[a]=function(c){var d=typeof c==="string",e=Array.prototype.slice.call(arguments,1),g=this;c=!d&&e.length?f.extend.apply(null,[true,c].concat(e)):c;if(d&&c.charAt(0)==="_")return g;d?this.each(function(){var h=f.data(this,a);if(!h)return f.error("cannot call methods on "+a+" prior to initialization; attempted to call method '"+c+"'");if(!f.isFunction(h[c]))return f.error("no such method '"+c+"' for "+a+" widget instance");var i=h[c].apply(h,e);if(i!==h&&i!==s){g=i;return false}}):this.each(function(){var h=
-f.data(this,a);h?h.option(c||{})._init():f.data(this,a,new b(c,this))});return g}};f.widget.bridge("isotope",f.Isotope)})(window,jQuery);
+!f.browser.opera?{opacity:1,scale:1}:{opacity:1},animationEngine:f.browser.opera?"jquery":"best-available",animationOptions:{queue:false,duration:800},sortBy:"original-order",sortAscending:true,resizesContainer:true,transformsEnabled:true,itemPositionDataEnabled:false};f.Isotope.prototype={_create:function(a){this.options=f.extend(true,{},f.Isotope.settings,a);this.styleQueue=[];this.elemCount=0;a=this.element[0].style;this.originalStyle={};for(var b=0,c=l.length;bh?1:gb.width){b.fitRows.x=0;b.fitRows.y=b.fitRows.height}b._pushPosition(c,b.fitRows.x+b.posLeft,b.fitRows.y+b.posTop);b.fitRows.height=Math.max(b.fitRows.y+e,b.fitRows.height);b.fitRows.x+=d});return this},_fitRowsReset:function(){this.fitRows=
+{x:0,y:0,height:0};return this},_fitRowsGetContainerSize:function(){return{height:this.fitRows.height}},_fitRowsResize:function(){return this.reLayout()},_cellsByRowReset:function(){this.cellsByRow={};this._getSegments("cellsByRow");this.cellsByRow.rowHeight=this.options.cellsByRow.rowHeight||this.$allAtoms.outerHeight(true);return this},_cellsByRowLayout:function(a){var b=this,c=this.cellsByRow.cols;this.cellsByRow.atomsLen=a.length;a.each(function(d){var e=f(this),g=(d%c+0.5)*b.cellsByRow.columnWidth-
+e.outerWidth(true)/2+b.posLeft;d=(~~(d/c)+0.5)*b.cellsByRow.rowHeight-e.outerHeight(true)/2+b.posTop;b._pushPosition(e,g,d)});return this},_cellsByRowGetContainerSize:function(){return{height:Math.ceil(this.cellsByRow.atomsLen/this.cellsByRow.cols)*this.cellsByRow.rowHeight+this.posTop}},_cellsByRowResize:function(){var a=this.cellsByRow.cols;this._getSegments("cellsByRow");this.cellsByRow.cols!==a&&this.reLayout();return this},_straightDownReset:function(){this.straightDown={y:0};return this},_straightDownLayout:function(a){var b=
+this;a.each(function(){var c=f(this);b._pushPosition(c,b.posLeft,b.straightDown.y+b.posTop);b.straightDown.y+=c.outerHeight(true)});return this},_straightDownGetContainerSize:function(){return{height:this.straightDown.y+this.posTop}},_straightDownResize:function(){this.reLayout();return this},_masonryHorizontalPlaceBrick:function(a,b,c){b=Math.min.apply(Math,c);for(var d=b+a.outerWidth(true),e=c.length,g=e,h=this.masonryHorizontal.rows+1-e;e--;)if(c[e]===b)g=e;this._pushPosition(a,b,this.masonryHorizontal.rowHeight*
+g+this.posTop);for(e=0;eb.height){b.fitColumns.x=b.fitColumns.width;b.fitColumns.y=0}b._pushPosition(c,b.fitColumns.x+b.posLeft,b.fitColumns.y+b.posTop);b.fitColumns.width=Math.max(b.fitColumns.x+d,b.fitColumns.width);
+b.fitColumns.y+=e});return this},_fitColumnsGetContainerSize:function(){return{width:this.fitColumns.width}},_fitColumnsResize:function(){return this.reLayout()},_cellsByColumnReset:function(){this.cellsByColumn={};this._getSegments("cellsByColumn",true);this.cellsByColumn.columnWidth=this.options.cellsByColumn.columnWidth||this.$allAtoms.outerHeight(true);return this},_cellsByColumnLayout:function(a){var b=this,c=this.cellsByColumn.rows;this.cellsByColumn.atomsLen=a.length;a.each(function(d){var e=
+f(this),g=(~~(d/c)+0.5)*b.cellsByColumn.columnWidth-e.outerWidth(true)/2+b.posLeft;d=(d%c+0.5)*b.cellsByColumn.rowHeight-e.outerHeight(true)/2+b.posTop;b._pushPosition(e,g,d)});return this},_cellsByColumnGetContainerSize:function(){return{width:Math.ceil(this.cellsByColumn.atomsLen/this.cellsByColumn.rows)*this.cellsByColumn.columnWidth+this.posLeft}},_cellsByColumnResize:function(){var a=this.cellsByColumn.rows;this._getSegments("cellsByColumn",true);this.cellsByColumn.rows!==a&&this.reLayout();
+return this}};f.fn.imagesLoaded=function(a){var b=this.find("img"),c=b.length,d=this;b.length||a.call(this);b.bind("load",function(){--c<=0&&a.call(d)}).each(function(){if(this.complete||this.complete===v){var e=this.src;this.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";this.src=e}});return this};f.fn.isotope=function(a){if(typeof a==="string"){var b=Array.prototype.slice.call(arguments,1);return this.each(function(){var c=f.data(this,"isotope");if(!c)return f.error("cannot call methods on isotope prior to initialization; attempted to call method '"+
+a+"'");if(!f.isFunction(c[a])||a.charAt(0)==="_")return f.error("no such method '"+a+"' for isotope instance");c[a].apply(c,b)})}else return this.each(function(){var c=f.data(this,"isotope");c?c.option(a||{})._init():f.data(this,"isotope",new f.Isotope(a,this))})}})(window,jQuery);
diff --git a/js/fake-element.js b/js/fake-element.js
index b6e556c..8a3eaa0 100644
--- a/js/fake-element.js
+++ b/js/fake-element.js
@@ -26,4 +26,13 @@ fakeElement.create = function() {
'" data-category="' + category + '">' + number +
'
' + symbol + '
' + name +
'
' + weight + '
';
+};
+
+fakeElement.getGroup = function() {
+ var i = Math.ceil( Math.random()*3 + 1 ),
+ newEls = '';
+ while ( i-- ) {
+ newEls += fakeElement.create();
+ }
+ return newEls;
};
\ No newline at end of file