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


Posts posted by colin.irwin

  1. Here's a slightly more concise solution, using jQuery.

    The idea is to use a Markdown block to hold your questions and answers. It should be the only Markdown block on the page.

    The Markdown will look something like the following (The + at the start of each question is a cue for the user to know they can expand the entry).

    + This is a first question
    This is the first line of an answer to the question above. This is a second line of the answer. 
    * Bullet points
    * Can be used too
    + This is a second question
    This is a one line answer to the question above. 

    Questions should be styled as H2.

    Then put the following code into your page's injection point:

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
       $('.markdown-block .sqs-block-content h2').css('cursor','pointer');
       $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();
       $(".markdown-block .sqs-block-content h2").click(function() {$(this).nextUntil("h2").slideToggle();});

    The first can be omitted if you already have a link to jQuery in your sitewide code injection point.

    The second script tells the mouse cursor to become a pointer when over the Markdown H2s - this is to tell the user it's clickable. Then, when an H2 is clicked it toggles the visibility of all content between the clicked H2 and the next H2 / the end of the markdown block.

    See it in action here - http://www.silvabokis.com/idea-testing/

  2. Dpi is a function of the printer/display capabilities.

    A 1500 pixel wide image appears 5 inches wide at 300dpi, 10 inches wide at 150dpi & just over 20 inches wide at 72dpi. The file size remains unchanged.

    You're correct that if you wanted to display an image 5 inches wide on a computer display then saving 5 inches wide at 300dpi would produce an unnecessarily large file. However, Squarespace resizes your image based on the screen size & supported pixels per inch. That means it will deliver a lower res (smaller file size) file for a standard display than it would for a retina display.

  3. Hey! No, it's not an out-of-the-box feature, but it could be implemented using custom scripting.

    The caveat is that if a person disables scripting in their browser then they would bypass the verification process, but this is true of all verification processes, I think.

  4. Hi Jackie,

    There's more than one way of doing this. 2 that I can think of:

    1. Create an age verification page using Squarespace. On each page test a cookie to see whether age verification has been passed. If it has not been passed the user should be redirected to the age verification page.

    2. Create a piece of code that is in the sitewide code injection point. This code would similarly check for presence of an age verification cookie value and, if age verification has not been provided a layer would obscure the screen and ask for age verification.

  5. As I said in a comment to another answer in this thread, keep an eye on the performance of your site.

    High quality DSLR photos (Jpeg FINE or similar) give a very large file size that Squarespace will then produce versions of for display on different device viewports.

    If you experience slow image downloads it may be a good idea to experiment with saving out your original images with more Jpeg compression before uploading (70-90% quality gives good results * much smaller file size). It should be the case that the versions Squarespace creates from the smaller original will also be smaller.

  6. Squarespace online materials state that a width of 1500 pixels is optimal. Images wider than 1500 pixels are resized to 1500 on upload but can have a small delay before becoming available.

    The system produces different versions of the uploaded image for different usage scenarios - browser, tablet, retina display - and serves out the most appropriate one for the user's device.

  7. Here are a few reasons, in addition to my browsing at work scenario, that autoplay non-stoppable music can be undesirable:

    1. Users on smartphones are forced to stream audio that wastes their bandwidth.
    2. Users may be already listening to audio on their device, or be multitasking by browsing on their device while watching TV. Autoplay music is an unwanted distraction in that case.
    3. If a user journey spans many pages that have autoplay music and/or they revisit the same page multiple times they end up hearing the same starting section of music again and again. Annoying.
    4. Doesn’t the fact that you ‘do not find that people will click on the player’ prove that it’s not important to people in the context of your site?
    5. After hunting around the screen for a (not present) mute/volume button they are just as likely to hit the back button as they are to turn their speakers down.
    6. You need to clear the rights with copyright owners and music publishers before putting commercially available music on your site.
    7. For a website to engage with its users it should allow them to feel like they can choose their own path without intrusion or distraction. Forcing users to break from their chain of thought in order to seek a mute button will break their concentration.

    After all of those caveats, here’s how to hide the player. Add the following CSS to the header injection point:

    <style media="screen">
    .sqs-audio-embed {
     visibility: hidden;

    There should be a way of autoplaying by triggering the same function that is attached to the player’s onclick state, but it’s beyond my understanding of the script to work out which function(s) would need calling and in which order.

  8. Playing music automatically without the user asking for it and, as the controls would be hidden, with no means of stopping it, can annoy users.

    Imagine a scenario where someone sneakily views your website at work, the music starts blaring, they can't stop it and they know they could get into trouble for browsing at work. They're not likely to have positive associations with your site.

  9. The following code seems to work. Replace “/” with the relative link you want the redirect to go to. If you want to link to an external site you’ll need to enter a full url of the format


    The code should be inserted in the injection point for the form page:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    var eventposted = 0;
    $(document).ready(function() {
     $('input.button').click(function() {
       window.setInterval(foo, 100);
    function foo() {
     if (($(".form-submission-text").is(':visible')) && (eventposted == 0)) {
       window.location.href = "/";

  • Create New...