Using Isotope without Layoutmode

[benjick]

Hi

I want to use Isotope without Layoutmode. Is this possible?

Best regards,
Max

[desandro]

Hi Max! This is an interesting request. Could you elaborate on what you would like?

I put together a demo that uses a layout mode that does not do any positioning. See http://codepen.io/desandro/pen/bvieG/

// layout mode that does not position items
var NoneMode = Isotope.LayoutMode.create('none');

  var $container = $('.isotope').isotope({
    itemSelector: '.element-item',
    layoutMode: 'none'
  });

But I'm thinking this is not what you're looking for.

[benjick]

That's exactly what I'm looking for I think. I just wanna use the filter function without the layoutMode since I position everything with CSS.

The demo doesn't work tho, it's just stacking everything on top of eachother after I click a button. See screenshot.

Running Chrome Version 34.0.1847.116 m on Windows 8.1

[desandro]

This is a fun exercise 🏃. I hacked a couple methods and I think I got it. See http://codepen.io/desandro/pen/AEslp

Here's the JS you'll need

Isotope.Item.prototype._create = function() {
  // assign id, used for original-order sorting
  this.id = this.layout.itemGUID++;
  // transition objects
  this._transn = {
    ingProperties: {},
    clean: {},
    onEnd: {}
  };
  this.sortData = {};
};

Isotope.prototype.arrange = function( opts ) {
  // set any options pass
  this.option( opts );
  this._getIsInstant();
  // just filter
  this.filteredItems = this._filter( this.items );
  // flag for initalized
  this._isLayoutInited = true;
};

Note that the filtering transitions aren't smooth, as display: none is applied.

[desandro]

Closing here as I've added this example to the docs http://isotope.metafizzy.co/appendix.html#extra-examples

[smachi]

But what if there are multiple instances of isotope running on same page and I want one of them with no layout and the others with a specific layout?

[brettmhoffman]

I understand that the "no layout" mode referenced here is a hack of the intended functionality of Isotope, but as per @smachi comment above, is there a way to make the referenced workaround work with multiple instances of Isotope on a single page? The current solution overrides everything.

[ses2013]

Any News on this. Would be very helpfull to have both Layout Modes on one Page.
Best

[BenjaminHoegh]

Anyone there know how to add back the smooth transitions?

[anasik]

Anyone there know how to add back the smooth transitions?

Good question. It's a pity nobody answered. @desandro can you look into this? Your solution for no layoutmode kind of removes half the transitions.

[robwent]

Does anyone know how to use this with a hashfilter (jQuery version)?

The none layout works great, but it's ignoring the filter set on pageload.

EDIT: I've just triggered a hashchange event in the part that checks on first load. Not ideal but working fine.

[desandro]

Anyone there know how to add back the smooth transitions?

Sorry, no. By removing layout mode you remove the layout behavior which controls transitions.

Does anyone know how to use this with a hashfilter (jQuery version)?

Removing the layout mode will not affect use of URL hash

[robwent]

@desandro that's weird. Not sure if I had the code in the wrong place but it stopped the filter working on page load.

I tried a few things, but this is what I have working now with the manual trigger.

https://gist.github.com/robwent/ef96e4f82f49a1442069aaf0d99ca0c1

At line 71, it checks for a hash on pageload to change the value of the select field, so I added a manual hash change event after changing the select which triggers the filters.

Might help someone else.

[abelgriffen]

This is a fun exercise 🏃. I hacked a couple methods and I think I got it. See http://codepen.io/desandro/pen/AEslp

Here's the JS you'll need

Isotope.Item.prototype._create = function() {
  // assign id, used for original-order sorting
  this.id = this.layout.itemGUID++;
  // transition objects
  this._transn = {
    ingProperties: {},
    clean: {},
    onEnd: {}
  };
  this.sortData = {};
};

Isotope.prototype.arrange = function( opts ) {
  // set any options pass
  this.option( opts );
  this._getIsInstant();
  // just filter
  this.filteredItems = this._filter( this.items );
  // flag for initalized
  this._isLayoutInited = true;
};

Note that the filtering transitions aren't smooth, as display: none is applied.

---

@desandro : It works fine on filter but the code does not work while applying sort functionality. Is there a way to fix that? Thanks

[dgobnto]

I haven't been able to get the "no layout" mode to work with Webpack. Could someone please help me?

This is my code:

var Isotope = require('isotope-layout');

Isotope.Item.prototype._create = function() {
  // assign id, used for original-order sorting
  this.id = this.layout.itemGUID++;
  // transition objects
  this._transn = {
    ingProperties: {},
    clean: {},
    onEnd: {}
  };
  this.sortData = {};
};

Isotope.Item.prototype.layoutPosition = function() {
  this.emitEvent( 'layout', [ this ] );
};

Isotope.prototype.arrange = function( opts ) {
  // set any options pass
  this.option( opts );
  this._getIsInstant();
  // just filter
  this.filteredItems = this._filter( this.items );
  // flag for initalized
  this._isLayoutInited = true;
};

// layout mode that does not position items
Isotope.LayoutMode.create('none');

var $grid = new Isotope( '.main-content', {
	itemSelector: '.presentation',
	layoutMode: 'none'
});