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
  • 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, 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, 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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, 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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, 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.