HELP with adding Codepen into Squarespace

comm · April 7, 2021

Site URL: https://codepen.io/janoschvg/pen/QwmdwY

Hi,

I've added code from codepen into my Squarespace site using a code block. The code is for a countdown timer but it doesn't countdown after I insert it.

Code i've inserted and edited

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">

<header></header>
<section>
  <div class="wrapper">

    <hgroup>
      <h1>Countdown</h1>
      <p class="meta">WE ARE GOING LIVE IN</p>
      
    </hgroup>

    <div id="countdown">
      <div class="cd-box">
        <p class="numbers days">00</p><br>
        <p class="strings timeRefDays">Days</p>
      </div>
      <div class="cd-box">
        <p class="numbers hours">00</p><br>
        <p class="strings timeRefHours">Hours</p>
      </div>
      <div class="cd-box">
        <p class="numbers minutes">00</p><br>
        <p class="strings timeRefMinutes">Minutes</p>
      </div>
      <div class="cd-box">
        <p class="numbers seconds">00</p><br>
        <p class="strings timeRefSeconds">Seconds</p>
      </div>
    </div>
    <!-- end div#countdown -->


  </div>
  <!-- end div.wrapper -->
</section>

<style>
/* resets and general styles */

*{
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

::-moz-selection{
	color: #FFFFFF;
	background: #FF5722;
}

::selection{
	color: #FFFFFF;
	background: #FF5722;
}

body{
	font: normal 16px 'Roboto', sans-serif;
	position: absolute; 
	height: 100%;
	width: 100%;
}

div.wrapper{
	width: calc(4*225px);
	margin: 0 auto;
}

span, a, strong{font-weight: 700;}
a{transition: .2s; text-decoration: none; color: #787878; border-bottom: 1px solid #607D8B;}
a:hover{transition: .2s; color: #FF5722;}

/* page layout */

/* header */

header{
	width: 100%;
	height: 50%;
	background: #FF5722;
}

/* section */

section{
	width: 100%;
	height: 50%;
}

section h1, section p.meta{
	color: #FFFFFF;
	margin-bottom: 15px;
}

section hgroup{margin-top: -360px;}

section p.numbers{font-size: 6em;}
section p.meta,section p.strings{font-size: 1.5em;}
section h1{font-size: 4.5em;}

/* countdown styles */

div#countdown{color: #353535;}

div#countdown p{
	width: 100%;
	display: inline-block;
	text-align: center;
}

p.numbers{
	width: 100%;
	height: 85%;
	background: #FFFFFF;
	margin-top: -25px;
	padding-top: 100px;
}

p.strings{
	width: 100%;
	height: auto;
	padding: 30px 0;
	background: #FF5722;
	color: #FFFFFF;
}

div.cd-box{
	width: 210px;
	height: 360px;
	background: #FFFFFF;
	float: left;
	padding: 25px 0 0 0;
	margin: 30px 15px 0 0;
	-webkit-box-shadow: 5px 6px 9px 1px rgba(53, 53, 53, 0.5);
	-moz-box-shadow: 5px 6px 9px 1px rgba(53, 53, 53, 0.5);
	box-shadow: 5px 6px 9px 1px rgba(53, 53, 53, 0.5);
}

/* footer */

footer{
	position: relative;
	top: 60px;
}

footer p{
  color: #787878;
}
</style>

<script>
$(document).ready(function(){
	//
  (function(e){
		e.fn.countdown = function (t, n){
			function i(){
				eventDate = Date.parse(r.date) / 1e3;
				currentDate = Math.floor(e.now() / 1e3);
				//
				if(eventDate <= currentDate){
					n.call(this);
					clearInterval(interval)
				}
				//
				seconds = eventDate - currentDate;
				days = Math.floor(seconds / 86400);
				seconds -= days * 60 * 60 * 24;
				hours = Math.floor(seconds / 3600);
				seconds -= hours * 60 * 60;
				minutes = Math.floor(seconds / 60);
				seconds -= minutes * 60;
				//
				days == 1 ? thisEl.find(".timeRefDays").text("Days") : thisEl.find(".timeRefDays").text("Days");
				hours == 1 ? thisEl.find(".timeRefHours").text("Hours") : thisEl.find(".timeRefHours").text("Hours");
				minutes == 1 ? thisEl.find(".timeRefMinutes").text("Minutes") : thisEl.find(".timeRefMinutes").text("Minutes");
				seconds == 1 ? thisEl.find(".timeRefSeconds").text("Seconds") : thisEl.find(".timeRefSeconds").text("Seconds");
				//
				if(r["format"] == "on"){
					days = String(days).length >= 2 ? days : "0" + days;
					hours = String(hours).length >= 2 ? hours : "0" + hours;
					minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
					seconds = String(seconds).length >= 2 ? seconds : "0" + seconds
				}
				//
				if(!isNaN(eventDate)){
					thisEl.find(".days").text(days);
					thisEl.find(".hours").text(hours);
					thisEl.find(".minutes").text(minutes);
					thisEl.find(".seconds").text(seconds)
				}
        else{
          errorMessage = "Invalid date. Example: 27 March 2015 17:00:00";
					alert(errorMessage);
					console.log(errorMessage);
					clearInterval(interval)
				}
			}
			//
			var thisEl = e(this);
			var r = {
				date: null,
				format: null
			};
			//
			t && e.extend(r, t);
			i();
			interval = setInterval(i, 1e3)
		}
	})(jQuery);
	//
	$(document).ready(function(){
		function e(){
			var e = new Date;
			e.setDate(e.getDate() + 60);
			dd = e.getDate();
			mm = e.getMonth() + 1;
			y = e.getFullYear();
			futureFormattedDate = mm + "/" + dd + "/" + y;
			return futureFormattedDate
		}
		//
		$("#countdown").countdown({
			date: "19 April 2021 18:30:00", // change date/time here - do not change the format!
			format: "on"
		});
	});
});
</script>

Can anyone figure out what i'm doing wrong?

I added the html, css (inside <style> </style> and the JS inside <script> </script>

This is what displays.

I have disabled Ajax Loading already

It also doesn't adapt to changing screen size (on different devices). Do I need to find code for that too?

Thanks

Beyondspace · April 11, 2021

On 4/7/2021 at 5:12 PM, comm said:

Site URL: https://codepen.io/janoschvg/pen/QwmdwY

Hi,

I've added code from codepen into my Squarespace site using a code block. The code is for a countdown timer but it doesn't countdown after I insert it.

Code i've inserted and edited


<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">

<header></header>
<section>
  <div class="wrapper">

    <hgroup>
      <h1>Countdown</h1>
      <p class="meta">WE ARE GOING LIVE IN</p>
      
    </hgroup>

    <div id="countdown">
      <div class="cd-box">
        <p class="numbers days">00</p><br>
        <p class="strings timeRefDays">Days</p>
      </div>
      <div class="cd-box">
        <p class="numbers hours">00</p><br>
        <p class="strings timeRefHours">Hours</p>
      </div>
      <div class="cd-box">
        <p class="numbers minutes">00</p><br>
        <p class="strings timeRefMinutes">Minutes</p>
      </div>
      <div class="cd-box">
        <p class="numbers seconds">00</p><br>
        <p class="strings timeRefSeconds">Seconds</p>
      </div>
    </div>
    <!-- end div#countdown -->


  </div>
  <!-- end div.wrapper -->
</section>

<style>
/* resets and general styles */

*{
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

::-moz-selection{
	color: #FFFFFF;
	background: #FF5722;
}

::selection{
	color: #FFFFFF;
	background: #FF5722;
}

body{
	font: normal 16px 'Roboto', sans-serif;
	position: absolute; 
	height: 100%;
	width: 100%;
}

div.wrapper{
	width: calc(4*225px);
	margin: 0 auto;
}

span, a, strong{font-weight: 700;}
a{transition: .2s; text-decoration: none; color: #787878; border-bottom: 1px solid #607D8B;}
a:hover{transition: .2s; color: #FF5722;}

/* page layout */

/* header */

header{
	width: 100%;
	height: 50%;
	background: #FF5722;
}

/* section */

section{
	width: 100%;
	height: 50%;
}

section h1, section p.meta{
	color: #FFFFFF;
	margin-bottom: 15px;
}

section hgroup{margin-top: -360px;}

section p.numbers{font-size: 6em;}
section p.meta,section p.strings{font-size: 1.5em;}
section h1{font-size: 4.5em;}

/* countdown styles */

div#countdown{color: #353535;}

div#countdown p{
	width: 100%;
	display: inline-block;
	text-align: center;
}

p.numbers{
	width: 100%;
	height: 85%;
	background: #FFFFFF;
	margin-top: -25px;
	padding-top: 100px;
}

p.strings{
	width: 100%;
	height: auto;
	padding: 30px 0;
	background: #FF5722;
	color: #FFFFFF;
}

div.cd-box{
	width: 210px;
	height: 360px;
	background: #FFFFFF;
	float: left;
	padding: 25px 0 0 0;
	margin: 30px 15px 0 0;
	-webkit-box-shadow: 5px 6px 9px 1px rgba(53, 53, 53, 0.5);
	-moz-box-shadow: 5px 6px 9px 1px rgba(53, 53, 53, 0.5);
	box-shadow: 5px 6px 9px 1px rgba(53, 53, 53, 0.5);
}

/* footer */

footer{
	position: relative;
	top: 60px;
}

footer p{
  color: #787878;
}
</style>

<script>
$(document).ready(function(){
	//
  (function(e){
		e.fn.countdown = function (t, n){
			function i(){
				eventDate = Date.parse(r.date) / 1e3;
				currentDate = Math.floor(e.now() / 1e3);
				//
				if(eventDate <= currentDate){
					n.call(this);
					clearInterval(interval)
				}
				//
				seconds = eventDate - currentDate;
				days = Math.floor(seconds / 86400);
				seconds -= days * 60 * 60 * 24;
				hours = Math.floor(seconds / 3600);
				seconds -= hours * 60 * 60;
				minutes = Math.floor(seconds / 60);
				seconds -= minutes * 60;
				//
				days == 1 ? thisEl.find(".timeRefDays").text("Days") : thisEl.find(".timeRefDays").text("Days");
				hours == 1 ? thisEl.find(".timeRefHours").text("Hours") : thisEl.find(".timeRefHours").text("Hours");
				minutes == 1 ? thisEl.find(".timeRefMinutes").text("Minutes") : thisEl.find(".timeRefMinutes").text("Minutes");
				seconds == 1 ? thisEl.find(".timeRefSeconds").text("Seconds") : thisEl.find(".timeRefSeconds").text("Seconds");
				//
				if(r["format"] == "on"){
					days = String(days).length >= 2 ? days : "0" + days;
					hours = String(hours).length >= 2 ? hours : "0" + hours;
					minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
					seconds = String(seconds).length >= 2 ? seconds : "0" + seconds
				}
				//
				if(!isNaN(eventDate)){
					thisEl.find(".days").text(days);
					thisEl.find(".hours").text(hours);
					thisEl.find(".minutes").text(minutes);
					thisEl.find(".seconds").text(seconds)
				}
        else{
          errorMessage = "Invalid date. Example: 27 March 2015 17:00:00";
					alert(errorMessage);
					console.log(errorMessage);
					clearInterval(interval)
				}
			}
			//
			var thisEl = e(this);
			var r = {
				date: null,
				format: null
			};
			//
			t && e.extend(r, t);
			i();
			interval = setInterval(i, 1e3)
		}
	})(jQuery);
	//
	$(document).ready(function(){
		function e(){
			var e = new Date;
			e.setDate(e.getDate() + 60);
			dd = e.getDate();
			mm = e.getMonth() + 1;
			y = e.getFullYear();
			futureFormattedDate = mm + "/" + dd + "/" + y;
			return futureFormattedDate
		}
		//
		$("#countdown").countdown({
			date: "19 April 2021 18:30:00", // change date/time here - do not change the format!
			format: "on"
		});
	});
});
</script>

Can anyone figure out what i'm doing wrong?

I added the html, css (inside <style> </style> and the JS inside <script> </script>

This is what displays.

I have disabled Ajax Loading already

It also doesn't adapt to changing screen size (on different devices). Do I need to find code for that too?

Thanks

There is one dependencies, jQuery, include on top of header injection

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

ElizabethM · April 20, 2021

Hi @bangank36

I have som issues on my countdown too.

This is my code

<p id="timer"></p>
</center>
<script>var deadline=new Date("May 1, 2021 18:30").getTime();var
x=setInterval(function(){var now=new Date().getTime();var t=deadline-now;var
days=Math.floor(t/(1000*60*60*24));var hours=Math.floor((t%
(1000*60*60*24))/(1000*60*60));var minutes=Math.floor((t%
(1000*60*60))/(1000*60));var seconds=Math.floor((t%
(1000*60))/1000);document.getElementById("day").innerHTML=days;document.getEl
ementById("hour").innerHTML=hours;document.getElementById("minute").innerHTM
L=minutes;document.getElementById("second").innerHTML=seconds;if(t<0)
{clearInterval(x);document.getElementById("timer").innerHTML="TIME
UP";document.getElementById("day").innerHTML='0';document.getElementById("hou
r").innerHTML='0';document.getElementById("minute").innerHTML='0';document.get
ElementById("second").innerHTML='0'}},1000);</script>

And attached you can see that there is no timer

Could you help me to fix this please

Thank you so much

HELP with adding Codepen into Squarespace

Recommended Posts

comm

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

ElizabethM

Posted Images

Beyondspace

Link to comment

ElizabethM

Link to comment

Create an account or sign in to comment

News

ElizabethM

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources