Countdown Timer

CountdownTimer.gif

Countdown to a specific event or launch with the Countdown Timer plugin, accounting for visitors’ timezones. Below you will find a super-simple tutorial that will guide you through the installation and setup of this plugin.


Step 1: Insert a Markdown block

Find where you want the Countup Timer to be located on your site/page and insert a markdown block. Then insert the following code

<div id="countdown">
<div id='tiles'>
</div>
<div class="labels">
<li>Days</li>
<li>Hours</li>
<li>Mins</li>
<li>Secs</li>
</div>
</div>


Step 2: Insert the JavaScript

Insert the following code into the site wide 'Header Code Injection' area or the 'Page Header Code Injection' area to implement this plugin on individual page(s) - more info below.

You can change the countdown date by adjusting the values in bold using the format YYYY-MM-DD,HOUR:MIN:SEC.

Copy & paste this code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script>$(document).ready(function(){function n(){var n=new Date,e=n.getTime(),t=(n.getTimezoneOffset(),(c-e)/1e3);a=s(parseInt(t/86400)),t%=86400,o=s(parseInt(t/3600)),t%=3600,p=s(parseInt(t/60)),r=s(parseInt(t%60)),u.innerHTML="<span>"+a+"</span><span>"+o+"</span><span>"+p+"</span><span>"+r+"</span>"}function s(n){return(n<10?"0":"")+n}var a,o,p,r,c=new Date(2018,10,23,11,0,0);c.setMonth(c.getMonth()-1);var u=document.getElementById("tiles");n(),setInterval(function(){n()},1e3),$("#countdown").closest(".sqs-block").addClass("countdownBlock")});</script>

Site wide Code Injection:

sitewide-1.png
sitewide-2.png
sitewide-3.png

Individual Page Header Code Injection:

download.png
header-2.png
header-3.png
header-4.png

Step 3: Insert the CSS

Insert the following code into your Squarespace site's Custom CSS editor or the Individual Page Header CSS injection (more info below) - the values in bold can be changed to suit your branding and site design. 

Where colour values are added, you can use either of the following:

  • Valid colour name e.g. 'red' or 'yellow'

  • Hex value e.g. #FECB2F

  • RGB(a) value e.g. rgb (255,255,255) or rgba (255,255,255,0.8) - optional opacity value '0.8'

  • HSL(s) value (optional opacity values '0.8') e.g. hsl (0, 0%, 20%) or hsla (0, 0%, 20%, 0.8) - optional opacity value '0.8'

If you need help finding colours and building colour palettes - coolors.io is an awesome resource!

Copy & paste this code:

/* COUNTDOWN TIMER CSS */
 .countdownBlock,.countdownBlock .sqs-block-content{
    height:160px
}
#countdown{
    width:465px;
    height:112px;
    text-align:center;
    border-radius:5px;
    margin:auto;
    padding:24px 0;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%)
}
#countdown #tiles{
    position:relative;
    z-index:1;
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:row;
    flex-direction:row;
    -webkit-justify-content:center;
    justify-content:center
}
#countdown #tiles>span{
    width:23%;
    max-width:none;
    font:700 48px 'Droid Sans',Arial,sans-serif;
    text-align:center;
    color:#111;
    background-color:#FECB2F;
    border-radius:3px;
    margin:0 1%;
    padding:18px 0;
    display:inline-block;
    position:relative
}
#countdown .labels{
    width:100%;
    height:25px;
    text-align:center;
    position:absolute;
    bottom:8px;
    padding-left:0;
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:row;
    flex-direction:row;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center
}
#countdown .labels li{
    width:23%;
    margin:0 1%;
    font:700 15px 'Droid Sans',Arial,sans-serif;
    color:#000;
    text-align:center;
    text-transform:uppercase;
    display:inline-block
}
@media all and (max-width:767px){
    #countdown{
        display:flex;
        flex-direction:column
    }
    #countdown .labels{
        margin:auto;
        position:relative;
        width:62%
    }
    #countdown #tiles>span{
        width:15vw;
        font-size:24px
    }
}

Site wide CSS Injection:

sitewide-1.png
sitewide-2.png
sitewide-3.png
sitewide-4.png
 

Individual Page Header CSS Injection:

If using this method, be sure to wrap your CSS in <style></style> tags as shown in image 4!

header-2.png
header-3.png
header-4.png
 

Step 4: Apply, Save & Refresh! ⚡️

 

Need some help?

If you need help installing your plugin or you find that the code provided is not working - please feel free to contact us by clicking the link below.

Noughts & Ones