Streaming live at 10am (PST)

Access CMS item in Div

Hello. I am attempting to have a “card” pop up when the user clicks on an item in my collection list. The issue is that I am not sure how to give the card access to the information it needs about a specific item. You should be able to see the issue in the “My Apps” section. How do I have each card access information about the corresponding app?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

@mikeyevin Do you mind taking a look at this?

Instead of trying to contain a separate collection list outside of your Apps collection list, you’ll need to include an instance inside of your collection item.

Just unlink everything from within the modal container, drag the Project Modal element outside of the collection list it’s inside (deleting the unused collection list), and drag the modal parent element within one of your App collection items:

image

There may need to be some cleanup here with how it’s organized, but that’s the gist of the solution. Hopefully that helps, and let me know if you run into any issues :v:

I’m still a little bit confused. When the user clicks on one of the apps, I want to display a modal with information about only the app they clicked on. Currently, information about all the apps is being displayed, and I am not sure how to link the modal to the user’s selection.

Correct, and since you’re modal contents are nested in each of the collection items, the content within will be mapped to that specific collection item’s content.

I just realized my initial screenshot may not have been correct, so make sure it’s either a child, sibling, or parent of the clicked element and then under the class selector on the interaction itself you’ll need to choose the corresponding option:

image

Each of your collection items will contain it’s own modal parent and it’s content will only contain the content related to that specific collection item.

@mikeyevin Is it possible for you to record a video for me explaining this like you did last time? I greatly appreciate your help, by the way.

So I originally helped David add the modal content, and the reason I made it a separate collection area is because there is currently a code interaction causing the modal content to get funky when it is nested in the projects CMS list.

@David_Ruvinskiy I looked at the site again today and it looks like some of what I did has been moved around. I am not sure the cleanest way to fix this, but my suggestion is to have someone help clean up the interaction between the projects grid and the modal pop-up.

@mikeyevin do you have access to his read-only link and are you able to identify the error?

Sorry for the delay in my response, this definitely took a bit of trial and error to figure out what it wasn’t working as expected. Thankfully I think I solved all the quirks so I recorded a video (below) illustrating what changes are needed to get this working.

@natedogg - I briefly touched on the issue you were experiencing with the glitching in my video, so hopefully it helps out in the event you see that on any future projects :v:

Feel free to let me know if you run into issues making any of these changes :+1:

@mikeyevin Thank you so much for spending this long figuring out the issue. I haven’t applied your changes yet, but I have another question I was hoping you could clarify:

When the user clicks on one of my apps and the modal is displayed, how does it know to only display content relevant to the user’s specific choice?

The interaction is only setup to display the sibling of that clicked element with the class name Project Modal (sibling elements are elements that appear in the same level within the element stack), and since we include a version of the modal within each separate collection item it will only show the related content on click.

At 2:40 in your video, I noticed you said that the corrected hover state isn’t “the best.” Is there anything in particular you would recommend doing that you didn’t cover in the video to make the hover state better?

I think I may have just been talking about how moving quickly over the columns isn’t perfectly smooth.

If you stick with the hover state in the styles panel, you can decrease the transition which would speed up the time it takes for each card to reset. Another option is using a hover interaction instead however I haven’t tested the two side-by-side to see which is better.