colcade icon indicating copy to clipboard operation
colcade copied to clipboard

display property not work

Open kavan-mevada opened this issue 8 years ago • 3 comments

when I try display:none on element it still include it in layout Its need when using colcade with filter layout ...

kavan-mevada avatar Aug 07 '16 14:08 kavan-mevada

Thanks for reporting this bug. I'll have to take a look.

desandro avatar Aug 07 '16 22:08 desandro

Any luck with this? I have the same issue.

I'm trying to create a filter. I'm using the following function to initialize Colcade:

function initializeGrid(grid) {
    const $this = $(grid);
    const imgLoaded = imagesLoaded($this);

    imgLoaded.on('always', function(instance) {
      setTimeout(() => {
        $this.colcade({
          columns: '[data-masonry="col"]',
          items: '[data-masonry="item"]'
        });

        $this.addClass('loaded');
      }, 300);
    });
  }

It creates a grid and all is well for the moment. Then, upon pressing any of my filters, I change the "data-masonry" attribute of the unnecessary items to "none" and for the required items - to "item", and rerun the initializeGrid() function. But Colcade somehow ignores that the attributes have changed and continues to use all items that initially had data-masonry="item", despite the attribute being changed before rerunning the initialization function.

andrey-scada avatar Feb 19 '21 10:02 andrey-scada

I found a solution to my problem above.

What I have been doing before:

  1. Initializing colcade only with items that have the data-masonry="item" attribute.
  2. Upon pressing the filter button, I used $grid.colcade('destroy');
  3. After destroying the grid, I changed the data-masonry attribute of the unneeded items to none.
  4. Then I called my initializeGrid() function to rebuild the grid using only the data-masonry="item" items.

What I should have done: In step 4, instead of using my initializeGrid() function, I should have called $grid.colcade('reload') (which, by the way, I couldn't find in the documentation).

Hopefully, this will be helpful to somebody.

andrey-scada avatar Feb 23 '21 08:02 andrey-scada