Countup Timer

CountupTimer.gif

The Right Social Sidebar plugin adds a right-hand collapsible sidebar featuring your Social Media icons. 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 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:

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:

/* 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;
}

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