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

Search the Community

Showing results for tags 'javascript'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location

Found 115 results

  1. What’s up everyone, I was wondering if anyone in the community would know how to implement a “lazy load” or “Ajax load” so that images load when they’re appeared instead of right when the page loads. I think https://grovemade.com looks super cool, I think they’re using JavaScript to load a super small version of their images then adding a CSS blur so the perceived load time is a lot faster. Can this be done with a Squarespace template?
  2. Hi, I have a Nuevo template website with 3 parallax images. I am trying to add custom JS to dymanically resize said parallax images. The code is tested and works when injected into the Chrome / Firefox console yet whenever I try to compile it in my Local Development environment, there is no change to the image size. The js is stored in the Scripts folder as a separate file containing the following code: document.onload = (function () { const resizeImgs = () => { let imgs = document.querySelectorAll('.Parallax-item > .Index-page-image > img'); let div = document.querySelector('.row'); for (i = 0; i < imgs.length; ++i) { console.log("Sup Dawg"); let oW = imgs[i].style.width.substring(0, imgs[i].style.width.length - 2); let oH = imgs[i].style.height.substring(0, imgs[i].style.height.length - 2); let oT = imgs[i].style.top.substring(0, imgs[i].style.top.length - 2); let ratio = oH / oW; imgs[i].style.width = `${div.offsetWidth}px`; imgs[i].style.height = `${div.offsetWidth * ratio}px`; let diffH = oH / (div.offsetWidth * ratio); imgs[i].style.top = `${oT * 0.8 / diffH}px`; imgs[i].style.left = `${(window.innerWidth - div.offsetWidth) / 2}px`; } } resizeImgs(); let doit; window.onresize = function () { clearTimeout(doit); doit = setTimeout(resizeImgs, 100); }; })(); It is then called in the end of the site.region's body via: <squarespace:script src="img-resize.js" combo="false" /> I placed this right after the template's other JS call: <squarespace:script src="site-bundle.js" combo="false" /> I can see the script running in debugging but it makes no effect on the images I want to change. Please let me know if you have any ideas on why this might be happening. Been struggling to make it work for the last two days and relatively new to squarespace so any help would be fantastic! Ev
  3. Hi all. I'm building a website for a non-profit club and in that website, I would like to add a timeline of their history. I have managed to generate a lovely, interactive timeline for them through TimelineJS using Javascript. Obviously in the trial version of the website, I am able to test it out, embedding it with an <iframe></iframe> tag. However, for a couple of reasons, the Personal plan is the only one they are going to be able to use, which means although I can add custom code, including HTML and CSS, I am unable to add the TimelineJS timeline to the site, which is a shame. I believe I could create a timeline manually in HTML and CSS alone. It wouldn't be as interactive though, since instead of pop-ups and clickable features, it would basically just be an image that is too large for the screen horizontally, that you have to scroll through. My question is, is this the best way to add a 'sort-of' timeline feature to a Personal website? I obviously don't want to damage the site in any way/cause any issues by adding too much custom code. Can anyone suggest a better way of adding some sort of a timeline to a Personal website? I am very much open to suggestions. Thanks!
  4. Im trying to do some javascript operations on a customType text input. I've got customContent.services like so: service_1:https://link_to_service.one|service_2:https://link_to_service.two I've writtena small js function to split this string and create an array of javascript objects like so: [ { service: service_1, link: https://link_to_service.two }, { service: service_2, link: https://link_to_service.two } ] Now I would like to take this array and render it using json-t (or any other simple method). Problem is, I can't seem to add this to the current context {@} to make it usable with {.repeated section} I've tried stuff along the lines of: {.var @links myJsFuncToCreateObjArray()} {.repeated section links} create links for each object.. {.end} in fact {.var @someKey func()} seem to work at all, and won't let me do {.section someKey}, I can't even get .var directive to work at all - what am I missing, and how can I append my objects to the current json context (@) to make them possible to use in my repeated sections? Very thankful for any help with this.
  5. Hi there, I'm working with a Summary Block of a Gallery of team photos on a clients site. I want the Lightbox effect, but I don't want it to only show the content on hover. I'd like the image to justify left and text to sit right of the image. Does anyone know how to make this happen by injecting CSS? Thanks!
  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. I can open map on a button click in Javascript, but I need to be able to open a map with a gps coordinates that change what I would like is to open a map block with these new coordinates. If that is not possible set the button code to open the map also with these new coordinates. <html> <body> <p id="demo"></p> <form> <label><b>message1</b></label> <input type="text" name="message" id="msg1"> <label><b>Number</b></label> <input type="text" name="message" id="msg2"> </form> <input type="submit" onclick="showInput();"><br/> <input type="button" onclick="location.href='http://maps.apple.com/?daddr='+'result[0][2]';" value="Apple Maps" /> // or googlemaps is fine too </body> <script> function showInput() { // Do some stuff that changes the coordinates var lat= 41.4837; var lng = -72.876; // Here i would like to set the lat lng of the maps block and insert it to my webpage or open the map above to these new coordinates so when the user clicks it goes to this address. }
  8. I'm trying to create a 'download your free copy...' form for a PDF, with a 'Download' button that both stores the data in a Google spreadsheet (done) and downloads the document. I can add a simple download link in the post-submit HTML, but this is an extra click for the user and potentially confusing after they've already clicked 'Download'. So, I'd like the PDF to be automatically downloaded when the form is submitted. I've tried adding some Javascript, e.g. as per this thread, but nothing has worked. Is there some way to achieve this? Thanks!
  9. 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?
  10. I want to setup a javascript page on my website where I have a xml file that has a name comment and gps coordinates. The user types in the name and and it searches the xml file and spits out the comment and coordinates. My main question is where can I upload file for my page to search and how( what path do I use to read it in)
  11. I have a simple xml file that has 2 tags <Name> and <Comment> I would like to read it in then when the user searches the name it spits out the comment. I am stuck on how to read in the xml file could someone give me an example on how to do this please
  12. Hi I'm a Squarespace noob. 1. The objective: to populate a Squarespace page with data/html from a backend system, using Ajax. 2. Testing javascript: I've created a Code Block on a page, and added some simple, vanilla javascript: <div id="displayDiv"></div> <script type="javascript"> document.getElementById("displayDiv").innerHTML ="<h2>Omkara's lab block</h2>"; </script> 3. As expected I get a "Embedded scripts" for the block and are asked to "view in safe mode" 4. Once I enter safe preview mode I am (as expected) told to log out and view the page However, once logged out I can not view the page as the site is in development and hence not published! What am I missing here? Also, if anyone knows of other waya to include data from another system without using Ajax (which may cause issues), it would be cool to know about them Yours Omkara
  13. Right now I am making a website for someone and they want a very specific design. They have a number of product pages and on the homepage they want a little gallery block that shows several of the most popular ones. But in this gallery block they want a blurb of whats on the product page, as well as a button that takes you to it. They also want the other featured pages to be displayed off to the right. I am attaching an image of what I mean, I realize that it may require a lot of CSS and javascript but does anyone know how they would go about approaching something like this?
  14. Hi, I am currently incorporating a background video through iframe by pulling the video through URL. I want to just display background video with an mp4 fie that is on the site already rather than grab it as a url. I am not sure how to add this mp4 file on squarespace and call it through. I want to try to just use the mp4 through video tag.
  15. Hi Is there any way to be able to edit a product using my own javascript so that the product image (or preview) changes according to the users choices, and then send that data to the checkout form fields. I hope that makes sense. Basically, I want to sell personalised images. But I want the user to be able to choose all the different parts of the image (and colours). As they are doing this, I want the preview to update automatically with their choices. Then, when they click on the checkout button, I would like all the personalised data to pre populate the correct field in the checkout. Thank you in advance for any help with this
  16. I've got a problem with the recent update to the link editor. I used to have three links in my navigation bar to trigger JavaScripts which connected to LocalizeJS to switch the language on my website. The link was a simple/common script like this: javascript:Localize.setLanguage('en') Before the update to the link editor, I was able to add a link like the one above. But recently, one of the button is not working so I decided to remove it and recreate a new link but when I try to add the javascript bit to the link editor now, it pop up an error message saying "Links must be formatted as www.example.com or example.com" which I've not seen this before the update. Is there anyway that I can add a javascript to the link editor again or any other ways for me to trigger the function? Thanks in advance!
  17. Is there a separate javascript code that I can run to active squarespace analytics and the activity protocol? I need to deactivate the squarespace analytics and the activity protocol cookies until the website visitor accepts the data privacy. I cannot use the build-in cookie banner from squarespace as I need to use a more flexible cookie banner script that allows to suppress other cookies as well. Thus, I have deactivated "squarespace analytics" and "activity protocol" by default to be gdpr compliant. I implemented the manual cookie banner script from cookiebot.com which allows to embed and run a js script after consent is given. This is why I am looking for a separate js script to activate "squarespace analytics" and "activity protocol". What I tried: I added a code injection in <head>-tag to change the value of "isRestrictiveCookiePolicyEnabled" (which I think is responsible for activating squarespace analytics) from true to false but apparently this does not seem to work: <script data-name="static-context">Static = window.Static || {}; Static.SQUARESPACE_CONTEXT = {,"cookieSettings":{"isCookieBannerEnabled":false,"isRestrictiveCookiePolicyEnabled":false,"isRestrictiveCookiePolicyAbsolute":false,"cookieBannerText":"<p>Bannertext</p>","cookieBannerTheme":"DARK","cookieBannerVariant":"BAR","cookieBannerPosition":"BOTTOM","cookieBannerCtaVariant":"TEXT","cookieBannerCtaText":"OK"}};</script> I think I am missing something. Maybe there is also another possibility? Would be happy to get help here.
  18. Hi, I am writing JavaScript code in the footer and was trying to change css opacity as you scroll down with the onscroll function. I wanted to know how I could access the CSS from there.
  19. First of all I know this question's been asked before, the answer wasn't solving my problem so I'd like to ask it again here: I'm using the code blocks to create more customized slideshows. I need more than one slideshow on my page and the second one stops the first one from working. The slideshow is here but clicking the arrows won't do anything. I slightly understand what the problem is but can't fix it. Here is the link to the page which contains 2 slideshows (the code of each slideshow is working as expected when there's only one slideshow).
  20. Hi All, I have put in a code and it pops up saying 'this block contains embedded scripts. Embedded scripts are disabled while you're logged in and editing your site.' (See screenshot attached) So I have logged out and looked at the website and it shows nothing. The code I have been given is: <script type="text/javascript"> (function (i, s, o, g, r, a, m) { i['SBSyncroBoxParam'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', 'https://cdn.simplebooking.it/search-box-script.axd?IDA=1234','SBSyncroBox'); SBSyncroBox({ CodLang: 'EN', }); </script> I am hoping someone might be able to help me figure out what I am doing wrong. Thanks in advance. :)
  21. Currently using a code block to embed a widget to display reviews via (ReviewsOnMyWebsite). The widget is placed on the bottom of every page. On mobile, when clicking to a page from the navigation menu the widget doesn't appear. It only appears when I refresh the page manually. Even when going back into the navigation menu to click into another page, the widget is hidden again until I refresh. Is there a solution to this mobile bug? Code: <div data-token="Ilh6pzyvcFaj4QxwrrFT2pMKepSJIYGolNn7ZyA5Ix839AkoGa" class="romw-reviews"></div> <script src="https://reviewsonmywebsite.com/js/embedLoader.js?id=16985fd9e429040ba7c6" type="text/javascript"></script>
  22. Hello, I am in developer mode and made a very simple change to test, I properly pushed and after everything loads I get "fatal: the remote end hung up unexpectedly" then after it says everything is up to date. I see no changes made in my original site. What does this mean and why can't I see my changes? Thanks!
  23. Hello, I am in developer mode and I am trying to add a background video. I am trying to grab the source that located in the current folder by src="video.mp4" but it is not working. I have included the video in the template folder then when I run the local server I don't see the video. Any ideas or clue as to how to get this to work or if it even works in this way? Thanks!
  24. Hello! I've recently changed my site template to Tudor (Skye Family), and noticed that most of my blog pages don't have an H1 associated with them. For example, on this blog page: https://bitbloggist.com/video-game-blog-collection/top-10-switch-games-so-far The text "10 Best Switch Games Right Now" is automatically classified as an H2 instead of an H1. There's no way to change this in the style editor, so I believe I'll need some custom CSS to change this. Also, this change only needs to apply to individual blog posts, as I don't want my home page to have multiple H1's listed. Thanks in advance!
  25. Hello, I am trying to create a single page website that showcases photos as you scroll down. The entire background would be a video and as you scroll down the video changes to a different one. I wrote custom java script code to achieve this as shown below. What is the best way to integrate this into squarespace? I am new and I have been messing around the site but I am not sure whether to go through developer mode and try to modify or if I can achieve this easier through the standard UI or other methods. Any suggestions would be appreciated! var video = document.getElementById('v0'); var source = document.createElement('source'); window.onscroll = function(){ console.log(document.body.scrollTop); console.log(document.documentElement.scrollTop); if (document.documentElement.scrollTop > 2000 && document.documentElement.scrollTop <5000) { if(video.src !== 'http://127.0.0.1:5500/woman.mp4'){ video.src='http://127.0.0.1:5500/woman.mp4'; } } if (document.documentElement.scrollTop > 5000 && document.documentElement.scrollTop <8500) { if(video.src !== 'http://127.0.0.1:5500/flower.mp4') video.src='http://127.0.0.1:5500/flower.mp4'; } if (document.documentElement.scrollTop > 0 && document.documentElement.scrollTop <2000){ if(video.src !== "http://127.0.0.1:5500/Edwin.mp4" ) video.src="http://127.0.0.1:5500/Edwin.mp4"; } }
×
×
  • Create New...