Jump to content

Search the Community

Showing results for tags 'javascript'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • Resources
  • 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
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. I assume you'd need some sorta javascript code to achieve this. If anyone knows the right code, please let me know. Thank you.
  2. Hi everyone, I've been trying to add a counter to one specific page but it isn't working. This is the codepen style, I'm interested on: https://codepen.io/syedrafeeq/pen/OJyLXw If possible, I'd prefer to have the HTML + CSS + Java in just one code to imbed it directly into the page location, instead of having them in separate locations. After custom it, this is what I managed to modify the code into (see image). Thank you, in advance!
  3. I'd like to remove "2023" from the time metadata on the summary block pictured below. password for page is teamreview. I'm sure it's possible with removing characters from the string w/ javascript but that's a bit beyond my capability. Maybe there's another method as well - CSS soluteion not possible as far as I can tell. Thanks in advance for any help you can offer!
  4. pw:hausofibe I am wanting to achieve something like this. I can add the border using ( .sqs-lightbox-padder img ) as a CSS selector. Is there an attr I could select for this to append a button element to this?
  5. Got lightbox anything plugin and works well with CSS but not for javascript. When I press on link on live site the lightbox appears but nothing is in the box. I have also tried a external URl and same thing happens there. Please help! I put an example on website below: www.elevatesportsventures.com/f1-java
  6. Site URL: https://forthegood.org/mapbox-test Hello: We are a nonprofit organization that has recently begun learning Mapbox in order to create a clickable map that shows the locations of our programs and new schools in rural Kenya. We have created a basic map and successfully embedded it into a Code block in Squarespace with iFrames using the code Mapbox provided- you can view that page here. We now hope to add interactivity to the map so that when you click on the location of a school, you see a pop up that shares the name of the school and a description and link to another extended page of information. Mapbox provides an excellent tutorial on this: https://docs.mapbox.com/help/tutorials/add-points-pt-3/. We are now working to understand how to 1: Place our own Kenyan Schools Map Style into the code to replace the Chicago map example & 2: Embed this code into the map page on our Squarespace site. The process we used for our original map without Pop-ups - i.e.-embedding via the iFrames- will not support the Javascript, so it is necessary to embed the complete code. When we insert the code provided by Mapbox's "Chicago Parks" example into a Code block on our test page, we don't see anything. We are able to successfully embed it into the Page Header Code Injection under the "Settings" > "Advanced" > "Page Header Code Injection", but then we see it in the Header and Footer section (see attached screenshot) instead of in a Code block in the body section where we want it. The code that we used, provided by Mapbox for this example, is below my signature. We'd be so grateful to anyone who has experience with successfully embedding an interactive map from Mapbox into a specific page on their Squarespace site and would be willing to share the exact steps here. We are photojournalists and designers, well familiar with Squarespace but only slightly familiar with HTML and Javascript- though always eager to learn. Thanks so very much! Kind regards Kate MAPBOX CODE- CHICAGO MAPS POP UP POINTS EXAMPLE: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Demo: Add points to a web map</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet" /> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <div id="map"></div> <script> mapboxgl.accessToken = 'pk.eyJ1Ijoia2F0ZWJsYWNrIiwiYSI6ImNrcjVyenZwazFiY3kyd3BkM2IxdmlubzYifQ.ocj6I03cHMQdA_rLB9GRqw'; const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/examples/cjgiiz9ck002j2ss5zur1vjji', center: [-87.661557, 41.893748], zoom: 10.7 }); map.on('click', (event) => { const features = map.queryRenderedFeatures(event.point, { layers: ['chicago-parks'] }); if (!features.length) { return; } const feature = features[0]; const popup = new mapboxgl.Popup({ offset: [0, -15] }) .setLngLat(feature.geometry.coordinates) .setHTML( `<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p>` ) .addTo(map); }); </script> </body> </html>
  7. Hey I'm trying this neat little dot cursor effect to work on my site and I'm not sure where to start? I love this cursor because its super simple and fits the minimal design of the sight I'm working on but I cannot figure out how to get it to work properly. I keep getting the following ERROR: error evaluating function `rgba`: color functions take numbers as parameters Here is the link to the code. Any help would be greatly appreciated. 🙂
  8. Hi!Hope you doing great , can you help me to hide this order tab through css or javascript? Site link is https://parsnip-leopard-5lrh.squarespace.com/account I tried css but it couldn't work. Thanks!
  9. Im using turn.js in an iframe to host ebooks on my site but its not loading the book on iOS or bluestacks when i look at the mobile version. Any insight would be greatly appreciated. Thanks.
  10. I ran my site through websitegrader to check its performance and one metric it got a 5/10 was security with this description: SECURE JAVASCRIPT LIBRARIES I'm not feeling safe here. Intruders can exploit outdated JavaScript libraries. Using the latest version of each library and updating it regularly will help keep you safe. However, I there is no javascript in the Settings -> Advanced -> Code Injection, header, footer lock page etc. Is there another Library I can update?
  11. Site URL: https://www.philipmarksart.com I am an artist interested in selling my paintings (originals and prints) online. Shipping for each piece is heavily dependent on the customer address and so must be calculated manually for each order. Thus i cannot use a standard store. When I have reviewed an online order, I will manually use paypal to send the customer the invoice, so my website does not have to handle any money. I would like to create a form from which a customer can request an invoice for purchase of chosen works. When a client submits the form they must immediately receive an automatic email confirmation containing all the information about the order, and I must be notified of the request. Through experimentation and research I believe I have found an integration of the products Squarespace, Zapier, and Airtable can be used to implement this functionality. If i use a contact form provided by these products I have found that I can get this concept to work. However, for various reasons, I also want the form fields showing on my squarespace website to be manipulated by squarespace javascript, and to use the javescript to process and populate the fields during customer interaction, prior to submitting the form. If I try to use any of the product's provided contact forms or a squarespace form block I do not have programmatic access to the form fields, and so I have opted to build a form from scratch inside a squarespace code block. I have coded a form (see snapshot attached) and got the javascript to work with it. The form doesn't seem to be recognized by squarespace as a contact form. At the very least I need to determine the value of the "action" attribute of the form, and there may be other things which I do not know. I hypothesize that if squarespace recognizes the form as a contact form then zapier will be able to access it and transfer the information in the fields to Airtable which I have shown will send the confirmation email to the customer. Thanks. pjmsr
  12. Hello, I want to use this code on my website's homepage. https://codepen.io/kseniacold/pen/QKNKow Not sure where to paste the various HTML, CSS & JS codes. Thanks for any help!
  13. Is there any way to reduce the spacing of a hard return after a heading? Is there also a way to reduce the size of empty space between paragraphs when you use a double hard return? Squarespace has implemented some super frustrating code that creates a massive space after every hard return / paragraph break. Is there anyway to turn this off, or alter the code to only apply after a double hard return, like standard word editors? It's seriously impacting readability in text heavy areas like Blogs or Policy pages, that need paragraph headers to outline ideas or visually break up the content.
  14. I put a code block in the footer that uses a javascript function to automatically update the year in my copyright line of text. The code works perfectly, and I used the following css to resize the code block to the same height as the other text fields on that row. /*footer copyright sizing*/ #block-yui_3_17_2_1_1674572709417_110386 { max-height:1rem } The row of text (that includes the code block) is intended to be at the very bottom of the page footer, but because the code block contains the javascript disclaimer about not being able to run while in edit mode, I cannot remove all the excess rows from the bottom of the footer. Beneath the row where I want my footer to end, there are 8 rows I cannot remove. I tried setting a max footer height via CSS, but it cuts off the footer content from the top, not the bottom. How can I fix this to reduce the excess empty space at the base of my footer from the code block? Thanks!
  15. Hi all, I have created trial content that is public (about half of a full article) as a teaser for site visitors. If they like the content, they can sign up and get access to the full articles. However, if someone has purchased a subscription and happens to visit a public page that links to the trial guide, they will be taken there instead of to the full guide that they purchased. Of course, they can still get to the full guide by visiting the member area--either by typing in the URL for the member area page or clicking on a link in the member navigation. I think this is a little confusing for members, so I'm wondering if I could create a script to query the Profiles API and check if a user is signed in and has purchased a subscription. Then if they clicked on a page that leads to a trial guide, and they are both signed in and have purchased a subscription, they would be redirected to the member area. First off, I'm wondering if this is possible and secondly, how I might go about achieving the querying of the Profiles API. Any tips would be much appreciated!
  16. 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.
  17. Hi, For some reason I haven't been able to edit the "Login" window in any way, even with the !important tags. I haven't had any problems editing the other pages in CSS, but this one doesn't cooperate with me. Not sure if it's locked or if it's something I'm doing wrong. This is what I've written, I have tested multiple variations of this: //Login/Registration //Window .Dialog-container-uCx0n { background-color: #080808 !important; } //Title .Dialog-container-uCx0n h1 { color: #FFF !important; } //Sign in button .Button-container-BtFfe { background-color: #FFF !important; color: #000000 !important; } //Bottom text .Dialog-container-uCx0n footer a { color: #FFF !important; } //Input fields .Input-container-1PpPx input { font-family: 'Clarkson', 'Proxima Nova', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; color: #FFF !important; background-color: #000000 !important; } //Hide header "login button" .user-accounts-link.loaded .user-accounts-text-link { display: none; } Thank you!
  18. Hi everyone, I am looking for a way to get some digital products in my store to be 'Free' instead of viewing $0.00. The word free is very powerful in ecommerce, so I'm a little taken aback as to why you would ever want to display '0.00' for an item, other than the obvious fact of it's more to code. Would it be best to use a Javascript code-injection which changes all instances of $0 set in price to the string 'Free'?
  19. I may be trying to achieve the impossible but I've created a hover portfolio collection page and am now trying to inject that page section across several other standard pages using javascript. The portfolio collection is named Portfolio Categories and I'm inputting a code block on the other pages with <div class="categories-section"></div> to load in the portfolio collection. But it's not loading correctly. It's obviously partially working because I see the code, but it's not displaying properly so not sure where I am going wrong? I'm definitely not a javascript expert but was really hoping I could get this working. <script type="application/javascript"> $(function() { $('.categories-section').load('/portfolio-categories .portfolio-hover',function(){ window.Squarespace.initializeLayoutBlocks(Y); }); }); </script> If anyone has any input would greatly appreciate some guidance! Site is https://designauthentic.squarespace.com/ and password is designauthentic
  20. I received a email from Google saying there are duplicate pages on my site. I found I have two homepages: https://www.sheepshuttle.com/homepage and https://www.sheepshuttle.com/ I would like to only have this one appearing in the sitemap file and Google Index https://www.sheepshuttle.com/ However the other one appears in the sitemap.xml file. Any help is appreciated. Thanks
  21. I'm wonder if its possible to set a character limit for summary block thumbnails? We're having titles running off the blocks in some places. We've set the character size to small, but am wondering theres any code to limit what displays on the summary
  22. Site URL: https://sparrowstartup.com/ CONTEXT: I've been using https://pagespeed.web.dev/ to find ways to speed up my website. There's been multiple Javascript files which are unused (according to that site). Removing them will speed up load times on mobile/desktop for my website: https://sparrowstartup.com/ If you run my website on that testing site, it'll tell you some scripts should be removed, as shown in the picture attached. Doing so, would help my website load faster on mobile and desktop. THE ASK: (1) Can you please recommend how I can do so? My current score is low, I want to be above 70. Any honest, detailed tips would be very much appreciated. (2) Based on the report from that site, Is there anything else other than removing javascript, that can help me speed up the website? CC: @tuanphan @bangank36 @creedon | THANK YOU!
  23. I have added isotope to the website and it seems to sort items fine. However it has resized all of the shop items and the shop page now looks terrible! Any tips how to make the grid items all the correct size again? I have tried setting custom css on .grid-item but it did not make the image scale back to the correct size. I have also tried some isotop settings but to no avail. I have removed isotope for now. This is what it looks like with isotope: This is the code I added to the shop page to initialise isotope (the actual sorting script is left out for simplicity: //Isotope integration into Es site.Try 2 <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script> <script> var elem; var iso; window.onload = function(){ elem = document.querySelector('.list-grid'); iso = new Isotope( elem, { //options percentPosition: true, itemSelector: '.grid-item', layoutMode: 'fitRows', containerStyle: null, resize: false, fitRows: { equalheight: true, gutter: 30 }, getSortData: { name: '.grid-title', price: '.product-price' } }); } </script>
  24. I have found this great feature I would love to use in my site http://codepen.io/ace/pen/BqEer. I have added the HTML and CSS and the pictures line up on top of each other (http://taberphotography.co.uk/test) but I don't understand what to do with the JS code. Any thoughts would be much appreciated. Thanks.
  25. I am trying to add the following code to have my vet widget on my website and nothing I do works. I have gone into the advanced area and added this code to the footer of the code injection area and it is not working. <script> (function (v, e, t, s) { e.televet = e.televet || { id: v }; var o = t.createElement('script'); o.async = true; o.src = 'https://connect.televet.com/shim.js'; var r = t.getElementsByTagName('script')[0]; r.parentNode.insertBefore(o, r); })('ckgzwmmxp05sj0711dbfpnlcg', window, document); </script>
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.