Streaming live at 10am (PST)

[Resolved] Close button is MIA


#1

My 1st webflow site went live this evening and it it is about 85-90% complete. I need to add some pictures but that won't take much time. When you click on a player image in the roster section, you will see his bio. I can't figure out how to get the page to scroll to the top of the roster section when the close button is clicked. Can someone help me with this?
Live site can be viewed here.
The public link to preview inside Webflow can be viewed here.
I appreciate the help folks.


#2

You need to link to the Section White ID, so link to "roster". But problem is you can't assign a link to a tab-link, and you can't put a link inside. Solution: delete your last tab-link. Create a link block to put you close button inside and place it using position:absolute. Affect your close interaction to it and set its link to in-page section "roster"


#3

@vincent Thanks for the reply. I tried this and it hid the container and scrolled back to the "roster" anchor. But...when I click one of the boy's pictures, the close button appears and scrolls down the page until ends up in its position on the bio card. Can you help me fix this? Appreciate the help.


#4

I have changed from the original tabbed layout and placed each player bio into a separate DIV. For the life of me though I can not get a few things to work as I want.:
1. The close button to show when a player photo is clicked.
2. The close button to close a bio once it has been viewed.
3. Fade out the current bio and fade in a new bio if a thumbnail is clicked.
Public link is here.
Live site is here. Can someone please walk me through what I am doing wrong? Many thanks.


#5

Alright, I figured this out with a bit of trial and error and a little help from Google.
1. I used a link block with the close button as the background graphic and placed it inside the the DIV that I wanted it to hide.
2. I assigned the class "close-link" to the link block and added a bit of custom code to close the parent DIV when the close button was clicked. The custom code is below (between script tags of course):
3. Thumbnail needs to link directly to the item to be viewed instead of the DIV that holds the item.

Custom Code
$('.close-link').on("click", function () {
$(this).parent('div').hide();
});


#6