New Year Countdown
There are settings at the onset of the block code to change the year & other text.
PHP Block Code:
global $context;
echo '
<script>
if (typeof mytimecounter_once === "undefined") {
var mytimecounter_fireworks = true, mytimecounter_fireworksgif = "https://example.com/fireworks.gif", mytimecounter_deadline = "2026-01-01", mytimecounter_width = "45rem";
var mytimecounter_days = "Days", mytimecounter_hrs = "Hours", mytimecounter_mins = "Minutes", mytimecounter_secs = "Seconds";
var mytimecounter_titles = ["New Year 2026", "' . $context['forum_name'] . ' Countdown"];
var mytimecounter_hny = ["happy", "new", "year"];
var total, seconds, minutes, hours, days, clock, updateTimeSpan, timeintervalCounter, endtime, mytimecounter_str, mytimecounter_once = true, hnycount = 0;
var mytimecounter_getTimeRemaining, mytimecounter_updateClock, mytimecounter_initializeClock;
}
</script>
<div id="blockclocktimer" style="position: relative;display: flex;flex-direction: row;align-items: stretch;width: 100%;overlfow: hidden;padding: 0.5rem;">
<div class="mytimecounter_parent" style="overflow: clip;width: 100%;">
<div class="mytimecounter_container" style="box-sizing: content-box;">
<h1 class="mytimecounter_top mytimecounter_titles0"></h1>
<h1 class="mytimecounter_mid">
<svg class="mytimecounter_svg" xmlns="http://www.w3.org/2000/svg">
<line class="mytimecounter_line" x1="0" y1="10" x2="250" y2="10" />
</svg>
</h1>
<h1 class="mytimecounter_bot mytimecounter_titles1"></h1>
<div class="mytimecounter_clockdiv">
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_dayz mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_days"></div>
</div>
<div class="mytimecounter_clockdivdiv2">
<span class="mytimecounter_clockspan2">:</span>
<div class="mytimecounter_smalltext2">​</div>
</div>
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_hours mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_hrs"></div>
</div>
<div class="mytimecounter_clockdivdiv2">
<span class="mytimecounter_clockspan2">:</span>
<div class="mytimecounter_smalltext2">​</div>
</div>
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_minutes mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_mins"></div>
</div>
<div class="mytimecounter_clockdivdiv2">
<span class="mytimecounter_clockspan2">:</span>
<div class="mytimecounter_smalltext2">​</div>
</div>
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_seconds mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_secs"></div>
</div>
</div>
</div>
</div>
</div>
<script>
mytimecounter_getTimeRemaining = function(endtime) {
total = Date.parse(endtime) - Date.parse(new Date());
seconds = Math.floor((total / 1000) % 60);
minutes = Math.floor((total / 1000 / 60) % 60);
hours = Math.floor((total / (1000 * 60 * 60)) % 24);
days = Math.floor(total / (1000 * 60 * 60 * 24));
return {total, days, hours, minutes, seconds};
}
mytimecounter_updateClock = function(id, endtime = "") {
if (endtime) {
updateTimeSpan = mytimecounter_getTimeRemaining(endtime);
$("." + id).find(".mytimecounter_dayz").html(updateTimeSpan.days);
$("." + id).find(".mytimecounter_hours").html(("0" + updateTimeSpan.hours).slice(-2));
$("." + id).find(".mytimecounter_minutes").html(("0" + updateTimeSpan.minutes).slice(-2));
$("." + id).find(".mytimecounter_seconds").html(("0" + updateTimeSpan.seconds).slice(-2));
if (updateTimeSpan.total <= 0) {
clearInterval(timeintervalCounter);
}
if (updateTimeSpan.days > 99) {
$(".mytimecounter_days").css("padding-right","1cw");
}
}
}
mytimecounter_initializeClock = function(id, endtime) {
mytimecounter_updateClock(id, endtime);
timeintervalCounter = setInterval(function(){mytimecounter_updateClock(id, endtime);}, 1000);
}
$(document).ready(function() {
if (typeof mytimecounter_twice === "undefined") {
var mytimecounter_twice = true;
$(".mytimecounter_titles0").html(mytimecounter_titles[0]);
$(".mytimecounter_titles1").html(mytimecounter_titles[1]);
$(".mytimecounter_days").html(mytimecounter_days);
$(".mytimecounter_hrs").html(mytimecounter_hrs);
$(".mytimecounter_mins").html(mytimecounter_mins);
$(".mytimecounter_secs").html(mytimecounter_secs);
$(".mytimecounter_parent").css({"overflow-y":"clip", "display":"flex", "justify-content":"center", "width":"100%"});
$(".mytimecounter_container").css({"width":mytimecounter_width, "min-width":mytimecounter_width, "max-width":"100%", "box-sizing":"content-box"});
$(".mytimecounter_svg").css({"height":"0.4rem", "width":"6rem"});
$(".mytimecounter_line").css({"stroke":"blue", "stroke-width":"12"});
$(".mytimecounter_top").css({"font-family":"serif", "font-weight":"60", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"red", "font-size":"2rem"});
$(".mytimecounter_mid").css({"font-family":"serif", "font-weight":"60", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"blue", "font-size":"0.75rem"});
$(".mytimecounter_bot").css({"font-family":"serif", "font-weight":"60", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"#44c21c", "font-size":"2rem"});
$(".mytimecounter_clockdiv").css({"flex": 1, "position":"relative", "width":"100%", "min-width":"100%", "color":"blue", "text-align":"center", "font-family":"sans-serif", "font-weight":"100", "font-size":"3rem", "display":"flex", "align-items":"center", "justify-content":"center"});
$(".mytimecounter_clockdivdiv2").css({"min-width":"5%", "max-width":"5%", "width":"5%", "color":"blue", "text-align":"center", "font-family":"sans-serif", "font-weight":"100", "font-size":"3rem", "display":"flex", "align-items":"center", "justify-content":"center"});
$(".mytimecounter_clockdivdiv").css({"max-width":"15%", "min-width":"10%", "padding":"1rem 0rem 1rem 0rem", "border-radius":"3px", "background":"transparent", "display":"flex", "justify-content":"space-around", "align-items":"center", "flex-direction":"column", "position":"relative"});
$(".mytimecounter_clockspan").css({"margin":"0px", "padding":"15px 0px 15px 0px", "border-radius":"3px", "background":"transparent", "display":"inline-block"});
$(".mytimecounter_clockspan2").css({"padding-left":"0.4rem", "padding-right":"0.4rem", "flex-direction":"column", "height":"1ch", "min-height":"1ch", "max-height":"1ch"});
$(".mytimecounter_smalltext").css({"font-size":"1.15rem", "display":"block", "height":"1ch", "min-height":"1ch", "padding-top":"0.25rem"});
$(".mytimecounter_smalltext2").css({"font-size":"1.15rem", "display":"block", "height":"1ch", "min-height":"1ch", "padding-top":"0.25rem"});
$(".mytimecounter_seconds").css("color", "red");
/* we will use the id + child class selectors as it was in the original code although not really necessary ~ you could have just used the class selectors for this block code */
mytimecounter_initializeClock("mytimecounter_clockdiv", mytimecounter_deadline);
if ((Date.parse(mytimecounter_deadline) - Date.parse(new Date())) <= 0 && mytimecounter_fireworks) {
mytimecounter_str = "";
for (hnycount = 0; hnycount < mytimecounter_hny.length; ++hnycount) {
mytimecounter_str += mytimecounter_hny[hnycount] + ((hnycount != mytimecounter_hny.length-1) ? \'<span class="mytimecounter_midspan"></span>\' : "");
}
$(".mytimecounter_parent").css({"overflow-y":"clip", "display":"flex", "justify-content":"center", "width":"100%", "background-color":"#000000", "background-image":"url(\'" + mytimecounter_fireworksgif + "\')", "background-repeat":"no-repeat", "background-size":"cover"});
$(".mytimecounter_container").css({"min-width":"100%", "width":"100%", "height":"auto", "overflow":"hidden", "display":"flex", "flex-direction":"column", "justify-content":"center", "box-sizing":"content-box"});
$(".mytimecounter_clockdiv").html(\'<div class="mytimecounter_clockdivdiv"><span>\' + mytimecounter_str + \'</span></div>\');
$(".mytimecounter_clockdiv").css({"flex": 1, "padding":"2rem 0rem 2rem 0rem", "font-family":"Snell Roundhand, cursive", "text-transform":"uppercase"});
$(".mytimecounter_clockdiv span").css({"color":"#D7B030", "text-shadow":"#FC0 1px 0 10px"});
$(".mytimecounter_midspan").css({"padding":"1rem 0.5rem 0rem 0.5rem"});
}
var mobileBlockCheck = ("ontouchstart" in document.documentElement && /mobi/i.test(navigator.userAgent));
if (mobileBlockCheck) {
var h = $("#blockclocktimer").height(), w = $("#blockclocktimer").width();
var wratio = (120+w)* 0.00115;
var wadjust = w < 1920 && wratio > 0 && wratio < 1 ? wratio : "1.0";
$(".mytimecounter_container").css("font-size", "small");
$(".mytimecounter_container").css("transform", "scale(" + wadjust + ")");
var cw = $("#blockclocktimer").width(), ch = $("#blockclocktimer").height();
$(".mytimecounter_container").width(cw);
$(".mytimecounter_container").height(ch);
var offset = -1 * ($(".mytimecounter_parent").width() -($(".mytimecounter_parent").width() * wadjust)) / 2;
offset = Math.round((offset + Number.EPSILON) * 100) / 100;
$("#blockclocktimer").css("padding", offset);
}
var h = $("#blockclocktimer").height(), w = $("#blockclocktimer").width();
var wratio = (120+w)* 0.00115;
var wadjust = w < 1920 && wratio > 0 && wratio < 1 ? wratio : "1.0";
$(".mytimecounter_container").css("font-size", "small");
$(".mytimecounter_container").css("transform", "scale(" + wadjust + ")");
$(".mytimecounter_container").width(w);
$(".mytimecounter_container").height(h);
var offset = -1 * ($(".mytimecounter_parent").width() - ($(".mytimecounter_parent").width() * wadjust)) / 2;
offset = Math.round((offset + Number.EPSILON));
$("#blockclocktimer").css("padding", offset);
$(window).resize(function() {
var h = $("#blockclocktimer").height(), w = $("#blockclocktimer").width();
var wratio = (120+w)* 0.00115;
var wadjust = w < 1920 && wratio > 0 && wratio < 1 ? wratio : "1.0";
$(".mytimecounter_container").css("font-size", "small");
$(".mytimecounter_container").css("transform", "scale(" + wadjust + ")");
var cw = $("#blockclocktimer").width(), ch = $("#blockclocktimer").height();
$(".mytimecounter_container").width(cw);
$(".mytimecounter_container").height(ch);
var offset = -1 * ($(".mytimecounter_parent").width() -($(".mytimecounter_parent").width() * wadjust)) / 2;
offset = Math.round((offset + Number.EPSILON) * 100) / 100;
$("#blockclocktimer").css("padding", offset);
});
}
});
</script>';
The same thing with this code too Chen, see attached for current screenshot on Hobby
Try it now & let me know if it works properly this time.
It needs some adjustments for text sizing (words for: hours, minutes, etc.) & the padding needs a bit of adjustment.
I'll work on it later today to fix things up.
Yes that's better Chen, thank you
I just need to change the numbers to bold text
How can I add a little more space between the numbers and the days ,hours etc. The numbers are almost touching the letters
Try it now..
Quote from: Chen Zhen on January 02, 2025, 07:27:01 PMTry it now..
That's perfect Chen thank you, I have made a couple of changes for my personal use, the font weight I've increased to 500 and I've removed
, "' . $context['forum_name'] . ' Countdown" as I personally don't think it's necessary as it's already on that website, but overall it's great.
This is my version
global $context;
echo '
<script>
if (typeof mytimecounter_once === "undefined") {
var mytimecounter_fireworks = true, mytimecounter_fireworksgif = "https://example.com/fireworks.gif", mytimecounter_deadline = "2025-04-01", mytimecounter_width = "45rem";
var mytimecounter_days = "Days", mytimecounter_hrs = "Hours", mytimecounter_mins = "Minutes", mytimecounter_secs = "Seconds";
var mytimecounter_titles = ["Quiz and Arcade Reset"];
var total, seconds, minutes, hours, days, clock, updateTimeSpan, timeintervalCounter, endtime, mytimecounter_str, mytimecounter_once = true, hnycount = 0;
var mytimecounter_getTimeRemaining, mytimecounter_updateClock, mytimecounter_initializeClock;
}
</script>
<div id="blockclocktimer" style="position: relative;display: flex;flex-direction: row;align-items: stretch;width: 100%;overlfow: hidden;padding: 0.5rem;">
<div class="mytimecounter_parent" style="overflow: clip;width: 100%;">
<div class="mytimecounter_container" style="box-sizing: content-box;">
<h1 class="mytimecounter_top mytimecounter_titles0"></h1>
<h1 class="mytimecounter_mid">
<svg class="mytimecounter_svg" xmlns="http://www.w3.org svg">
<line class="mytimecounter_line" x1="0" y1="10" x2="250" y2="10" />
</svg>
</h1>
<h1 class="mytimecounter_bot mytimecounter_titles1"></h1>
<div class="mytimecounter_clockdiv">
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_dayz mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_days"></div>
</div>
<div class="mytimecounter_clockdivdiv2">
<span class="mytimecounter_clockspan2">:</span>
<div class="mytimecounter_smalltext2">�</div>
</div>
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_hours mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_hrs"></div>
</div>
<div class="mytimecounter_clockdivdiv2">
<span class="mytimecounter_clockspan2">:</span>
<div class="mytimecounter_smalltext2">�</div>
</div>
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_minutes mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_mins"></div>
</div>
<div class="mytimecounter_clockdivdiv2">
<span class="mytimecounter_clockspan2">:</span>
<div class="mytimecounter_smalltext2">�</div>
</div>
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_seconds mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_secs"></div>
</div>
</div>
</div>
</div>
</div>
<script>
mytimecounter_getTimeRemaining = function(endtime) {
total = Date.parse(endtime) - Date.parse(new Date());
seconds = Math.floor((total / 1000) % 60);
minutes = Math.floor((total / 1000 / 60) % 60);
hours = Math.floor((total / (1000 * 60 * 60)) % 24);
days = Math.floor(total / (1000 * 60 * 60 * 24));
return {total, days, hours, minutes, seconds};
}
mytimecounter_updateClock = function(id, endtime = "") {
if (endtime) {
updateTimeSpan = mytimecounter_getTimeRemaining(endtime);
$("." + id).find(".mytimecounter_dayz").html(updateTimeSpan.days);
$("." + id).find(".mytimecounter_hours").html(("0" + updateTimeSpan.hours).slice(-2));
$("." + id).find(".mytimecounter_minutes").html(("0" + updateTimeSpan.minutes).slice(-2));
$("." + id).find(".mytimecounter_seconds").html(("0" + updateTimeSpan.seconds).slice(-2));
if (updateTimeSpan.total <= 0) {
clearInterval(timeintervalCounter);
}
if (updateTimeSpan.days > 99) {
$(".mytimecounter_days").css("padding-right","1cw");
}
}
}
mytimecounter_initializeClock = function(id, endtime) {
mytimecounter_updateClock(id, endtime);
timeintervalCounter = setInterval(function(){mytimecounter_updateClock(id, endtime);}, 1000);
}
$(document).ready(function() {
if (typeof mytimecounter_twice === "undefined") {
var mytimecounter_twice = true;
$(".mytimecounter_titles0").html(mytimecounter_titles[0]);
$(".mytimecounter_titles1").html(mytimecounter_titles[1]);
$(".mytimecounter_days").html(mytimecounter_days);
$(".mytimecounter_hrs").html(mytimecounter_hrs);
$(".mytimecounter_mins").html(mytimecounter_mins);
$(".mytimecounter_secs").html(mytimecounter_secs);
$(".mytimecounter_parent").css({"overflow-y":"clip", "display":"flex", "justify-content":"center", "width":"100%"});
$(".mytimecounter_container").css({"width":mytimecounter_width, "min-width":mytimecounter_width, "max-width":"100%", "box-sizing":"content-box"});
$(".mytimecounter_svg").css({"height":"0.4rem", "width":"6rem"});
$(".mytimecounter_line").css({"stroke":"blue", "stroke-width":"12"});
$(".mytimecounter_top").css({"font-family":"serif", "font-weight":"80", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"red", "font-size":"2rem"});
$(".mytimecounter_mid").css({"font-family":"serif", "font-weight":"80", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"blue", "font-size":"0.75rem"});
$(".mytimecounter_bot").css({"font-family":"serif", "font-weight":"80", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"#44c21c", "font-size":"2rem"});
$(".mytimecounter_clockdiv").css({"flex": 1, "position":"relative", "width":"100%", "min-width":"100%", "color":"blue", "text-align":"center", "font-family":"sans-serif", "font-weight":"500", "font-size":"3rem", "display":"flex", "align-items":"center", "justify-content":"center"});
$(".mytimecounter_clockdivdiv2").css({"min-width":"5%", "max-width":"5%", "width":"5%", "color":"blue", "text-align":"center", "font-family":"sans-serif", "font-weight":"500", "font-size":"3rem", "display":"flex", "align-items":"center", "justify-content":"center"});
$(".mytimecounter_clockdivdiv").css({"max-width":"15%", "min-width":"10%", "padding":"1rem 0rem 1rem 0rem", "border-radius":"3px", "background":"transparent", "display":"flex", "justify-content":"space-around", "align-items":"center", "flex-direction":"column", "position":"relative"});
$(".mytimecounter_clockspan").css({"margin":"0px", "padding":"15px 0px 15px 0px", "border-radius":"3px", "background":"transparent", "display":"inline-block"});
$(".mytimecounter_clockspan2").css({"padding-left":"0.4rem", "padding-right":"0.4rem", "flex-direction":"column", "height":"1ch", "min-height":"1ch", "max-height":"1ch"});
$(".mytimecounter_smalltext").css({"font-size":"1.15rem", "display":"block", "height":"1ch", "min-height":"1ch", "padding-top":"0.25rem"});
$(".mytimecounter_smalltext2").css({"font-size":"1.15rem", "display":"block", "height":"1ch", "min-height":"1ch", "padding-top":"0.25rem"});
$(".mytimecounter_seconds").css("color", "red");
/* we will use the id + child class selectors as it was in the original code although not really necessary ~ you could have just used the class selectors for this block code */
mytimecounter_initializeClock("mytimecounter_clockdiv", mytimecounter_deadline);
if ((Date.parse(mytimecounter_deadline) - Date.parse(new Date())) <= 0 && mytimecounter_fireworks) {
mytimecounter_str = "";
for (hnycount = 0; hnycount < mytimecounter_hny.length; ++hnycount) {
mytimecounter_str += mytimecounter_hny[hnycount] + ((hnycount != mytimecounter_hny.length-1) ? \'<span class="mytimecounter_midspan"></span>\' : "");
}
$(".mytimecounter_parent").css({"overflow-y":"clip", "display":"flex", "justify-content":"center", "width":"100%", "background-color":"#000000", "background-image":"url(\'" + mytimecounter_fireworksgif + "\')", "background-repeat":"no-repeat", "background-size":"cover"});
$(".mytimecounter_container").css({"min-width":"100%", "width":"100%", "height":"auto", "overflow":"hidden", "display":"flex", "flex-direction":"column", "justify-content":"center", "box-sizing":"content-box"});
$(".mytimecounter_clockdiv").html(\'<div class="mytimecounter_clockdivdiv"><span>\' + mytimecounter_str + \'</span></div>\');
$(".mytimecounter_clockdiv").css({"flex": 1, "padding":"2rem 0rem 2rem 0rem", "font-family":"Snell Roundhand, cursive", "text-transform":"uppercase"});
$(".mytimecounter_clockdiv span").css({"color":"#D7B030", "text-shadow":"#FC0 1px 0 10px"});
$(".mytimecounter_midspan").css({"padding":"1rem 0.5rem 0rem 0.5rem"});
}
var mobileBlockCheck = ("ontouchstart" in document.documentElement && /mobi/i.test(navigator.userAgent));
if (mobileBlockCheck) {
var h = $("#blockclocktimer").height(), w = $("#blockclocktimer").width();
var wratio = (120+w)* 0.00115;
var wadjust = w < 1920 && wratio > 0 && wratio < 1 ? wratio : "1.0";
$(".mytimecounter_container").css("font-size", "small");
$(".mytimecounter_container").css("transform", "scale(" + wadjust + ")");
var cw = $("#blockclocktimer").width(), ch = $("#blockclocktimer").height();
$(".mytimecounter_container").width(cw);
$(".mytimecounter_container").height(ch);
var offset = -1 * ($(".mytimecounter_parent").width() -($(".mytimecounter_parent").width() * wadjust)) / 2;
offset = Math.round((offset + Number.EPSILON) * 100) / 100;
$("#blockclocktimer").css("padding", offset);
}
var h = $("#blockclocktimer").height(), w = $("#blockclocktimer").width();
var wratio = (120+w)* 0.00115;
var wadjust = w < 1920 && wratio > 0 && wratio < 1 ? wratio : "1.0";
$(".mytimecounter_container").css("font-size", "small");
$(".mytimecounter_container").css("transform", "scale(" + wadjust + ")");
$(".mytimecounter_container").width(w);
$(".mytimecounter_container").height(h);
var offset = -1 * ($(".mytimecounter_parent").width() - ($(".mytimecounter_parent").width() * wadjust)) / 2;
offset = Math.round((offset + Number.EPSILON));
$("#blockclocktimer").css("padding", offset);
$(window).resize(function() {
var h = $("#blockclocktimer").height(), w = $("#blockclocktimer").width();
var wratio = (120+w)* 0.00115;
var wadjust = w < 1920 && wratio > 0 && wratio < 1 ? wratio : "1.0";
$(".mytimecounter_container").css("font-size", "small");
$(".mytimecounter_container").css("transform", "scale(" + wadjust + ")");
var cw = $("#blockclocktimer").width(), ch = $("#blockclocktimer").height();
$(".mytimecounter_container").width(cw);
$(".mytimecounter_container").height(ch);
var offset = -1 * ($(".mytimecounter_parent").width() -($(".mytimecounter_parent").width() * wadjust)) / 2;
offset = Math.round((offset + Number.EPSILON) * 100) / 100;
$("#blockclocktimer").css("padding", offset);
});
}
});
</script>';I have kept the code on Hobby for the new year as I will change it again for quizland in December