Guest Posted November 14, 2019 Share Posted November 14, 2019 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
tuanphan Posted November 14, 2019 Share Posted November 14, 2019 With JavaScript, you need to wrap in scrip tag <script> code here </script> Can you share the code you used? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Guest Posted November 14, 2019 Share Posted November 14, 2019 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
tuanphan Posted November 15, 2019 Share Posted November 15, 2019 <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. Or send to forum message 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
scelawrence Posted July 8, 2021 Share Posted July 8, 2021 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
tuanphan Posted July 10, 2021 Share Posted July 10, 2021 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. Or send to forum message 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
michael2019 Posted January 24 Share Posted January 24 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/ Link to comment
creedon Posted January 24 Share Posted January 24 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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
michael2019 Posted January 25 Share Posted January 25 Thanks @creedon. I reached out to someone for help on this. Fluid engine seems glitchy when it comes to code blocks and javascript. creedon 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment