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

Search the Community

Showing results for tags 'javascript'.

  • 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
    • Selling & Scheduling Your Services
    • 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
  • 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. Site URL: http://www.blackbookbar.com Hi. My site (www.blackbookbar.com) uses CSS to add leader dots between the menu items and prices. To make the menu easier for my client to update, I'd like to use Squarespace's built-in Menu Block feature rather than custom code blocks, but I want to keep the look of the leader dots. I assume this can be done with a combination of scripting and css but it is well above my knowledge level. Any ideas on how to achieve this? Thanks in advance for any help!
  2. Hey y'all! I've reached the point where I'm very comfortable with my CSS knowledge, but feel limited with my broken understanding of the script languages. I've studied a bit of info off of w3schools, but I am looking for recommendations for any resources or courses that do a thorough job of explaining java/jquery - and then understanding how to apply it in a context such as SS. TIA!
  3. Hey y'all - very new to jquery here. I found this jquery posted on Stack Overflow on how to redirect the user to a new page once they have scrolled to the bottom of the original page with the following code: $(window).scroll(function() { if ($(window).scrollTop() + $(window).height() == $(document).height()) window.location = "page2.html"; }); However, I'd like the function to delay for about 2 seconds so the transition isn't so jarring. I've tried to implement setTimeout, but still don't have a solid grasp on jQuery syntax/language to figure it out. Would love any help, thank you!
  4. Just discovered the new auto-layout option in headlines to create a rotating banner with text - yay!! From what I can tell right now - it has to be clicked to change...hoping someone can help me have it auto-play/auto-scroll/loop? Maybe it's a an option but I'm just not seeing it? Thanks!
  5. Site URL: https://www.gorsecottage.co.uk/ Today I added a Javascript booking widget to a client's homepage, and the site width on that page only has cropped in at the sides. Any page without the widget on is fine, so it's clearly interfering with the layout somehow. The background on the cropped section has also defaulted to a green from the site palette (white would have been less of an issue!) When I messed around with it, it seems to be the first part of the code inside the <script> tags which is bugging it. Can't seem to find a workaround since it's an interference rather than a setting, 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>
  6. Site URL: http://www.cherrytreeinteriordesign.com I have a js code that animates the header on all but my mobile pages. The code is as follows: <script> if (document.documentElement.clientWidth <740) { window.location = "/mobile"; } </script> <script> (function(){ window.addEventListener('load', function() { var headerElements = document.querySelectorAll('header a') function fadeIn(element, time, delay) { var keyframes = {opacity: [0,1]}; var timing = { duration: time, fill: 'both', easing: 'ease', delay: delay }; element.animate(keyframes, timing) } function animateElements(element,animation,time,delay) { element.forEach((item,index) => { var delays = index*delay; item.style.display = 'inline-block'; animation(item,time,delays) }) }; //Call animateElements function and set your timing and delay. animateElements(headerElements,fadeIn,2000,300); }) })() </script> I also have css animation for text that pops up on the home screen. I have it basically timed out to pop up when the header animation is complete, but depending on the load it is sometimes a bit off. (You can see it on my homepage on a desktop). I'm not sure if there is a way to point the css animation code to begin when the js code animation starts. The css code is here: .fade-in-text { display: inline-block; font-family: FuturaPT, Helvetica, sans-serif; font-weight: 800; letter-spacing: 0.4em; text-align: center; font-size: 6em; color: white; opacity: 0; animation: fadeIn linear 300ms; animation-delay: 5650ms; -webkit-animation: fadeIn linear 300ms; -webkit-animation-delay: 5650ms; -webkit-animation-fill-mode: forwards; -moz-animation: fadeIn linear 300ms; -moz-animation-delay: 5650ms; -moz-animation-fill-mode: forwards; -o-animation: fadeIn linear 300ms; -o-animation-delay: 5650ms; -o-animation-fill-mode: forwards; -ms-animation: fadeIn linear 300ms; -ms-animation-delay: 5650ms; -ms-animation-fill-mode: forwards; } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-moz-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-o-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-ms-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } Anyone have any idea how to do this? Thanks!
  7. Site URL: https://danedits.co.uk/ Hello Everyone, The navigation menu / header appears different on pages when compared to my homepage - despite telling the squarespace edit tool otherwise. HOMEPAGE https://danedits.co.uk/ OTHER PAGE https://danedits.co.uk/my-work. By default, according to Squarespace edit tool, my header should be transparent until scroll then it turns black. This works on my homepage but the colour are different on other pages. Does anyone know why this is happening? Should I target the header on that specific page and style in using CSS? If so, does anyone know the code? Dan
  8. Site URL: https://bulldog-circle-xzyr.squarespace.com/locations I'm trying to make the map on this particular page to be full width and no padding. I've seen several people and websites provide code on how to do it but I can't get it to work. I know it's something to do with CSS. Any tips?
  9. I think this has been asked before but I can't find a definitive answer. By default, the category tag on events pages is appearing at the bottom of posts, under the editable content. I've been asked if I can move it to sit with the date and time, just below the post title. Would this be possible without diving into developer mode? Thanks!
  10. Site URL: http://www.cherrytreeinteriordesign.com Hi! I'm trying to make loading pages that will load a random image each time. The code I have so far is code I pulled from elsewhere (here) and tweaked - see below: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="logoload"></div> <style> .logoload { /* SET BACKGROUND COLOR */ background-color: #E6E4E8; /* SET BACKGROUND SIZE */ background-size: 500px; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-position: center; background-repeat: no-repeat; background-image: url("https://static1.squarespace.com/static/5eebcfe57f948c024906fe27/t/60ebd829c22c005c9356a5d4/1626069033592/home-page-loading-screen.jpg/"); } </style> <script type="text/javascript"> $(window).load(function() { $(".logoload").delay(500).fadeOut("slow"); }) </script> That code does work for a single image, but I don't know how to modify it to do what I want. I'd like the background image to randomize to be one of several images I have. Any ideas how I do this? Please be gentle - I am below newbie status when it comes to coding, so explain like I don't know anything (because I don't). Thanks in advance!
  11. Site URL: http://www.cherrytreeinteriordesign.com Hi all, I have added a javascript animation to my header, but I need to disable it on mobile devices because it just makes the menu not appear. The code in question is below: <script> (function(){ window.addEventListener('load', function() { var headerElements = document.querySelectorAll('header a') function fadeIn(element, time, delay) { var keyframes = {opacity: [0,1]}; var timing = { duration: time, fill: 'both', easing: 'ease', delay: delay }; element.animate(keyframes, timing) } function animateElements(element,animation,time,delay) { element.forEach((item,index) => { var delays = index*delay; item.style.display = 'inline-block'; animation(item,time,delays) }) }; //Call animateElements function and set your timing and delay. animateElements(headerElements,fadeIn,2000,300); }) })() </script> I'm also wondering if there is a way to disable it if someone happens to have a device without javascript, or how that works. Thank you!
  12. 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.
  13. Site URL: https://www.cybernetictech.ca/ Hello, I have an announcements/news section under 'Press Release' on the homepage that contains links and all of the information had to be inserted manually. I'm wondering if anyone knows of a way to make it dynamic so the information is being updated automatically. Thanks!
  14. I have a unique need as I build a site for a shelter for abuse victims. They want their site to have a "quick exit button" which a person can click at any time if an abuser walks into the room to quickly exit the site (probably leading to Google). But the shelter is also in a remote area with slow internet, so there is going to be a 2-5 second delay or more while the page redirects. I'm trying to come up with a solution that would instantly turn the whole page blank/white on button click to hide it while the site redirects. Any ideas out there? Here is an example of the kind of "quick exit button" my client wants: https://www.safv.org/
  15. I am able to change the options on product variant drop downs using javascript. But the price is not changing according to the selected options. Any help is appreciated. Thanks.
  16. Site URL: https://www.thesecrettreehouse.com Hi, I'd like to randomize a slideshow on my homepage in 7.1. Site: thesecrettreehouse.com Password: treehouse The artwork will eventually be by different artists, and I'd like to give each one equal air time. The order doesn't need to be random, just the starting image, although either is fine. Thanks!
  17. Hi folks, wondering if anyone can help. I'm trying to use javascript to add some custom code to a filtered view of events on squarespace (so a filtered view of a category). (what i'm trying to do eventually is to add in some extra links above the "filtering by" text. ) I thought i'd do an initial test to see if I could get some code applied to the page (i.e just changing the background colour of the block). But it seems like something is happening when I try to apply the code to this page. My code is super simple (see below)... <script> const filteredView = document.querySelectorAll("div.sqs-events-collection-list") filteredView.style.backgroundColor = '#000000' </script> However, when I check the console, everything I try to set just keeps coming up as "undefined". Does anyone know if there's something that blocks scripts on category pages? or perhaps there's something i'm missing! i've tried adding the script to both the footer and header injection... any help or advice appreciated!
  18. Site URL: https://www.ssteart.com I have created a back to top button on my site using this code: While it works great in pretty much every way I found that when moving to another page the button is already there as soon as the new page loads (it should appear while scrolling down). If I start scrolling down and then up it starts behaving normally, but I would like to fix it so that when loading a page the button doesn't show up unless I scroll down a bit. Would that be possible? Thank you.
  19. Site URL: https://dearmarionforeveryours.squarespace.com/home/vantage-point I'm trying to figure out how to have the blog post's featured image or featured thumbnail show as an image at the top of the individual blog post. Is that possible? I see it as an option on some templates but not on the Rally template. Any help is appreciated. Thanks
  20. Site URL: https://feelkindred.com Hello, I've embedded forms and products from Kartra into my site via javascript in a code block (on each page listed in the header/menu). The problem is they only properly load if the page is refreshed. Any suggestions on how to resolve this? I can't get support from Squarespace or Kartra, since it's an integration between the two. Thanks in advance for any ideas!
  21. Does Squarespace allow you to utilize three.js? And if so, are there any resources out there specifically detailing the best practices and pitfalls of doing so? I made a quick portfolio website via template and I would like to be able to build on it instead of starting from scratch. Thanks. Three.js - https://threejs.org/ Portfolio examples I'd like to emulate - https://cineshader.com/ https://go.pioneer.com/cornrevolution
  22. There are several approaches to realize a multilingual site in Squarespace.All of the existing solutions have drawbacks. In the answer, you will find a solution for localization of squarespace sites without drawbacks. 1) Official Squarespace Solution Does not work on all templates. Structural limitation - you only have one navigation level left perlanguage. Language selector menu not very nice. 2) Using multiple squarespace sites with language subdomains You have to pay the Squarespace fee per language3) Using external localization services like localize.js oder bablic.com You have to pay for external services. There are additional resources that have to be downloaded Does SEO work well on these solutions? Did not investigate this. 4) Javascript based on CSS Selectors and page IDs Unflexible when adding pages, JS has to be adapted and grows
  23. Site URL: https://bat-bagpipe-7bbz.squarespace.com/?password=demo hey, have a look at this awesome awesome menu for the brine template. have anyone try to recreate this? https://bat-bagpipe-7bbz.squarespace.com/?password=demo looks so stunning 🙂 have a nice day! sarah
  24. I started a new thread here for the following post. Although it is related. It is a different question.
  25. I've set up a website where content is sold through Amazon Affiliate links. I have set up Amazon OneLink to enable me to sell in US, Canada and UK where the user will be sent to their local Amazon store upon clicking my links. I embedded the javascript below into my Squarespace footer (Settings; Advanced; Code Injection; Footer) as instructed on both the Amazon and Squarespace websites but everyone still only sees the US Amazon store. I've contacted Amazon and they've confirmed that everything looks set up fine from their end. Any idea what I should be doing on the Squarespace side to make this work? I'm signed up as a Business customer on an annual contract, based in US. www.winterplaybook.com <div id="amzn-assoc-ad-8435f65a-7439-47fb-bb97-5bf6a677d528"></div><script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=8435f65a-7439-47fb-bb97-5bf6a677d528"></script> Anyone else had the same issue?
  • Create New...