Jump to content

Code briefly showing before page loads

Recommended Posts

Hi.

On my client's website on the WORK page there is a line of code that appears for a second before the page loads (also happens on mobile). Weirdly the code that flashes up is actually being used to target the SERVICES page to keep the depth of the cards consistent and it's working fine.  I just don't know a) why it's showing at all   and b) why it would show on the WORK page and not the page that it's relevant to.   The code is in the Custom CSS along with all my other code that is working fine and not showing on any of the pages before loading. 

I've attached a screengrab of the line of code that appears briefly.  (you'll have to expand it to be able to read)

You should be able to see it if you load https://www.coco-comms.me/work

Thanks in advance for any tips to get rid of it!

 

Screenshot 2023-02-01 at 12.38.36.png

Link to comment

You have style code injected into the header but without any style (or other tags) around it, so it gets loaded as text. You'll want to locate and remove it (it's currently not doing anything) or place it within style tags if you do need it.

image.thumb.png.e4a36e3f247c817649b4f80dae93ffe3.png

Let me know if that works, and give me a thumbs up here if you can, thanks!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 3 weeks later...

Hi Ziggy, sorry for late response!  

Thanks very much for your suggestion, but I don't have any code injected into the header (in the Advanced > Code Injection section of Squarespace it is completely empty).  This is what is so strange.  I have several bits of CSS code in the Design> Custom CSS box but it's specifically only this line that is appearing when the WORK page loads.  It's doing the job of keeping the boxes on the Services page a consistent size, but even if I delete this line of code from Custom CSS it still shows up when loading the WORK page.  I just can't work it out -  it's almost like it's being pulled from somewhere else.  

Scratching my head...

Link to comment
4 minutes ago, Pinkers said:

Hi Ziggy, sorry for late response!  

Thanks very much for your suggestion, but I don't have any code injected into the header (in the Advanced > Code Injection section of Squarespace it is completely empty).  This is what is so strange.  I have several bits of CSS code in the Design> Custom CSS box but it's specifically only this line that is appearing when the WORK page loads.  It's doing the job of keeping the boxes on the Services page a consistent size, but even if I delete this line of code from Custom CSS it still shows up when loading the WORK page.  I just can't work it out -  it's almost like it's being pulled from somewhere else.  

Scratching my head...

Do you have code injection for that specific page?

Link to comment

The code that is showing is for the SERVICES page:

/* equal height of list cards SERVICES */
@media screen and (min-width:600px) {
.user-items-list-item-container[data-section-id="61df0ea5974d4f33fe32e432"] .list-item-content__description {
    min-height: 500px;
}
}

 

But weirdly that code loads when you go to the WORK page... https://www.coco-comms.me/work

You'll see it flash up before the page loads.

Link to comment

@Pinkers There is a header code injection for each page, found in the Page Settings -> Advanced, have you looked in there?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 11 months later...

I don't think he's saying that there isn't any injection code. He's saying the injection code is working perfectly, but that code flashes up for a brief moment.

I'm having exactly the same issue. My site is working fine but my injection code flashes up at the top of the screen briefly. It's driving me crazy and I can't find the fix. I don't want to remove the injection code or people can't jump back to the top.

Link to comment
2 minutes ago, RAW said:

I don't think he's saying that there isn't any injection code. He's saying the injection code is working perfectly, but that code flashes up for a brief moment.

I'm having exactly the same issue. My site is working fine but my injection code flashes up at the top of the screen briefly. It's driving me crazy and I can't find the fix. I don't want to remove the injection code or people can't jump back to the top.

Can you share your website URL? If the code is flashing up then it may not be wrapped in the correct tag and rendering as plain text.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Yes, it looks like you have style code that is not wrapped in style tags so it's not working how you want and rendering as plain text. All of that text should be wrapped like this:

<style>
#back-to-the-top{ position: fixed!important; bottom: 0!important; left: 0!important; z-index:1!important; opacity: 0.8; }
</style>

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
48 minutes ago, RAW said:

My mistake. Copied your code exactly and it fixed it.
Thanks so much for your help!

Happy to help

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 3 weeks later...

I have the exact same issue. I wanted the logo in the center and used a tutorial. The code is popping up briefly and I'm not sure where to insert the tags? I would also love black lines on either side of the logo and wish there was a way to style those is as well.

Here is the website:

https://www.thetrellisvenue.com/

Any help would be greatly appreciated.

Edited by StephanieWagner
Link to comment

Here's the code I used:

 

/* Change dropdown menu background */
.header-nav-folder-content {
   background: #5B614F !important;
}

/*
===================================
    SPLIT NAVIGATION STYLING
===================================
*/

@splitAfterItem: 3;
@actionSize: 20px; 
@logoSpacing: 3vw;

//Width at which nav will stack
@media screen and (min-width:1200px) {
  
//Dynamic Nav font size
#header .header-nav-item {
  font-size: clamp(8px,calc(~".6vw + 5px"),18px);
}

//Split Structure
#header .header-layout-branding-center-nav-center .header-display-desktop .header-title-nav-wrapper {
  display: grid;
grid-template-columns:1fr auto 1fr;
  .header-nav,.header-title {
    grid-row-start: 1;
  }
  .header-nav { margin-top: 0; }
  .header-nav-item a {
    opacity: 0;
    transform: none!important;
    transition: opacity .3s linear;
  }
  &.has-nav .header-nav-item a{opacity:1!important;}
.header-title{grid-column-start:2;}
@splitOne: @splitAfterItem + 1;
.header-nav:first-child .header-nav-list > div:nth-child(n +@{splitOne}) {display: none;}
.header-nav:not(:first-child) .header-nav-list > div:nth-child(-n +@{splitAfterItem}){display:none;}
//Left side nav
.header-nav:first-child {
  display: block;
  text-align: right;
  margin-right: @logoSpacing;
  .header-nav-list {
    justify-content: flex-end;
  }
}
//Right side nav
.header-nav:not(:first-child) {
  text-align: left;
  margin-left: @logoSpacing;
.header-nav-list{justify-content:flex-start;}
}}}
//Give nav more width
#header .header-layout-branding-center-nav-center .header-display-desktop {
  .header-title-nav-wrapper {
    flex: 0 0 calc(~"100% - @{actionSize} * 2");
  } 
.header-actions{
  width:@actionSize;
  flex: 0 1 @actionSize;
  max-width: @actionSize;
  }
  //hide left side nav when stacked
.header-nav:first-child {
  display: none;
}
}

/*
===================================
    end SPLIT NAVIGATION STYLING
===================================
*/

Link to comment
16 minutes ago, StephanieWagner said:

Here's the code I used:

You added all of this to Custom CSS?

The reason that you have code loading before the website is that some of the code in the header code injection is outside of the style tags.

Here's the corrected code for the header:

<style>
  .header-nav-folder-content {
    background: #5B614F !important;
  }
  /* Change dropdown menu background */
  .header-nav-folder-content {
    background: #6a692f !important;
  }
</style>

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Thank you! It still wants to throw an error? I was attempting to put the logo in the center of the header and split the menus. Then I wanted the drop down menu color to change once it was clicked. It there a tutorial that you know of that might can help? Again, thank you for your time. 

 

Link to comment

I can have a look tomorrow, but I find that split navigation on Squarespace 7.1 will always a problem until Squarespace adds it as an default option.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

You still have a portion of the style code (now repeated) outside the <style> tags in your headed. Delete the second instance of this:

/* Change dropdown menu background */
.header-nav-folder-content {
   background: #6a692f !important;
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
On 2/18/2023 at 5:14 PM, Pinkers said:

But weirdly that code loads when you go to the WORK page... https://www.coco-comms.me/work

This one has exactly the same problem. 

The problem here is that when you add styling to Custom CSS you can just type it is, but when you add it to Code Injection this is HTML and it MUST be wrapped in the correct tags so it is treated as the correct type of code, in this case custom styling.

So when you add any styling to Code Injection it MUST be in this form:

<style>

/* YOUR STYLING */

</style> 

Note the opening <style> tag before the styling code and the closing </style> tag after the styling.

(Please delete /* YOUR STYLING */)

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Please read through my previous message. This text is in your HEADER CODE INJECTION without style tags. It needs to be removed from the page or global HEADER CODE INJECTION.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
15 minutes ago, StephanieWagner said:

It's fixed! Thank you again and I hope you have a wonderful Thursday! 

Fantastic!

This website still has the problem on the work page, similarly, it should be found in the page settings Advanced -> Code Injection:

https://www.coco-comms.me/work

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.