Skip to content
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 · 14 comments
Closed

Using Isotope without Layoutmode #675

benjick opened this issue Apr 15, 2014 · 14 comments

Comments

@benjick
Copy link

@benjick benjick commented Apr 15, 2014

Hi

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

Best regards,
Max

@desandro
Copy link
Member

@desandro 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
Copy link
Author

@benjick 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
Copy link
Member

@desandro 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
Copy link
Member

@desandro 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
Copy link

@smachi 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
Copy link

@brettmhoffman 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
Copy link

@ses2013 ses2013 commented Aug 23, 2018

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

@BenjaminHoegh
Copy link

@BenjaminHoegh BenjaminHoegh commented Nov 23, 2018

Anyone there know how to add back the smooth transitions?

@anasik
Copy link

@anasik anasik commented Mar 13, 2019

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
Copy link

@robwent robwent commented Mar 13, 2019

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
Copy link
Member

@desandro desandro commented Mar 13, 2019

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
Copy link

@robwent robwent commented Mar 13, 2019

@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
Copy link

@abelgriffen abelgriffen commented Oct 22, 2019

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
Copy link

@dgobnto dgobnto commented Dec 5, 2020

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'
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants