Having 2 or more Macy Containers ID's, how?

[goncalobranco]

I have a grid layout with 2 tabs (Winter and Summer tabs). Each tab has a list of items that should have the Macy.js layout. With the first tab, everything works just fine. The problem os to make the second tab work fine too! Example below of the first tab displaying Macy.js grid.

I tried several things to make the second tab to work:

Solution 1: Having 2 'var macyInstance = Macy' containers with 2 different ID's Result: the second tab don't even show up. Example image below with tab 2

Solution 2: Having 1 class for the 'var macyInstance = Macy' container Result: The Macy grid don't work in either tab 1 and tab 2 but the tab2 manage to load the content. Example image below with tab 1

If I could call 2 ID's on the same 'var macyInstance = Macy' but has I understand isn't possible.

So my final question is, how can I make this solution to work?

[jrmd]

Hi @goncalobranco

Macy does support having multiple instances pointing to different containers. I believe the issue is probably caused by the second tab not being visible, when the tab isnt visible the child elements dont have a height so when calculating nothing will show. As a fix, each time you switch tab run macyInstance.recalculate(true) on the respective macy instance.

For example this is how i imagine it could work, but this depends on your tab switching logic.

var macyOne = Macy({ container: '#container-one' })
var macyTwo = Macy({ container: '#container-two' })

function onTabSwitch(tab) {
  if (tab == 1) {
    macyOne.recalculate(true)
  }
  if (tab == 2) {
    macyTwo.recalculate(true)
  }
}

[goncalobranco]

yes! that's correct what you said about the height of the div because the content of the second tab is hidden. Thanks a lot for the tip @jrmd ! I will try that approach to see if I manage to do it and I'll let you know later

[jrmd]

Hi @goncalobranco Did you manage to fix this?

Just so I can close this issue

[goncalobranco]

Hi @jrmd sorry for the late reply. Well I bet your code would work but I'm not very good with Javascript since I'm a UX/UI designer and Web Designer focused on html and css so I couldn't manage to make work that way so I didn't use a tab system anymore, instead I used a filtering system so all the pictures are in the same div now. Give it a check www.highlanders.ge/gallery

[jrmd]

Sorry to hear you had trouble implementing the solution, but I'm glad you found a solution; The site is looking great, in the next update to macy I'm going to work on improving performance by skipping hidden elements, so they wont be calculated.

[goncalobranco]

Yes that would be a nice update! But like I said, I'm not very good with JS because if I were, I know I would manage with the code you sent me. thanks anyway ;)