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


Circle Member
  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by brandon

  1. Hi @howeverbighoweversmall. The issue has to do with AJAX loading. You can disable it, or you can edit your code to take AJAX loading into account. I hope this helps. -Brandon
  2. I'll confirm what Paul says. The height of the iframe is becoming zero (either intentionally or unintentionally) which causes the appearance of scrolling to the bottom (when really what's happening is the page simply shortens). Now I'm just some random developer on the internet, but glancing at the widget code, it appears that what's supposed to happen is the height of the iframe is to be reset to a new height and then the iframe sends a message to the parent (via window.postmessage()) to scroll to the desired location. If I had to guess, there's a race condition occurring between the setting of the height (or its animation) and the scrollto function in the parent window context. The "setIntervals/timeouts" in the code support this theory (they might be an attempt by the developers to work around the known race condition). So this isn't really Squarespace's issue. It may, however, be made more apparent when hosted within Squarespace due to exacerbated performance. This sort of use of iframes, postmessage and height-/scroll-setting can get very complicated. So again, take my once-over of the code for what it's worth. I understand the desire to keep the user experience within your own website/domain. However, I agree with Paul that the UI, as you have it within your site, is relatively confusing. In a case like this, I'd encourage a client to link to the third-party site and forego the complexity and confusion of the iframe (though obviously, I'm not privy to the myriad of considerations and evaluation that lead you to where you are).
  3. Hi @gramazlo. All that Colin is said, I agree with. Understanding you're probably not a developer, you do have a number of things out of place. However, I'm going to venture a guess that if you change these two lines in your code block: <script src="js/jquery-2.1.1.js"></script> <script src="js/main.js"></script> <!-- Resource jQuery --> to these two lines instead: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/CodyHouse/animated-headline/js/main.js"></script> you'll at least get your animation running. There are a number of other things that appear less-than-optimal about how you've roughly assembled this code -- things that may break on you going forward. So if things still give you trouble, you may consider hiring a developer to help you get things up and running. Note that the use of jsdelivr is to help make this as easy as possible for you, but even that is perhaps not the best approach. I hope that helps a bit. -Brandon
  4. Hi there. Here are a few questions/considerations for you as you look for a solution (or end up pursuing a custom-developed solution): Is the user-submitted information intended to go to a human being who then performs some manual actions with the information? Or, is the information intended to cause an automatic change of content somewhere on the website without any human intervention? Does the user need to be able to come back at a later time/date and edit their submission? Is uploading an image required, or optional? Can a user upload multiple images or just one? I multiple, what's the limit? Once uploaded, can they delete/change the image(s)? Regarding "Toggle between several different options of images before selecting one", is the user-uploaded image(s) included in this selection of images? Where does this selection of images come from (data source)? Do you envision the bullets you've mentioned as "steps" in a process, or do you envision them as all on a single page? If separate steps, can a user "travel" back and forth between the steps? Do you have a wireframe that gives an idea of form and function as you envision it? Are there restrictions with regards to who can access the form? How does a user get to the page/form in question? What's the "lifespan" of user-uploaded images? Are they purged by human intervention or can deletion be dictated by a set timeline? How many submissions would you estimate this form would handle per month? Does it vary greatly? Does the site need to work on mobile devices (iOS/Android) or is this a corporate setting or other setting where you can dictate desktop-only? When a user uploads an image, what file sources should be available to them? Local/system files only, or other services such as Facebook, Google Drive, or other cloud storage services/social-media? What file formats do you accept and what's the anticipated file size of the images? What text formatting options are available for the text component? Is there a character limit, etc.? Who and how many people are to be notified when a submission occurs? I hope that's helpful and not overwhelming. Of course, if you went with an existing service, some of these would be dictated for you based on the limitations of said service. If you ended up having it custom coded by a developer, these are some of the questions that would come up (off the top of my own developer brain). Generally speaking, and depending on how integrated this needs to be in terms of e-commerce process and integration with Squarespace's own internal workings, it is realistic to execute within Squarespace. But certain answers to any of the questions above could indeed quickly disqualify Squarespace as a good fit. -Brandon
  5. @DBL: It doesn't help you, but this feature was explored. It also happens to be the most popular post on these forums: https://forum.squarespace.com/topic/917-soliciting-feedback-site-cloning/
  6. There are a few possibilities when attempting to solve the "equal height columns" problem (a common challenge in HTML for a long time). Use JavaScript to find the tallest of the columns and then set all other column heights explicitly. This also requires the function to run on browser/screen resize. This is what Colin mentioned. Use Flexbox or CSS Tables Rig up something using text-overflow: ellipses. Selecting the best approach varies with each use-case, and within each use case, the specific code and CSS selectors will vary further. In order to provide code for a specific case such as yours, it's usually necessary to provide the link to the site/page in questions (and the view-only password for sites in trial mode).
  7. Hi @Geekless. I've updated my answer yet again. It seems my previous edit was a bit misleading. You do indeed want to use the collection ID for your use case.
  8. Hi Christy. This is one of those times where, if the <img> element supported pseudo-elements, then we could leverage the att() function to solve this problem relatively easily (albeit with some compromises). But alas, it does not. Therefore, I think the only way would be via JavaScript. On page init, an element (div, span, p, etc.) would be created within each .productItem-gallery-slides-item that contains a caption based on the sibling <img> element's alt attribute. The visibility may be able to be controlled simply via the .sqs-active-slide class on the parent, though it's possible it'd need to be more tightly controlled via a mutation observer or event listener. At that point, it's a matter of using CSS to style the caption as desired. It may be necessary to use JavaScript for reliable positioning/scaling, but CSS may be adequate for most viewport widths. So yes, it's possible. To get something that is adequate for most devices and widths might take a developer an hour. To get it to something that is ultra-reliable might take another hour or two, but that might not be entirely necessary. Alternatively, you may be able to find an acceptable compromise using product variant images. I hope this helps. -Brandon
  9. Also note that I've changed {collection.id} to {item.id} in my example, which is more likely what you're after.
  10. Yeah, that's right. I've updated my answer to clarify, and to make the distinction between collection id and item id more clear.
  11. Hi @Geekless. This occurs because the "id" attribute, as you have it, is static, and isn't unique to each page. It's that 'id' attribute to which a block field's layout is connected. To remedy this, add some JSON-T value that is appropriately unique. For collections/pages, that's the collection ID. But for posts/items within a collection, it's the item ID (because the collection is the same for all items within it). For example: <squarespace:block-field id="residential-{collection.id}" columns="12"/> Note: One thing you should watch for is what "scope" you are in when adding the block field within the .list code. In the example above, I've used {collection.id}. But, if in the context of your .list file, you are already within the {.section collection}...{.end} scope, you would only use {id} instead of {collection.id} in the example above. Including said values in the block-field id gives the block-field its "uniqueness" on a per-page/post level. What's the difference between collection id and item id? The collection id is unique to each collection. The item id is unique to each item within a collection (each blog post, or image, etc.). It's a matter of context as to which you want to use. In your case, because you're editing a .list file and you want to create multiple galleries where each list page has a set of block-fields unique to it, you'll use the collection id. Collections don't have an item id, so item id wouldn't work. If you wanted to have a block-field that was unique to each item in a gallery, you'd edit the .item file and use the item ID (because every item in a single collection would share the same collection id). Do let me know how that works for you. -Brandon
  12. Hi @MattSeneca. It's possible by Googling around (using your template name, "squarespace" and "blog thumbnail banner" keywords) that you may find some how-to or code snippet that'll plug in easily. Otherwise, while it's possible to do, the ease with which it can be done depends on the template you're using and other factors. Here's a recent, related post where I mention some execution details/methodology. I hope that helps. -Brandon
  13. Hi Devon. You could instead replace the header image on blog items with the post's thumbnail, if that's the effect you'd prefer. The other alternatives you mentioned are also possible. Thumbnail and meta info is available via each page's JSON data, which can be accessed via JavaScript, added to the page as desired, and styled with just CSS. Such meta may also be available in attributes within the DOM as well. When dealing with thumbnail images, you could either set them via JS using the "background-image" CSS property or by using an <img> element loaded with ImageLoader. I'd probably go with the former for simplicity (though it may load a larger image, the difference is probably negligible). I'd estimate an experienced dev could do any of those for you in less than a couple hours.
  14. Hi @scubascuba. In most cases, it makes it easier for others to provide answers and insight if you provide a link to the site/page in question, along with the view-only password (for sites in trial mode, set visibility to "Password Protected"). Someone may have an answer without looking, and it's possible someone may setup their own demo just to help answer the question, but it increases your odds of getting quality answers if you can provide the link.
  15. Hi @equites. When you set document.body.innerHTML to be equal to something else (even something only slightly different) , you're effectively replacing the entire contents of the body element, not just the text you're seeking to replace via the .replace() method. In other words, it's a destructive action, destroying the entire document and replacing it with a (slightly modified, in your case) copy of it. Problem: the elements you're replacing (every single element within the body) may have had event listeners and other functionality "attached" to them. The replacement "copies" are indeed copies, but are also entirely different entities from the original ones. They don't have those actions "attached" like the original elements did. Therefore, any element that has had functionality added to it before your code runs will quit working, because the element is replaced with a copy that does not have that functionality. For elements that have their functionality added after your code runs, they will work initially, but will then fail to work if your code runs again (if repeating the translation to yet another language.) The Add to Cart button is an example. I'd be surprised if there aren't many others. This can be referred to as a "race condition" and such conditions often cause a lot of confusing behavior. Solution: You'll need to take a different approach: identify and target the elements on the page that should have their text replaced. When targeting, ensure you're targeting the inner-most element that contains the text node. While not always necessary, that will ensure you don't destroy existing functionality within the DOM. For each element, replace its innerHTML/text-node, each on an individual basis. This will keep the elements intact, affecting only the text within.
  16. Hi @Kassaundra. This can be done by adding CSS via the CSS Editor. .mobile-bar { top: 0 !important; bottom: auto !important; border-bottom: 1px solid #ddd; } #navCloseToggleWrapper { top: 0; } @media screen and (max-width:768px) { .site-container { padding-top: 70px; padding-bottom: 0; } #navCloseToggle { margin-top: 20px; margin-bottom: 0; } #sideTrayWrapper { padding-top: 60px; } } Give that a shot and let us know how it goes.
  17. Hi @KarinaNa. In the case, of Bryant, it should be fairly straightforward. If you're primarily concerned with modern browsers, something simple like this, added via the CSS Editor, should do the trick: #header { position: -webkit-sticky; position: sticky; } If you want broader compatibility with older browsers, and if you don't mind some overlap of your header image, you can instead use: #header { position: fixed; } On a related note, on other templates based on Brine (not yours, but others may end up here looking), the number of concerns when creating a fixed header are much greater and include: differences between index and non-index pages, what headers (top/bottom) are enabled, whether the screen is resized, whether the announcement bar is used (and whether it's been closed), whether the header covers up content when anchor links are used, whether you want it fixed on mobile, whether you have the headers set to overlap on index pages, and more. To account for that complexity, I created Fixit - Fixed Headers for Squarespace. In my experience, many tutorials and code snippets fail to take one or more of those into account. In your case, the above should work. But I say all that in part so that, if you find anomalies in certain contexts (the announcement bar visibility being one of them), they are probably solvable. Just post back and include a link to your site and the view-only password for trial sites. Finally, custom CSS will be applied even for trial sites. Hope that helps. -Brandon
  18. Hi @codeexist. What you're encountering are dynamic IDs generated by YUI, a JavaScript framework that Squarespace uses. As that implies, such IDs will change on each page render. The first time a designer/dev runs into this issue, it definitely tries one's patience. To resolve this, checkout this related answer over on SO, but you can find a whole bunch more posts/pages on this too. Take a look at those and you'll find what to do. In summary: use block IDs instead.
  19. Hey @basakatac. Your site seems like a good candidate for the CSS-only, modern-browser-only approach. // Invert logo color on specific pages. // Uses Squarespace-compatible LESS CSS, not standard CSS. #collection-5d4b424a4895d9000187f302, #collection-5d64262299293800015e0292, #collection-5d4b4ab4d01eac0001327bb7 { .Header-branding-logo { -webkit-filter: invert(100%); filter: invert(1); } } Basically, add a list of comma-separated collection IDs to that first line, and you're good to go. You can add that via the CSS editor, then remove the previous JQuery and corresponding logo file you were using; you don't need 'em. Related Questions Q: How do I find my collection IDs? A: Use your browsers developer-tools/inspector. It's the ID attribute on the `<body>' element. Q: Do I need to add it to just certain pages? A: No, that's what the collection IDs in the first line are for. They ensure the rule only applies to the pages you add. That way, you can add it globally via the CSS Editor. Related Posts Related post, for 7.1 is here.
  20. Hey @alicroft. This can be done. It requires a short bit of JavaScript to look for the "updated-at" div, query the page's JSON data, find the latest updated collection for the page (or series of pages in the index page), format the date to your liking, and then write the HTML to the "updated-at" div accordingly. I'd guess it'd take a good dev. and hour or two to write and test an efficient and resilient script to do that (the first half hour to get the "gist" done, then maybe another hour to mess with time formatting, which takes a bit of time without using 3rd-party libs). So yes, it's possible. Having taken a quick look, I think it could be done without you having to refactor your code at all. You could leave it as you have it on the pages you want it to appear, and the code could be set to run on those pages. If you want more info or help, say the word.
  21. brandon


    One possibly-not-so-helpful option is to search your email instead (assuming you're getting all of the order notification emails). If you happen to be receiving them to a gmail email addresses, you could create a search template for yourself that could be quite fast/efficient at locating orders based on order form content. It doesn't solve the problem within Squarespace, but simply sharing ideas that might get the job done for you.
  22. @AustinRandall: Tuan is correct that it is easiest to provide (and test) solutions if you provide a site/page URL and the view-only password if applicable @basakatac: You might consider asking a new question instead (and providing the info mentioned). You may also find the following helpful, since this question has been asked quite a number of times before. Although the exact CSS used varies based on template, version and your logo, the methods still apply. Methods used include: Using :before and/or :after pseudo elements Using CSS Filters (best if simply inverting black to white or vice versa, but will work for some color logos) Using Javascript to change src attribute In general, if using the CSS Filters approach (#2), you can target the logo in 7.1 like so (using your own collection-ID as applicable). By including the collection ID in the CSS, you no longer have to worry about only adding the CSS to specific pages, because the rule itself specifies which pages to apply to. #collection-5d9e907ec1f67f503cab5fc8 .header-title-logo img { /* For black/white */ -webkit-filter: invert(100%); filter: invert(1); /* Or for converting color to white, something like this (depends on logo) */ // filter: grayscale(100%) brightness(350%); } Where to I insert this code? You add it via the CSS Editor How do I find my collection ID? You can identify the collection ID by using your browsers developer tools/inspector and viewing the ID of the <body> element. The other methods listed above (#1 and #3) are also viable. Related Links: https://forum.squarespace.com/topic/82174-tremont-template-how-can-i-keep-a-white-logo-in-the-homepage-and-a-black-logo-everywhere-else/ https://forum.squarespace.com/topic/3424-different-logo-for-mobile-nav-bar/#comment-19904 https://forum.squarespace.com/topic/2566-change-logo-for-specific-page/#comment-14932 https://forum.squarespace.com/topic/61248-changing-logo-colour-on-homepage-vs-other-pages-marta-theme/#comment-263327 https://forum.squarespace.com/topic/22800-forte-changing-black-logo-to-white-logo/#comment-211315 https://forum.squarespace.com/topic/5214-change-image-colour-on-hover-for-one-imagepage-only/#comment-29997 And many others
  23. For what it's worth, I'm not sure that Squarespace restors a "backup" of your configuration so much as it executes a standard set of instructions during the restoration of a template to its original state (while attempting to save as much of your "main content" as possible), in a similar manner as what happens when one switches templates. However, I've not tested this, so I can't speak from experience. Also, it is possible to work with a Circle member to export/import Style Editor settings (with some limitations...if you're switching templates then things might not work out how you'd want them to). Again, that perhaps doesn't help you much (especially not retroactively) but might be valuable for you to know later, if it becomes necessary. Currently, Squarespace "...isn't optimized for importing content between Squarespace 7 sites..." (reference). And for 7.1 sites, it's not possible. Some have had some success using the Wordpress export feature (see here and here). So, it seems none of these are a great nor comprehensive solution to the issues you describe. However, it is an answer to your question: "does anyone know how to back up all of this, export it, or something", so I thought it was worth posting.
  24. The answer is to add CSS via the CSS Editor in order override your general setting for just that section. It's quite simple, but it does require some understanding of how Squarespace generates the underlying code for index sections such as that. Simply put, in your template, Squarespace creates a "section" element for each index page you create, and gives the section an "id" attribute based on the URL you assign to the page. Taking that all together, we have: section#video .Index-page-content { padding-top: 20px; padding-bottom: 20px; } Insert that via the CSS Editor and adjust to your liking. Note that you have a couple spacer blocks at the top of that section that you'll want to remove if you really want to close that gap. In the future, if you want to look into how this code is generated, get comfortable using your browsers developer tools and poking around with the inspector. Do let me know how this works for you.
  25. Right. What's probably happened is that, because the developer used bit.ly to point at URLs from the CDN, those URLs have probably changed, but the bit.ly redirect is still pointing to the old path. You're going to have to find the asset URLs or upload new images. See "Uploading and Managing Files" and "CSS Files". As an aside, the bit.ly images are added by inserting HTML into the title of that particular index-gallery-item. Once you upload the new image (or locate the old URL), you'll need to update the title of that index gallery item (that is, if Squarespace even allows that anymore...they may now escape HTML that is inserted in such areas). In the end, I would not have personally done it this way, but would instead favor using CSS background images, which you might consider.
  • Create New...