Jump to content

Code injection breaking page

Recommended Posts

Site URL: https://mustard-antelope-r3yf.squarespace.com/

<div class="splash-wrapper">
  <img src="https://static1.squarespace.com/static/61d6d4735161ce457e0d2347/t/61e13e9917cc384fe1633c75/1642151578200/intro.gif" width="100" height="auto"/>
</div>
<style>
  header.Header.Header--top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
  div#jb--job-board {
    margin-top: 133.5px;
}
</style>
<style>
 .splash-wrapper {
  position: fixed;
  z-index: 9999;
  background-color: #ffffff;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  animation-name: slideOut;
  animation-fill-mode: forwards;

}

@keyframes .splash-wrapper {
    100%   { opacity: 0; }
	50%   { opacity: 0; }
  0% { opacity: 1; }
}

</style>

This is the code that I want to inject into the header so there is the animated gif when loading  pages. However when I run this it does let me edit the page and doesn't allow you you navigate the navigation bar. THE Animation is to long and im not sure how to fix it 

PASSWORD : 123

Edited by ThomasHanley
Link to comment
  • Replies 6
  • Views 306
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

28 minutes ago, ThomasHanley said:

Site URL: https://mustard-antelope-r3yf.squarespace.com/

<div class="splash-wrapper">
  <img src="https://static1.squarespace.com/static/61d6d4735161ce457e0d2347/t/61e13e9917cc384fe1633c75/1642151578200/intro.gif" width="100" height="auto"/>
</div>
<style>
  header.Header.Header--top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
  div#jb--job-board {
    margin-top: 133.5px;
}
</style>
<style>
 .splash-wrapper {
  position: fixed;
  z-index: 9999;
  background-color: #ffffff;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  animation-name: slideOut;
  animation-fill-mode: forwards;

}

@keyframes .splash-wrapper {
    100%   { opacity: 0; }
	50%   { opacity: 0; }
  0% { opacity: 1; }
}

</style>

This is the code that I want to inject into the header so there is the animated gif when loading  pages. However when I run this it does let me edit the page and doesn't allow you you navigate the navigation bar. THE Animation is to long and im not sure how to fix it 

PASSWORD : 123

Try changing the z-index in this code

image.thumb.png.8c4938db63fe154c975f483d92b00eff.png

to 

z-index: 0;

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
5 minutes ago, bangank36 said:

Try changing the z-index in this code

image.thumb.png.8c4938db63fe154c975f483d92b00eff.png

to 

z-index: 0;

Let me know how it works on your site

I changed the z-index to 0 and it still doesn't allow for me to interact with the webpage.

Link to comment
5 minutes ago, ThomasHanley said:

I changed the z-index to 0 and it still doesn't allow for me to interact with the webpage.

It 's still 9999

image.thumb.png.f275fadb0384361abdb57f18806e11a4.png

Have you saved your setting yet?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
2 hours ago, bangank36 said:

It 's still 9999

image.thumb.png.f275fadb0384361abdb57f18806e11a4.png

Have you saved your setting yet?

this fixed it 
 

<div class="splash-wrapper">
  <img src="https://static1.squarespace.com/static/61d6d4735161ce457e0d2347/t/61e13e9917cc384fe1633c75/1642151578200/intro.gif" width="300" height="auto"/>
    
</div>

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

@keyframes slideOut{
  from{margin-left: 0vw; opacity: 1;}
  to{opacity: 0; margin-left: -150vw;}
}
</style>

if i had to guess the way i had it was setting the opacity to 0 but wasnt disabling it when it hit 0 opacity. So i have to have it going off to the side unless they is a way to disable keyframes animation when it hits 0 opacity?

Link to comment
22 minutes ago, ThomasHanley said:

this fixed it 
 

<div class="splash-wrapper">
  <img src="https://static1.squarespace.com/static/61d6d4735161ce457e0d2347/t/61e13e9917cc384fe1633c75/1642151578200/intro.gif" width="300" height="auto"/>
    
</div>

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

@keyframes slideOut{
  from{margin-left: 0vw; opacity: 1;}
  to{opacity: 0; margin-left: -150vw;}
}
</style>

if i had to guess the way i had it was setting the opacity to 0 but wasnt disabling it when it hit 0 opacity. So i have to have it going off to the side unless they is a way to disable keyframes animation when it hits 0 opacity?

It looks like you figured it out, doesn't it?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.