Jump to content

comm

Member
  • Posts

    1
  • Joined

  • Last visited

Everything posted by comm

  1. 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
×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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