Jump to content

Elements not clickable after header code injection

Recommended Posts

After I successfully added an animation to welcome people to my website's homepage, none of the elements/blocks are now clickable. This makes all my buttons/links/forms unusable. It's as if the animation (that takes up the entire display) "covers" the page because it doesn't leave or the animation really end.

I believe it has to do with my (header) code injection because once I removed it it functioned normally. What can I add to my code injection to make sure that it doesn't "cover" the screen and mess with the functionality of my page?

Here's what the code looks like:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<div class="splash-wrapper">
    <lottie-player src="https://lottie.host/0124cef3-989a-4925-8b3f-40be3ed4f0c0/8oz4X96cUm.json" background="transparent" speed="1.3" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
  <h2 style="color: #000000;">
    San Studio
  </h2>
</div>

<style>

.splash-wrapper {
  position: fixed;
  z-index: 9999;
  background-color: #f5f5f3;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  animation-name: fadeOut;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-delay: 3s;
}

@keyframes fadeOut {
   50% {opacity: 1;}
   100% {opacity: 0;} 
}
</style>

 

Edit:  This did not work!

Should I perhaps change the animation-fill-mode value from forwards to initial or none?

 

Thank you!

Edited by oddibledaisy
testing
Link to comment
  • 2 weeks later...
On 5/17/2023 at 11:15 AM, oddibledaisy said:

Hi @tuanphan, i removed the code injection timingly before you viewed it.. Can I show you what it looks like with the code? It is the code that messes up the functionality of my elements..

You can add the code, we can check easier.

If the site is live & you can't add it, you can duplicate the site and add there then share link to duplicated site

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/20/2023 at 11:32 AM, tuanphan said:

You can add the code, we can check easier.

If the site is live & you can't add it, you can duplicate the site and add there then share link to duplicated site

 

Hi again @tuanphan! I added the code injection again so you can see. again here is the code i used:

<div class="splash-wrapper">
    <lottie-player src="https://lottie.host/0124cef3-989a-4925-8b3f-40be3ed4f0c0/8oz4X96cUm.json" background="transparent" speed="1.3" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
  <h2 style="color: #000000;">
    San Studio
  </h2>
</div>

<style>

.splash-wrapper {
  position: fixed;
  z-index: 9999;
  background-color: #f5f5f3;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  animation-name: fadeOut;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-delay: 3s;
}

@keyframes fadeOut {
   50% {opacity: 1;}
   100% {opacity: 0;} 
}
</style>

 

Link to comment
On 5/25/2023 at 5:07 PM, tuanphan said:

Add this to Design > Custom CSS
 

#page section, #siteWrapper {
    z-index: 123456789 !important;
    position: relative;
}

 

Hi @tuanphan, first of all thank you for your time! really appreciate it!

I did as instructed and the intro animation no longer works but the elements are now clickable. 

I made sure to correctly add the code to Design > Custom CSS so not sure what the issue is now.

 

Link to comment
On 5/23/2023 at 6:23 PM, oddibledaisy said:

 

Hi again @tuanphan! I added the code injection again so you can see. again here is the code i used:

<div class="splash-wrapper">
    <lottie-player src="https://lottie.host/0124cef3-989a-4925-8b3f-40be3ed4f0c0/8oz4X96cUm.json" background="transparent" speed="1.3" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
  <h2 style="color: #000000;">
    San Studio
  </h2>
</div>

<style>

.splash-wrapper {
  position: fixed;
  z-index: 9999;
  background-color: #f5f5f3;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  animation-name: fadeOut;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-delay: 3s;
}

@keyframes fadeOut {
   50% {opacity: 1;}
   100% {opacity: 0;} 
}
</style>

 

Where did you get this code? I think the code should have a <script> code, not sure.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 6/3/2023 at 7:28 AM, tuanphan said:

Where did you get this code? I think the code should have a <script> code, not sure.

I used this as reference (code injection) and added smooth scroll (design > custom css)

Accidentally cut off the <script> part of the code when I quoted it earlier but here it is in full!

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<div class="splash-wrapper">
    <lottie-player src="https://lottie.host/0124cef3-989a-4925-8b3f-40be3ed4f0c0/8oz4X96cUm.json" background="transparent" speed="1.3" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
  <h2 style="color: #000000;">
    San Studio
  </h2>
</div>

<style>

.splash-wrapper {
  position: fixed;
  z-index: 9999;
  background-color: #f5f5f3;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  animation-name: fadeOut;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-delay: 3s;
}

@keyframes fadeOut {
   50% {opacity: 1;}
   100% {opacity: 0;} 
}
</style>

I'm unfamiliar with integrating loading page animations - this is my first time trying it out. Maybe there's a better way to integrate my animation? All I find online are Lottie player/file tutorials!

I think the issue is the animation doesn't actually "leave" the screen, that's why when I have it activated I can't click any of the elements. So perhaps I need to make adjustments to the animation fill-mode/duration/delay/ @keyframes fadeOut parts?

Link to comment
On 5/1/2023 at 11:10 AM, oddibledaisy said:

After I successfully added an animation to welcome people to my website's homepage, none of the elements/blocks are now clickable. This makes all my buttons/links/forms unusable. It's as if the animation (that takes up the entire display) "covers" the page because it doesn't leave or the animation really end.

You're right, this is exactly what is happening. The animation is covering the other page elements. This is because you've only used part of the solution from the YouTube video.

To explain in more detail, you've added the section of the code that adds the animation and then covers the entire viewport with that animation. Changing the opacity only makes it invisible - it doesn't remove the layer that is covering all the other elements. As you haven't added the last section of code, that removes the animation a few seconds later (the 'slideOut'), the animation remains there (albeit hidden) covering all your page elements and making them unclickable.

I don't recommend this as a permanent solution, but if you add pointer-events: none; to the .splash-wrapper this should demonstrate the issue by preventing clicks (and other pointer events) going to the animation layer.

.splash-wrapper {
  pointer-events: none;
}  

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 1 month later...
On 6/8/2023 at 4:44 PM, paul2009 said:

You're right, this is exactly what is happening. The animation is covering the other page elements. This is because you've only used part of the solution from the YouTube video.

To explain in more detail, you've added the section of the code that adds the animation and then covers the entire viewport with that animation. Changing the opacity only makes it invisible - it doesn't remove the layer that is covering all the other elements. As you haven't added the last section of code, that removes the animation a few seconds later (the 'slideOut'), the animation remains there (albeit hidden) covering all your page elements and making them unclickable.

I don't recommend this as a permanent solution, but if you add pointer-events: none; to the .splash-wrapper this should demonstrate the issue by preventing clicks (and other pointer events) going to the animation layer.

.splash-wrapper {
  pointer-events: none;
}  

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you for your assistance 🙂 I was guided to find the correct code with your guidance and @tuanphans.


I redid it:

/***************************************
Loading page animation
***************************************/

.loading-screen {
  animation: logofadeout 1s
  forwards 4.2s;
  background-color: #f7f7f2;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  z-index: 10000;
}

.loading-screen-image {
  background-image: url(https://static1.squarespace.com/static/641987523e92910d744d2eeb/t/64b3c546e8eac420690b78ff/1689503047222/loading+animation.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  height: 275px;
  left: 50%;
  right: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 187px;
}

@keyframes logofadeout
{
  0% {opacity: 1;}
  100% {opacity: 0; z-index:-20000
}
}

- no longer using 'lottie player' (changed to a new div, uploaded logo [to custom css] to be animated as a gif instead of a .json.) 

- elements are clickable, just had to adjust the z-index

- adjusted animation so it actually leaves the screen; i played around with some of the animation codes

Leaving this here for future reference, maybe it will help someone! You can view the website i finished here: https://www.sanstudioarchitecture.com/ 😁

A video that was extremely useful:

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.