Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Broke my site by adding javascript


Gypsychick

Question

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. 

Link to comment
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

5 answers to this question

Recommended Posts

  • 0

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>

Link to comment
  • 0
<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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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>

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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