Broke my site by adding javascript

Hello.  First time here on the forum. 

I looked through plenty of previous threads, but didn't find the answer to my specific challenge.

I built a site recently, and all was fine until today, when I added custom code to have a booking window open within the same frame.  It worked fine on the testing page,  but as soon as I added it to the other pages (confirmed clean/accurate copy and paste), it stopped working AND now I can no long add links within text fields. 

I've used the required <style></style>, and have tested by html in a w3schools.com test window.

Here is a link to the test page:  https://trout-lilac-h8f3.squarespace.com/home2.  The navigation works, so other pages can be visited.

Can anyone see what I've missed or done wrong?

Thanks, in advance. 

With JavaScript, you need to wrap in scrip tag <script> code here </script>

Can you share the code you used?

Thanks for your interest in helping, tuanphan.

 

<style><script>
function myFunction() {
  var myWindow = window.open("https://adventurecharters.zaui.net/modules/webBooking/index.php?id=1&action=Details", "", "width=800,height=600");
}
</script>
  
</style>

<style>
.buttonACICBS {
  background-color: #F7C413;
  border: none;
  color: black;
  padding: 25px 65px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 26px;
  font-weight: bold;
  margin: 4px 0px;
  cursor: pointer;
}
</style>
<div align="center" >
  
<button class="buttonACICBS" onclick="myFunction()">BOOK NOW</button>
</div>

<script>
function myFunction() {
  var myWindow = window.open("https://adventurecharters.zaui.net/modules/webBooking/index.php?id=1&action=Details", "", "width=800,height=600");
}
</script>
<style>
.buttonACICBS {
  background-color: #F7C413;
  border: none;
  color: black;
  padding: 25px 65px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 26px;
  font-weight: bold;
  margin: 4px 0px;
  cursor: pointer;
}
</style>
<div align="center" >
<button class="buttonACICBS" onclick="myFunction()">BOOK NOW</button>
</div>

With style & script, you can insert to Header Code Injection, however, with <div>...</div> you can't insert to Header. Use Footer Code Injection or Code Block.

I've got a similar problem – added a Javascript booking widget to a client's homepage, and the site width on that page only has cropped in at the sides. Can't seem to find a workaround, can anyone help?

The web page: https://www.gorsecottage.co.uk/

This is the code:

<script type="text/javascript" class="" src="https://cdn.lodgify.com/portable-search-bar/1.43.3/renderPortableSearchBar.js"></script>
<div><div id="lodgify-search-bar" data-website-id="326152" data-language-code="en" data-checkout-page-url="https://checkout.lodgify.com/gorsecottage/en/#/335012" data-dates-check-in-label="Arrival" data-dates-check-out-label="Departure" data-guests-counter-label="Guest" data-guests-input-singular-label="{{NumberOfGuests}} guest" data-guests-input-plural-label="{{NumberOfGuests}} guests" data-location-input-label="Location" data-search-button-label="Search" data-new-tab="true">
  </div>
  <style type="text/css">
  html {
    --lodgify-ui-action-color: #183f39;
    --lodgify-ui-action-darker-color: #13322e;
    --lodgify-ui-action-lighter-color: #a3b2b0;
    --lodgify-ui-action-contrast-color: #ffffff;
  }
  </style>
  </div>

On 7/8/2021 at 9:05 PM, scelawrence said:

I've got a similar problem – added a Javascript booking widget to a client's homepage, and the site width on that page only has cropped in at the sides. Can't seem to find a workaround, can anyone help?

The web page: https://www.gorsecottage.co.uk/

This is the code:

<script type="text/javascript" class="" src="https://cdn.lodgify.com/portable-search-bar/1.43.3/renderPortableSearchBar.js"></script>
<div><div id="lodgify-search-bar" data-website-id="326152" data-language-code="en" data-checkout-page-url="https://checkout.lodgify.com/gorsecottage/en/#/335012" data-dates-check-in-label="Arrival" data-dates-check-out-label="Departure" data-guests-counter-label="Guest" data-guests-input-singular-label="{{NumberOfGuests}} guest" data-guests-input-plural-label="{{NumberOfGuests}} guests" data-location-input-label="Location" data-search-button-label="Search" data-new-tab="true">
  </div>
  <style type="text/css">
  html {
    --lodgify-ui-action-color: #183f39;
    --lodgify-ui-action-darker-color: #13322e;
    --lodgify-ui-action-lighter-color: #a3b2b0;
    --lodgify-ui-action-contrast-color: #ffffff;
  }
  </style>
  </div>

Add to Design > Custom CSS

/* Fix Java code */
main#page {
    padding: 0 !important;
}

Having the same issue on my site. Added a typewriter animation that needed javascript. Now I can't edit sections on the homepage and images disappeared. Website is live.

https://www.redmaplecoaching.com/

2 hours ago, michael2019 said:

Added a typewriter animation that needed javascript. Now I can't edit sections

It sounds like the type code may be interfering with the editor. To test that you need to get into safe mode. Remove or disable the type code. Make a copy somewhere if needed.

When I looked at your site the type code seemed to be working from an outside perspective.

I see some images are not showing. I disabled the type code locally and that did not make the images appear. I think the type code is not preventing the images from loading. I looked at some of the image source URLs and they load outside of the site. So, it may be an issue with SS.

Let us know how it goes.

Thanks @creedon. I reached out to someone for help on this. Fluid engine seems glitchy when it comes to code blocks and javascript.