New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using Isotope without Layoutmode #675

Closed
benjick opened this Issue Apr 15, 2014 · 8 comments

Comments

6 participants
@benjick
Copy link

benjick commented Apr 15, 2014

Hi

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

Best regards,
Max

@desandro

This comment has been minimized.

Copy link
Member

desandro commented Apr 16, 2014

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

This comment has been minimized.

Copy link
Author

benjick commented Apr 16, 2014

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 comment has been minimized.

Copy link
Member

desandro commented Apr 17, 2014

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

This comment has been minimized.

Copy link
Member

desandro commented Nov 28, 2014

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

@smachi

This comment has been minimized.

Copy link

smachi commented Jun 11, 2016

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

This comment has been minimized.

Copy link

brettmhoffman commented Feb 28, 2017

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

This comment has been minimized.

Copy link

ses2013 commented Aug 23, 2018

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

@BenjaminHoegh

This comment has been minimized.

Copy link

BenjaminHoegh commented Nov 23, 2018

Anyone there know how to add back the smooth transitions?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment