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

Search the Community

Showing results for tags 'code block'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Found 31 results

  1. Site URL: https://www.drneilkudler.com/questionnaire/ I am at my wits end with this form. I implemented this JotForm a few months ago and recently when patients come to the questionnaire page the form will pop up just for a second and disappear completely. When I go into edit mode there is a little "scripts disabled" warning at the bottom of the block. I've tried just using the iFrame with out the javacript coding. I've made sure that all of the web addresses in the form code start with https. I've followed just about every tutorial out there. Does anyone have any insight as to what is going on here? The address is: https://www.drneilkudler.com/questionnaire We're running on 7.1 so there is no way to change any Ajax settings. The code block itself is: <iframe id="JotFormIFrame-201435079579059" title="Pre-Visit Questionnaire" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://hipaa.jotform.com/201435079579059" frameborder="0" style=" min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-201435079579059"); if(window.location.href && window.location.href.indexOf("?") > -1) { var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } window.handleIFrameMessage = function(e) { if (typeof e.data === 'object') { return; } var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) { return; } switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; case "loadScript": var src = args[1]; if (args.length > 3) { src = args[1] + ':' + args[2]; } var script = document.createElement('script'); script.src = src; script.type = 'text/javascript'; document.body.appendChild(script); break; case "exitFullscreen": if (window.document.exitFullscreen) window.document.exitFullscreen(); else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen(); else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen(); else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen(); else if (window.document.msExitFullscreen) window.document.msExitFullscreen(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>
  2. Site URL: https://www.komschlies.com/sort-by-instrumentation Is there anyway to make items in a menu block clickable? (To be clear I'm talking about Squarespace's restaurant menu block, not site navigation) I'm not sure how one would access the code behind these... Or else is there a way to make a code block look and behave like a menu block so that I can add links? Here's an example of what I've done with a code block: https://www.komschlies.com/chronological-list but a menu block's clickable sections at the top would be perfect for what I'm trying to do on this other page.
  3. Site URL: https://oval-reindeer-llrk.squarespace.com/projects/project-two-g2haz When the window size decreases in height, the arrow becomes covered and the images starts to cutoff. On the other hand, when the window size increases, there's too many white space underneath the arrow. How am i able to fix this? Version 7.1 Website is Password Protected - Password: test
  4. Site URL: https://www.kylemillerbaritone.com/about Hi, I added a code block to customize my fonts within my text on the left side. However, that ruined the formatting for the whole page somehow. The picture and button on the button should be to the right of the text. I have edited it with spacers, but when I save, the photo and button relocate to the bottom of the code block. Please help
  5. I've started working with 7.1 and read through the Release Notes. Perhaps I'm overlooking something, but has the code block disappeared?
  6. Site URL: https://www.jeulianne.com/portfolio Hello everyone, I am a beginner at coding. In my website, I have multiple short clips that automatically play and loop; they basically act like gifs. I achieved this by using code blocks. There is also a link inserted in each block for viewers to redirect to the full video. This is an example of the code I have for one of my code blocks: <a href="link here" target="_blank"> <video class="video" width="100%" height="100%" autoplay loop playsinline> <source src="s/video.mp4" type="video/mp4"> <source src="s/video.webm" type="video/webm"> Sorry, your browser doesn't support HTML5 video. </video> <div class="overlay"> <div class="text"> <h3 class="text h3">The Secret Kingdom</h3> </div> </div> </a> In my Custom CSS, I added a hover effect for the code blocks, so viewers can hover their mouse cursor over the clips and click on them. I was able to achieve the black fade in and fade out transitions smoothly, but I can't seem to center the text properly. The position of the text appears differently in different devices. This is the code I have so far: /* ----- Block Hover ----- */ #block-yui_3_17_2_1_1589451992993_20908, #block-yui_3_17_2_1_1589450893966_20367, #block-yui_3_17_2_1_1589447618241_19753, #block-yui_3_17_2_1_1589447618241_20564, #block-yui_3_17_2_1_1589448047699_19059 { display: block; position: relative; width: auto; } #block-yui_3_17_2_1_1589451992993_20908 .video, #block-yui_3_17_2_1_1589450893966_20367 .video, #block-yui_3_17_2_1_1589447618241_19753 .video, #block-yui_3_17_2_1_1589447618241_20564 .video, #block-yui_3_17_2_1_1589448047699_19059 .video { width: 100%; height: 100%; } #block-yui_3_17_2_1_1589451992993_20908 .overlay, #block-yui_3_17_2_1_1589450893966_20367 .overlay, #block-yui_3_17_2_1_1589447618241_19753 .overlay, #block-yui_3_17_2_1_1589447618241_20564 .overlay, #block-yui_3_17_2_1_1589448047699_19059 .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; opacity: 0; transition: .3s ease; background-color: #000000; } #block-yui_3_17_2_1_1589451992993_20908:hover .overlay, #block-yui_3_17_2_1_1589450893966_20367:hover .overlay, #block-yui_3_17_2_1_1589447618241_19753:hover .overlay, #block-yui_3_17_2_1_1589447618241_20564:hover .overlay, #block-yui_3_17_2_1_1589448047699_19059:hover .overlay { opacity: 0.85; } #block-yui_3_17_2_1_1589451992993_20908 .text, #block-yui_3_17_2_1_1589450893966_20367 .text, #block-yui_3_17_2_1_1589447618241_19753 .text, #block-yui_3_17_2_1_1589447618241_20564 .text, #block-yui_3_17_2_1_1589448047699_19059 .text { position: absolute; padding-top: 50%; left: 50%; width: 100%; text-align: center; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #block-yui_3_17_2_1_1589451992993_20908 .text h3, #block-yui_3_17_2_1_1589450893966_20367 .text h3, #block-yui_3_17_2_1_1589447618241_19753 .text h3, #block-yui_3_17_2_1_1589447618241_20564 .text h3, #block-yui_3_17_2_1_1589448047699_19059 .text h3 { color: #FFFFFF; height: 100%; width: 100%; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; } I'd appreciate some help on how to fix this. Are there any ways I can improve my code too? Thank you in advance!
  7. Site URL: https://www.blankforces.com/allproducts/v2-titanium-edc-ink-pens-clip Hi Squarespace gurus! On my "product page" I have a "code block" that I've placed in the "additional info" section. The code in the code block is working but it is below all of the product info.... but I'd love to move it so that it is positioned right below the "product price" as indicated in the image below. Below is the code that I was trying to use. Thanks for any help! -Kevin --------------- This code is from Code Injection >Footer: <script> $(document).ready(function() { $('.product-description .code-block').insertAfter('.product-title'); }); </script> This code is from my custom CSS: .ProductItem-description .code-block { order: 4; }
  8. Site URL: https://www.alceasurrogacy.com/surrogate-process I'm trying to add anchor tags to this page, but I'm having issues with the couple of different ways I'm doing it. Page is in progress. Any fix out there? I can rework the page to have either option on all sections. 1. On the page now - trying to add a hidden code block to have the list word link to section below. Unfortunately, the code block creates a huge space that makes everything uneven. See attached file for space under "What to Expect" instead of having it perfectly centered. 2. I also tried incorporating the header text into the code (<h2 id="pregnancy">Pregnancy</h2>) - this works, but the anchor text link then takes me to the section below, not the header text I'm including the anchor text in.
  9. Hello, I am integrating a Kajabi form for email sign ups on my clients site but I've run into some issues with the code interferring with not showing the banner image behind for some reason. I am self taught when it comes to code and usually can work these things out but I'm struggling - Please could someone highlight to me where in the following code would be causing an issue with the banner image showing? I have troubleshooted all other issues with SS help and can confirm it is something in this code but I can't work it out! Please help: <center><form data-parsley-validate="true" data-kjb-disable-on-submit="true" action="https://erin.mykajabi.com/forms/417612/form_submissions" accept-charset="UTF-8" method="post" novalidate=""><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="Abz6lo/YY6KyQOCSVf6Y7nJFDa0ZdI9622ksCm/s7ddlLpaX8xDBCgMCZpw9M041Rdi8pcwSGOEmH0DZgSNnhg=="> <style id="form-embed-style" type="text/css"> #kajabi-form .kajabi-form__btn { color: #000000; background-color: #2b2b2b !important; } </style> <div class="kajabi-form__content"> </div> <fieldset> <div class="text-field kajabi-form__form-item"><input type="text" name="form_submission[name]" id="form_submission_name" value="" required="required" placeholder="Name" data-parsley-id="7396"><ul class="parsley-errors-list" id="parsley-id-7396"></ul></div> <div class="email-field kajabi-form__form-item"><input required="required" placeholder="Email" data-parsley-remote="true" data-parsley-remote-validator="kjb_email_validator" type="email" name="form_submission" id="form_submission_email" data-parsley-id="4081"><ul class="parsley-errors-list" id="parsley-id-4081"></ul></div> <button class="kajabi-form__btn kajabi-form__btn--block-mobile" type="submit">Join the community!</button> </fieldset> </div> </form></center>
  10. Site URL: https://sparkotechengineering.squarespace.com/ I need help on how to put padding on this code block under Our company > Licenses. Still a beginner in coding. You can suggest a better code so i can study it. I Appreciate your understanding to help. password: customer123
  11. I have this portion of the page that looks amazing on desktop, but once i view the mobile version, it's messed up. desktop version: mobile version: i use code block for the icons (icons from Font Awesome) while and text for the text. an example of my font code is : <i class="fas fa-street-view fa-4x"></i> im trying to change and make my icon and text inline, so that for mobile version an icon + text will be on 1 line. i am new to coding and thus i try: <i class="fas fa-street-view fa-4x"></i><h3>18years old and above</h3> but the icon and text are on different lines... how can i code it so that it will look like this on mobile too? align to left but the icon and text should align horizontally too..
  12. Site URL: https://smilodon-hawk-zklr.squarespace.com Hi Is there a way to reduce the padding within a code block (or any block for that matter)? As you can see in the image, the location icon and the text is too far apart, yet I can't drag the code block any smaller. I've hunted for code to use, but can't find anything for html (which is how I inserted this icon). Thanks Kelly
  13. Site URL: https://www.globalpeoplesolutions.co.uk Hi, I've added a code block to a page and I'm struggling to get this to work exactly as it should - could anyone help, please? I borrowed a snippet from this site (https://sf.digital/squarespace/client-login-pages), with the idea being that visitors to this section of the website could "log in" using a short code that then takes them to a specific URL. That part is working fine, however there is another issue. The page is https://www.globalpeoplesolutions.co.uk/login Expected behaviour is as follows: 1. User enters the code 'abcde' into the input field. 2. If fewer than 5 characters are entered, a red text label appears under the input saying "Code is not long enough". When 5 characters are entered, the text turns green and says "Code is the correct length". 3. When the code = 5 characters, the button below is activated (i.e. no longer greyed out) and can be clicked. The problem I'm having is that this doesn't seem to be working UNTIL a user visits the page and then refreshes it. After the page refresh, both the text labels and the button activation work as they should. I'm not sure what action the page refresh is having, and why this doesn't work for users on their first visit. NB: after refreshing the page, the text labels and button activations will always remain as they should, until you load from a new browser or in Incognitio mode etc. Does anyone know what the code is missing to fix this? Thanks! The full code I've entered into the code block is as follows: <div id="submitCodeWrapper"> <input id="event-code-input" type="text" maxlength="5" class="box" autofocus /> <input id="event-code-submit" class="myButton" type="submit" value="Submit" disabled="disabled"> <div id="feedback"></div> </div> <script> var eventCode = document.getElementById("event-code-input"); var codeSubmit = document.getElementById("event-code-submit"); eventCode.addEventListener("keyup", function () { if (eventCode.value.length < 5) { feedback.style.color = "red"; feedback.textContent = 'Code is not long enough'; codeSubmit.disabled = true; } else if (eventCode.value.length = 5) { feedback.style.color = "green"; feedback.textContent = 'Code is the correct length'; codeSubmit.disabled = false; } }); codeSubmit.addEventListener("click", function () { location.href = '/' + eventCode.value; return false; }); </script> <style> .myButton { height:53px; margin-left:10px; width: 145px; padding: 10px; background-color: #00a87b; color: #fff; border-radius: 4px; border: 0; letter-spacing: 1px; color: #fff; } #event-code-input { height:48px; font-size: 20px; padding-left:10px; } #feedback { margin-top: 10px; color:red; } </style>
  14. Site URL: https://suzan-terzian-draft.squarespace.com/homepage-content Hi everyone, Having some trouble with the spacing between code blocks for my client's side below: https://suzan-terzian-draft.squarespace.com/homepage-content If you scroll down to the 2nd image block, you'll notice there are 3 different sets of additional text headings which i created using code blocks (h4, h5 & h6 headings), entitled "4th type of text heading...", "5th type text heading..." etc. But you'll also notice there's a huge spacing between these 3 code blocks as well as the "Learn More" button at the bottom. How do I reduce & adjust this huge spacing between these 3 separate code blocks and the "Learn More" button? Template used is Brine & version is Squarespace 7.0
  15. Site URL: https://demo-61w23.squarespace.com/config/pages Hi All, I've created a building graphic and have each floor set as its own rollover image using code blocks. It works perfectly however there needs to be absolutely no vertical space between the code blocks in order for it to look like a single image. Right now, there is a small amount of space that is showing up between each floor and ruing the effect, how can I get rid of it?? Currently I am using this bit of css which helps a bit but not completely. I tried also setting the padding to " 0 0 0 0 " as well as adding "margin: 0 !important" without any luck. .code-block { padding: 0 !important; } https://demo-61w23.squarespace.com/config/pages the site password is: demo61w23
  16. Site URL: http://www.camberwellarts.org.uk/test123 Hi, I'm looking to remove the top/bottom padding on code blocks to create a seamless shape but can't seem to figure this out. Have inserted the following code below but the padding is still there on the top/bottom. https:// www.camberwellarts.org.uk/test123 .code-block { padding: 0 !important; } Thanks!
  17. Hey, I'm setting up a website, and I use code blocks for some features I can't build on the platform. For instance I found a gallery that works better on mobile, so I want to use that. It works fine with one, but when I insert two on the same page, they somehow conflict with each other, so only one works. The same thing happens, when I use two very different code blocks, something in one of them seems to conflict with the other one. Any good pieces of advice for how to handle this? Maybe rename some identical elements there might be across the blocks, so names become unique? Other tips?
  18. Site URL: https://www.bucksreferees.com/honours Hi, I'm using code blocks above sections on pages of my website to create anchors, so I can have a page navigation section at the top. However, the code blocks have a physical size that I can't seem to change, leaving an ugly gap between each section. I found a tutorial when I started the site months ago to change some of the template's padding, and I was wondering if there was a way to do the same for code blocks? If I wanted to add space I'd use a spacer! Many thanks in advance.
  19. Site URL: http://lemastersfitness.com My client brought to my attention that the drop-down/accordions on his 'Get Coached' page had stopped working (dropping down). When I went to edit the site, I noticed that the usual 'Embedded Scripts' warning was not present over that code block. I opened up the block, reviewed the code (which hadn't changed), and then saved it just to be sure - and the warning rendered. I opened a private browser window to verify that it had indeed fixed the issue on the live site, and it did - but then as soon as I close the squarespace editor and asked him to confirm it for me, he noted that it had stopped working again (which I then confirmed in my own private browser window). This is changed behavior; I can't say specifically as of when, since I'm sure he doesn't click those accordions on a regular basis, but I can say it worked fine as of 6 months ago when I finished that page for him. The best I can tell, it seems like SS is not recognizing or running the script in the code block - except when i'm in edit mode, which is when it shouldn't run it. I can provide screenshots/capture videos if helpful. I did do some searching before posting, but most of what I saw relative to broken Javascript was related to the newer AJAX functionality, which I disabled just to be sure, but wasn't the issue. Is this a bug in SS platform? Or am I missing something?
  20. Site URL: http://prideatthedragon.com/newsletter Is there a way to reference the existing template's CSS sheet in a code block? If you check my link there, I have added a Mailchimp campaign archive via code block, but the style is super plain. There are other blocks I would like to add to the site that I also need to mimic the site's style without me having to go through and customize each element in the block. How can this be done? For context: I am not skilled in coding. I understand basic concepts and can usually follow syntax, but I don't know enough to write or customize beyond changing a font/color.
  21. hi everyone.. working on a fundraising site for covid-19 relief.. trying to embed a contribution form via code block but the height is limited, forcing one to scroll to see full form... I also tried putting the code into a squarespace embed block. I tried putting entire embed code i was give, including script, into a squarespace code block. I tried putting entire embed code i was given, including script, into a squarespace embed block. I tried injecting script into site-wide head as well as page specific head. I identified block ID and tried CSS injection to change height of block. Nothing works. Anyway you can help? Thanks in advance!
  22. Site URL: https://oldworlddeli.net/ Hello, I need some assistance adding an "Order Online" button to my website. The screenshot shows the two preferred areas to place the button. I have the HTML from Toast but I'm not sure how to enable it in those locations. Any help is much appreciated. Thank you
  23. Site URL: https://seahorse-soybean-ygpf.squarespace.com/ I'm an experienced developer, new to SquareSpace. I'm trying to insert a custom HTML block into a page but there is nothing like "Code" or "Custom HTML" in the list of sections I can add to a page. I'm on the $30/mo Basic Commerce plan. I do see places to add custom code to header and footer - but I need to add custom HTML within the page itself. I've looked at webinars and such but they all look completely different than the UI that I'm given, I'm not sure if they were created with a different version(?) One YouTube video mentioned a "developer mode" under Advanced, but I don't have this on mine.
  24. Site URL: https://www.orlandohomescans.com/residential Hello - trying to figure out how to get the virtual tour video shown in the second snippet to go full width. The first snippet shows the code and the width is set to 100% and the second snippet shows the code block the full width of the page, yet the virtual tour will not expand width wise. It expands height wise if I adjust the height value in the code, but that doesn't seem to work with the width. Unfortunately I don't know code so any help in layman's terms is greatly appreciated :).
  25. Site URL: https://docs.sellfy.com/article/132-how-to-customize-buy-now-buttons-for-my-website#customize_embed_code_to_have_custom_button Sellfy provides code for a “Buy Now” button. There are also instructions that you can use to have an image act as your Buy Now button. That is what I am trying to do. See below for Sellfy instructions. I uploaded my image to My Custom Files. I added my Product Key and my image URL to their code and put that new code in a code block. It doesn’t work. Is that CSS below Squarespace-compatible? Any suggestions? Thank you for any and all responses. From Sellfy: Custom button or image Here's an example of how your button and code may look like with custom class. In the code below, the link to the button image is https://example.com/images/button.png, which is just an illustration of what the image link can be. You can generate such a link for your custom buttons by uploading the button image onto a server. You may also use a reliable online button generator that will produce such a link for you. <a href="https://sellfy.com/p/[PRODUCT-KEY]/" id="[PRODUCT-KEY]" class="sellfy-buy-button sellfy-buy-button-custom"><img src="https://example.com/images/button.png"></a> <script src="https://sellfy.com/js/api_buttons.js"></script> Cut and pasted from: https://docs.sellfy.com/article/132-how-to-customize-buy-now-buttons-for-my-website#customize_embed_code_to_have_custom_button
  • Create New...