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

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: https://brine-demo.squarespace.com/ How would you rewrite this script so it works despite the Ajax loading on the Brine template? Right now it only works if you refresh the page. <script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h3').css('cursor','pointer'); $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle(); $(".markdown-block .sqs-block-content h3").click(function() {$(this).nextUntil("h3").slideToggle();}); }); </script>
  2. Site URL: http://www.allkings.org We had been successfully using the code shared here in this tutorial: https://www.launchthedamnthing.com/blog/use-parallax-in-squarespace-71 Until last weekend, we hadn't made any changes to the site and suddenly the parallax is off, and the layers are overlapping. I've disabled the script for now, but wondering if there may have been an update to 7.1 that would have changed things? We're still on that same version, and the tutorial is there to match it, but the problem is there.
  3. 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!
  4. Site URL: https://sturgeon-tangerine-zyeb.squarespace.com/ Hi, I already have my CSS set up to display the Summary Block item title and description on rollover, but I'm now looking to add to that functionality. Is there any way to have the actual thumbnail image change on hover? I want to be able to not only display text on rollover, but replace the image as well. Site password is scdp2020
  5. Site URL: http://www.hidearvirgule.com Hello guys, I'm from France, may I ask for your help: I want to make a page where I can generate some random words/ pictures clicking on a button. Is that possible with javascript, and if so, how can I incorporate it in Squarespace page ? Thank you so much for reading me, have a good night Flo
  6. Using this method to upload a Javascript file But then, when I try to reference it from the Squarespace site, I get a CORS error: Access to script at 'https://static1.squarespace.com/static/57014b5b746fb963478e3d4f/t/5d7ba83d4e25b616833d896b/1568385085375/runtime-es2015.js' (redirected from 'https://brooke-meek.squarespace.com/s/runtime-es2015.js') from origin 'https://brooke-meek.squarespace.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Am I doing something wrong here?
  7. Site URL: https://www.theheadshotwizard.com/ I don't have an ecommerce store but would like to set up a referral / affiliate program to track leads who fill out a form. Tapfiliate looks good but need some help with the javascript coding intergration. Happy to pay someone - can anyone help me!
  8. Site URL: https://www.1831.co/account/login Does anyone know how I can remove the 'Create account' link from the Member Sign In window. (see screenshot). I see that it is Javascript, but dont know how to remove this text? Many thanks
  9. 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!
  10. 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!
  11. 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!
  12. 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!
  13. 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>
  14. Hey guys, I found the following article - https://css-tricks.com/website-escape/ and was wondering how I can add such a feature to my site, I do not know anything about code. Using the Brine template. Any help provided would be greatly appreciated!
  15. 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!
  16. 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
  17. 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?
  18. 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!
  19. 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!
  20. 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!
  21. 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.
  22. 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!
  23. 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/
  24. Site URL: https://www.betweenbox.com/shipping-cost/ I am trying to add a shipping rate calculator to my website - like the attached images and site. I would like to show a range of different carriers like... Royal Mail, FedEx, UPS, DHL I have been searching the internet for hours and have not got very far :( If anyone has any tips, it would be much appreciated. Thank you in advance!
  25. 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.
  • Create New...