How to prevent code injection from breaking site?

Hi there, 

I have an issue with one of my sites: 

https://tlcdesign-hillarydemo.squarespace.com/?password=demo

I used code injection to install a plugin but using this script breaks the site, I am unable to edit without using safe mode because it causes the "add section" button to either disappear completely or become misaligned and unclickable (see screenshot). I'm perfectly ok with using safe mode, however, I sell this site as a template and its a bit inconvenient and confusing for inexperienced clients to work with, and I feel its a bit unprofessional for me to tell them to do that so this is hurting my business.

Is there any other solution to this? I would like to keep the sticky effect.

Thank you

Code used:

<style>
@media screen and (min-width: 768px) {
#header {
  position: sticky;
  top: 0;
  display: none;
  z-index: 4000 !important;
  width: 100vw;
}
main .page-section:first-child + #header {
  display: block;
}
main .page-section:first-child {
  min-height: calc(94vh - 93px)!important;
}
}
</style>

<script> 
document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:first-child');
    firstSection.after(header);
});
</script>

We can disable code in edit mode without using safe mode.

You want to disable CSS code (<style> code) or script code (<script>)?

On 5/12/2023 at 8:57 AM, tuanphan said:

We can disable code in edit mode without using safe mode.

You want to disable CSS code (<style> code) or script code (<script>)?

Ok great, how do I do that?

I would like to disable the following script in edit mode without using safe mode because I think that is what is causing the issue.

<script> 
document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:first-child');
    firstSection.after(header);
});
</script>

On 5/15/2023 at 3:29 PM, TLCDesigns said:

Ok great, how do I do that?

I would like to disable the following script in edit mode without using safe mode because I think that is what is causing the issue.

 

<script> 
document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:first-child');
    firstSection.after(header);
});
</script>

First, create a .js file with name: header.js and paste this code into js file (You can use Notepad++ or Notepad to do this)

document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:first-child');
    firstSection.after(header);
});

Next, upload header.js to your Squarespace

Next, use this code into Code Injection

<script>
	document.addEventListener('DOMContentLoaded', function() {
      if ( window.location == window.parent.location ) {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = '/s/header.js';    

          document.getElementsByTagName('head')[0].appendChild(script);
      } else {
          console.log('iframe');
      }
  });
</script>

On 5/19/2023 at 2:22 PM, tuanphan said:

First, create a .js file with name: header.js and paste this code into js file (You can use Notepad++ or Notepad to do this)

document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:first-child');
    firstSection.after(header);
});

Next, upload header.js to your Squarespace

Next, use this code into Code Injection

<script>
	document.addEventListener('DOMContentLoaded', function() {
      if ( window.location == window.parent.location ) {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = '/s/header.js';    

          document.getElementsByTagName('head')[0].appendChild(script);
      } else {
          console.log('iframe');
      }
  });
</script>

 

I tried this solution but it didnt work unfortunately 

On 6/8/2023 at 12:58 AM, TLCDesigns said:

I tried this solution but it didnt work unfortunately 

Can you take a screenshot of js file & code you added to Code Injection?

On 6/9/2023 at 5:59 AM, tuanphan said:

Can you take a screenshot of js file & code you added to Code Injection?

Yes , please find attached.

Thanks
 

On 10/20/2023 at 10:24 PM, TLCDesigns said:

Yes , please find attached.

Thanks
 

Your file is Header.js (H is uppercase)

but my code is /s/header.js (h is lowercase)

1 hour ago, tuanphan said:

Your file is Header.js (H is uppercase)

but my code is /s/header.js (h is lowercase)

Ahh - I changed it to lower case but it still didn't work.

Also I need to remove the original script ? If i remove it the design effect is gone

On 10/23/2023 at 5:15 PM, TLCDesigns said:

 

Ahh - I changed it to lower case but it still didn't work.

Also I need to remove the original script ? If i remove it the design effect is gone

Can you check file again? I tried access header.js but it doesn't exist

https://tlcdesign-hillarydemo.squarespace.com/s/header.js

On 10/27/2023 at 2:10 AM, tuanphan said:

Can you check file again? I tried access header.js but it doesn't exist

https://tlcdesign-hillarydemo.squarespace.com/s/header.js

 

Hmm that's strange, I just double checked and the file has been uploaded.

 

@tuanphan

If you still need help, try this code

<script>
// If the current page isn't in an iframe then run the code
if (window.top === window.self) {
    var script = document.createElement('script');
    script.src = '/s/header.js'; // Replace with your script's URL
    document.head.appendChild(script);
} 
</script>

You can't run JavaScript by including it as a link in a text block.

You need to use a code block and put a proper script tag with src attribute.