hilary

Worked beautifully! Thank you! Enjoy your coffee 😉

Hi Lesum!

THANKS SO MUCH for the help, the solution worked beautifully!

Can you help me with one more thing on the header nav? I only want the underline hover animation to take place on the dropdown links, not the pages within the dropdown. I'd really appreciate if you could help me pinpoint what I'm doing wrong in my CSS? 

Thank you!

https://www.mobilesipsco.com
 

There you go! TIA for any help you can offer.

Hi! I'd love to have my header nav match my footer nav with some dropdown words being in italics (see screenshot of footer for clarity.) Is this possible? 

Yes, ideally "this image" will be hyperlinked in an email. When clicked on in the email it will open my website, to an image from my site in a lightbox where the user can then opt to close out the window (X) and continue to peruse the site.

In other words, I want to be able to direct them to a specific image on my page (a page that has multiple image blocks) and give them the option to continue to look through my website by having that image open in a lightbox.

Right now, this is what I have: this image. And this is the page it's pulling from: https://www.hkportfolio.com/extracurriculars. 

I'd like to link directly to an image block already opened in a lightbox. Is this possible? If so, how do it do it?

For reference: In an email I'd like to be able to say "refer to this image" and have "this image" hyperlinked to the exact image already opened in a lightbox. They can then 'x' out the lightbox and peruse the sight as necessary. 

Does Squarespace Circle have any kind of gallery or showcase where we can share cool code snippits we've employed on our own sites? Like if we adapted something from CodePen to our own site how can I share it with people so they can use it?

Thanks for getting back to me! Bummer...yeah I asked "that-AI-tool-that-shall-not-be-named" and it gave me the following JS, it didn't seem too bad, but you'd have to have access to the Squarespace stylesheet to make it work and I can't figure out how to export that either. Oh well, nice idea!

<style>
body, html {
  height: 100%;
  margin: 0;
  overflow: hidden; /* Prevents scrollbars */
}

.content, .duplicate-content {
  position: absolute; /* Absolute positioning to stack them */
  width: 100%;
}

.content {
  top: 0;
}

.duplicate-content {
  top: 100%; /* Starts below the original content */
}
</style>

<script>
let content = document.querySelector('.content');
let duplicateContent = document.querySelector('.duplicate-content');

function appendDuplicateContent() {
  // Clone the original content
  let clonedContent = content.cloneNode(true);
  // Append the cloned content to the duplicate content container
  duplicateContent.appendChild(clonedContent);
}

// Initially append a duplicate of the content
appendDuplicateContent();

window.addEventListener('scroll', function() {
  const contentHeight = content.offsetHeight;
  const scrollPosition = window.innerHeight + window.scrollY;

  if (scrollPosition >= contentHeight) {
    // When scrolled to the end, append another duplicate
    appendDuplicateContent();
  }
});
</script>

Hi!

I'm trying to make my homepage scroll endlessly, cycling through the content. Meaning when the user gets to the end of the page content (the bottom) the content from the beginning fills in and essentially the page never stops filling with content...if that makes sense. If not, here is a great example of what I'm talking about: https://ryanstrzok.com/. 

This is my site: hkportfolio.com

Again, I only want this on my homepage no other pages on the site. Any help is greatly appreciated!

@creedon Hmm, ok I tried it both ways - with one image block and then multiple and neither worked for me.

This did though: 🤷‍♀️

#block-yui_3_17_2_1_1681922577794_33752:hover,
#block-63648473c063af264f4f85f1:hover {filter: drop-shadow(0.15rem 0.15rem 0.04rem rgba(0, 0, 0, 0.5))
}

I think my question is along these lines, if it's not please point me in the right direction...

I'd like a drop shadow filter added when the various images are hovered over, but the images are placed sporadically throughout the site. I've tried listing the block IDs, separated by commas, but it doesn't work. Do I have to list the :hover animation separately for each image or can I just list it once and if so, how do I do so?

Here's what I have:
#block-03cb185697cf6cef5ae8:hover {filter: drop-shadow(0.3rem 0.3rem 0.1rem rgba(0, 0, 0, 0.5))
}

On 3/6/2022 at 2:05 PM, creedon said:

Not easily if at all. Let me explain. I tried just simply rotating a accordion block. It rotated and seemed to function as far as toggling open/close state. That means the code that drives that part of the effect wasn't broken. What was broken was all the spacing and smooth open/close effect.

Here we see a normal accordion block.

Now here is that block rotated.

 

As you can see it doesn't function properly visually. I assume that is because the visual effect elements were designed to function in the vertical plane not horizontally.

Could the visual effect part of the accordion block be altered to function horizontally? Perhaps.

But with all the fiddling about you may be better off finding a piece of code that was designed to work how you want from the beginning. If you did go with altering an accordion block there is a good chance it would break when SS made changes to the structure of the block.

Was anyone able to find a solution for this - turning an accordion on its side/ horizontal accordion? I know you helped with a similar question here https://forum.squarespace.com/topic/214225-slide-tabs-code/. I've searched the forum and maybe I'm not using the correct search terms, but I can't find anything on it.