CountupTimer.gif

Countup Timer

Track the time since a specific event, launch or aspect of your business with the Countup Timer plugin. 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="countup">
  <p id="days">00</p>
  <p id="hours">00</p>
  <p id="minutes">00</p>
  <p id="seconds">00</p>
  <ul>
    <li class="timeRefDays">days</li>
    <li class="timeRefHours">hours</li>
    <li class="timeRefMinutes">minutes</li>
    <li class="timeRefSeconds">seconds</li>
  </ul>
</div>
 

 

Step 2: Insert the JavaScript

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

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

Copy & paste this code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>function upTime(e){now=new Date,e=new Date(e),difference=now-e,days=Math.floor(difference/864e5*1),hours=Math.floor(difference%864e5/36e5*1),mins=Math.floor(difference%864e5%36e5/6e4*1),secs=Math.floor(difference%864e5%36e5%6e4/1e3*1),document.getElementById("days").firstChild.nodeValue=days,document.getElementById("hours").firstChild.nodeValue=hours,document.getElementById("minutes").firstChild.nodeValue=mins,document.getElementById("seconds").firstChild.nodeValue=secs,clearTimeout(upTime.to),upTime.to=setTimeout(function(){upTime(e)},1e3)}window.onload=function(){upTime("10,01,2017,00:00:00")};</script>
 

Site wide Code Injection:

 

Individual Page Header Code Injection:

 

 

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 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:

/* COUNTUP TIMER CSS */

#countup{
  width: 465px;
  height: 112px;
  text-align: center;
  border-radius: 5px;
  margin: auto;
  padding: 24px 0;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

#countdown #tiles{
  position: relative;
  z-index: 1;
}

#countup p{
  width: 92px;
  max-width: 92px;
  font: bold 48px 'Droid Sans', Arial, sans-serif;
  text-align: center;
  color: #111111;
  background-color: #FECB2F;
  border-radius: 3px;
  margin: 0 7px;
  padding: 18px 0;
  display: inline-block;
  position: relative;
}

#countup ul{
  width: 100%;
  height: 25px;
  text-align: center;
  position: absolute;
  bottom: 8px;
  padding-left: 0px;
  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;
}

#countup  li{
  width: 24%;;
  font: bold 15px 'Droid Sans', Arial, sans-serif;
  color: #000000;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
}
 

Finding your Custom CSS editor:

 

Individual Page Header CSS injectio

 

 

⚡️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.