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

brandon

Circle Member
  • Content Count

    2,133
  • Joined

  • Last visited

  • Days Won

    29

Everything posted by brandon

  1. Hi @leonor. If by "menu" you mean the navigation on desktop and mobile, it's relatively easy to get the header to "stick" to the top using position:fixed or position:sticky (for modern browsers only). Something like this usually starts to get the effect: .Header { position: fixed !important; } However, depending on your configuration, they may only get you part-way. Furthermore, you may find additional complexities appear regarding top/bottom headers, announcement bar (in use, closed, open), whether you want it fixed on both desktop and mobile, whether you're okay with the nav. overlapping content (especially when on-page anchor links are used) and whether you want to make use of "on-scroll" effects such as a shrinking logo or color/transparency change. So, if the above code doesn't get you there, you can check out a plugin I made to fix Squarespace Headers on Brine templates, or try posting a link to your site/page in question (and the view-only password for trial-mode sites). Someone may be able to help you out further, especially if you can speak to some of the factors I mentioned. -Brandon
  2. Well, as I said there are many options. But here's a quickly-written example using typed.js that you can insert via footer code injection, and tweak the settings to your liking: <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script> <script> (function() { new Typed('.highlight1', { strings: ['', 'clear', 'engaging', 'understandable'], typeSpeed: 40, loop: true, loopCount: Infinity, backDelay: 2900, fadeOut: false, showCursor: false }); })(); </script> You'll notice some additional adjustments you'll want to make, such as hyphenation/wrapping and line height. Do let me know how it works for you. -Brandon
  3. Hi @vzell. This is a common visual feature (and was recently asked about on these forums), and it can be accomplished via custom JavaScript and CSS. There are a lot of code snippets and libraries out there that can help you accomplish it, though each will require consideration of your specific context and design (not to mention, whether there is animation associated with the word-change). You can try posting a link to your site (and the view-only password for sites in trial mode) and see if anyone here provides some specific example code. Otherwise, you may consider hiring a developer to accomplish it. I'd expect it to take a couple hours or less to implement well (depending on animation, and other desires).
  4. Hi Georgia. When you see this issue, are you by chance viewing your website in Safari on iOS?
  5. Hi there. This requires a bit of CSS and JavaScript to accomplish. Insert the following via sitewide footer code injection: <!-- Equalize Button Heights --> <style> #page-5d7e807d478b13088d7f4ee5 .button-block a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } </style> <script> window.Squarespace.onInitialize(Y, function() {(function(){var c=Array['from'](document['querySelectorAll']('#page-5d7e807d478b13088d7f4ee5\x20.button-block\x20a')),d;if(!c['length']){return;}function e(){var f=Math['max']['apply'](null,c['map'](function(g){var h,i;h=document['createRange']();h['selectNodeContents'](g['childNodes'][0x0]);i=h['getBoundingClientRect']();return i['bottom']-i['top'];}));d=c['length'];while(d--){c[d]['style']['minHeight']=f+'px';}};e();window['addEventListener']('resize',e);}());}); </script> Now that's a bit more than I'd normally do on this forum; I'd normally encourage hiring a coder/developer to solve a problem like this. But I found this particular problem interesting, and I'm curious how many others in the future will find this thread needing something similar. Do let me know how that works for you. -Brandon Note: For the sake of others looking for this question in the future, consider adding ", Equal / Same Height" to the end of the title of your post.
  6. Hi @wesgardner. The issue you're having makes sense because fbq('consent', 'revoke'); needs to happen after fbq is initialized but before fbq("track"...) is run. When you're using Squarespace's built-in integration, you can't get "between" those two with your own code. To work around it, you'll want to stop using the built-in integration and instead insert the FB tracking code on your own, via code injection. Then you can work with it with more granularity. The next step is detecting when the user consents via Squarespace's built-in cookie banner. Looking past the shortfalls of this banner in terms of compliance, this can be done a number of ways. Are you also using Google Analytics? A similar approach would apply there, and could be handled together in the same script. GA doesn't offer a "grant consent" method like FB does, but that's not a big deal. Do you have a template with AJAX loading and is it enabled? In theory, Facebook should deal with this itself since it uses the history state API listener, but GA (if you're using it) would require updating the page_path parameter. -Brandon
  7. Hi @inlaydigital. You can prevent the wrapping of text (as Tuan Phan provided). For your consideration, if you were to prevent text wrapping, what would you do at widths where the blocks appear like this (just before mobile kicks in)? Like this: In general if determined to use the blocks as you have them, I would first make sure that all blocks are within the same row. You see, your grid structure is currently quite complicated, due to the way you've dragged-and-dropped the blocks around in the layout. This is an easy thing to have happen in Squarespace, but it makes writing overriding CSS quite difficult. If you're familiar with your browser dev tools/inspector, you can inspect that section and see what I mean. If you can clean up your grid structure, then you may be able to use CSS to keep the blocks of a minimum width and have the blocks themselves wrap (from one row of 5, to two rows [3, 2] to each in its own row). This would take some time. Alternatively, with layouts like this in Squarespace, I often prefer to simply write the layout myself (for example, in a code block). That way I'm not fighting Squarespace's own CSS/layout, the layout is simplified, I have more control, and failure in the future (due to changes on Squarespace's end) are less likely. Overall, this is one of those instances where preventing the wrapping of text reveals that there are actually a larger number of concerns in play, and a different approach may be better. Understanding that this doesn't solve your immediate problem, I hope it does help. -Brandon
  8. Hi @Graemetg. Squarespace doesn't support server side code, so you're pretty much stuck using JavaScript. What that means is you have to either: Setup your endpoint/database to be accessible cross-domain via XMLHttpRequest (account for CORS) or Setup your endpoint so that its data is accessible via JSONP or Do one of the above with a proxy server instead, and have the proxy get your data or Do one of the above with a separate service like Firebase, Caspio or Google Sheets/AppsScript whereby you essentially host a copy of your database for access via JS (via XMLHttpRequest or JSONP depending on the service's limitations/features) This limitation isn't necessarily unique to Squarespace, but to JavaScript (though since Squarespace limits us to JavaScript, it is indirectly a limitation of Squarespace). I've setup various similar solutions using AppsScript (JDBC may be of interest in this case) where no/low additional monthly fees were important. Of course, the upfront cost could be significant if paying a developer to accomplish it, depending on the complexity of the data/operation and the experience of the dev. -Brandon
  9. Hi @nycmonkey. Yes, moving the thumbnails is doable. Give this a shot, inserted via the CSS Editor: .ProductItem-gallery { display: flex; } .ProductItem-gallery-slides { order: 1; width: 100%; height: 100%; margin-left: 4%; } .ProductItem-gallery-thumbnails { margin-left: 0; width: 20%; max-width: 90px; } .ProductItem-gallery-thumbnails-item { margin-left: 0; width: 100%; } As for next/previous indicators, that'll take some custom development work. Nothing a dev. couldn't do for you short of a couple hours. Alternatively you can make Squarespace galleries swipeable. It wouldn't have indicators or be clickable on desktop, but if most of your users are on mobile, that might not be a big deal. Note that white space will be created below the main image with the thumbnail strip height exceeds it. With a bit more work, it'd be possible to match the height of the thumbnail strip to that of the main image, and make the strip scrollable, thereby removing the gap when there are a lot of thumbnails Hope that helps. -Brandon
  10. Hi @gramazlo. Are you asking for help with the "new-new-page" or the original "new-page". On the NP, you have JQuery added twice. Explore removing it from the site-wide header code injection of the page-specific code injection unless you're using it elsewhere on the site. If you're using it elsewhere you're going to have to do what we call "refactoring"...spend time reconsidering/rewriting how you're solving each problem individually and come up with a new solution that solves multiple problems in combination. If you don't get additional replies here that solve your problem, it may be time to consider hiring a developer.
  11. Hi @Marta. Yes, there is a way to do this. You can find example code in varies places by searching this Forum (Google will also get you results from Answers), including one I posted here. It may require some adjustments to be made for your use case specifically. If that's the case, I'd guess it'd take a developer less than an hour to get you up and running.
  12. It might be theoretically possible to design and develop your own implementation, though the cost might exceed a couple year's worth of the difference between Squarespace plans. In addition, once you get into sending emails, usually a third-party service of some kind is engaged (and therefore additional ongoing service fees), so the savings might be quite minimal. What plan are you on now? Do you use customer accounts and, if not, how would you go about getting the user's email address? How many emails would you anticipate sending per month?
  13. 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
  14. 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).
  15. 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
  16. 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
  17. @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/
  18. 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).
  19. 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.
  20. 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
  21. Also note that I've changed {collection.id} to {item.id} in my example, which is more likely what you're after.
  22. Yeah, that's right. I've updated my answer to clarify, and to make the distinction between collection id and item id more clear.
  23. 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
  24. 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
  25. 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.
×
×
  • Create New...