Jump to content

HELP with adding Codepen into Squarespace

By comm, in Customize with code

Recommended Posts

comm Level 1

comm

Posted
Posted

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>

image.thumb.png.f7d3fad193bddf6307dae9edf398a068.png

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

 

 

 

  • Replies 2
  • Views 559
  • Created
  • Last Reply
Beyondspace Level 14

Beyondspace

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

image.thumb.png.f7d3fad193bddf6307dae9edf398a068.png

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>

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

  • 2 weeks later...
ElizabethM Level 5

ElizabethM

Posted
Posted

Hi @bangank36

I have som issues on my countdown too. 

This is my code 

<style>#countdown{color:#f5f2ec;display:inline-block;text-align:center;font-size:1.5rem}
#countdown>div{padding:10px; background:#b79b7d; display:inline-block}
#countdown div>span{padding:5px; display:inline-block} </style><center><div id="countdown">
  <div>
    <span class="days" id="day">
    </span>
    <div
class="text">jours</div> 
  </div>
  <div>
    <span class="hours" id="hour">
    </span>
    <div
class="text">heures</div>
  </div>
  <div>
    <span class="minutes" id="minute">
    </span>
<div class="text">minutes</div>
  </div>
  </div>

  <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

Capture d’écran 2021-04-20 à 08.48.43.png

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources