Once again I have messed about with various snippets of code from the web and come up with this countdown code for portal blocks.
I should add at this point is works without errors :D and I'm very please with myself for getting this far with it.
I'm using it to count down to New Year and the Quiz and Arcade reset on the site.
I'm only posting it here so you can look at it and tell me if I should have done anything differently
<h1 style="text-align: center; color:red; font-size: 35px; font-family: serif;"><b>New Year 2025</b></h1>
<h1 style="text-align: center; color:red; font-size: 10px; font-family:serif;">and</h1>
<h1><b>Quiz and Arcade Reset</b></h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds";; style="color: red;">></span>
<div class="smalltext">Seconds</div>
</div>
</div>
<style>
h1{
font-family: serif;
text-align: center;
color: #44C21C;
font-weight: 60;
font-size: 35px;
margin: 10px 0px 10px;
}
#clockdiv{
font-family: sans-serif;
color: blue;
/*display: inline-block;*/
font-weight: 100;
text-align: center;
font-size: 60px;
}
#clockdiv > div{
padding: 10px;
border-radius: 3px;
background: transparent;
display: inline-block;
align-content: center;
}
#clockdiv div > span{
padding: 15px;
border-radius: 3px;
background: transparent;
display: inline-block;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
}
</style>
<script>
function getTimeRemaining(endtime) {
const total = Date.parse(endtime) - Date.parse(new Date());
const seconds = Math.floor((total / 1000) % 60);
const minutes = Math.floor((total / 1000 / 60) % 60);
const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
const days = Math.floor(total / (1000 * 60 * 60 * 24));
return {
total,
days,
hours,
minutes,
seconds
};
}
function initializeClock(id, endtime) {
const clock = document.getElementById(id);
const daysSpan = clock.querySelector('.days');
const hoursSpan = clock.querySelector('.hours');
const minutesSpan = clock.querySelector('.minutes');
const secondsSpan = clock.querySelector('.seconds');
function updateClock() {
const t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
const timeinterval = setInterval(updateClock, 1000);
}
const deadline ='2025-01-01';
initializeClock('clockdiv', deadline);
</script>
Ok I take that back.
It seems that I still don't understand coding as it's messed up some of the existing text on the site. So I've removed it for the time being.
Probably the <styles> bit again, but I still can't understand how to do to code within the block, even trying to add bits from your visitor counter code
I'll give you some tips to attempt it on your own instead of doing it for you since you seem to want to learn javascript & html page markup.
css code belongs in the head of the document else you will flag W3C errors.
It may work but it's not the proper way to do it.
In your CSS, you have attempted to alter all h1 HTML tags & also the smalltext class which is used in many SMF themes including the default. So by using those you will likely affect other HTML on all your forum pages (this is called cascading). The clock ID's in the css are likely unique to your block code but I'm not sure without looking at it. What you need to do is make sure all the classes & ID's are unique plus use a class for your h1 tags instead of the actual tag in the CSS.
For much of the JavaScipt I suggest using JQuery when possible because it will ensure that you see the same behavior for all browsers. The thing about JavaScript is that various mainstream browsers do not always use the exact same syntax but JQuery is designed to take that into account to work on all browsers. This was more so in the past as newer versions of browsers now use the same syntax but still not in all cases so it's best to use the JQuery library that is already available for SMF.
Also JQuery provides predefined functions making it shorter for you by enabling you to use less code for the same effect.
It's a mix though.. sometimes you still use vanilla javascript where JQuery functions/syntax are not necessary.
What I showed you in the last block was using JQuery to alter the CSS of your containers & I suggest you use it.
You can also create a css file & have JQuery load that file if you find it easier that way.
If you do this then it might be easier to use a PHP block to get the global paths & then use echo for the HTML/JavaScript output.
Here is a starter... add a unique class to your h1 tags, unique class for the smalltext & might as well go with unique ids for the rest of it to avoid conflicts from other page css/output.
<h1 class="mytimecounter_title" style="text-align: center; color:red; font-size: 35px; font-family: serif;"><b>New Year 2025</b></h1>
<h1 class="mytimecounter_title" style="text-align: center; color:red; font-size: 10px; font-family:serif;">and</h1>
<h1 class="mytimecounter_title"><b>Quiz and Arcade Reset</b></h1>
<div id="mytimecounter_clockdiv">
<div>
<span class="mytimecounter_days"></span>
<div class="mytimecounter_smalltext">Days</div>
</div>
<div>
<span class="mytimecounter_hours"></span>
<div class="mytimecounter_smalltext">Hours</div>
</div>
<div>
<span class="mytimecounter_minutes"></span>
<div class="mytimecounter_smalltext">Minutes</div>
</div>
<div>
<span class="mytimecounter_seconds" style="color: red;">></span>
<div class="mytimecounter_smalltext">Seconds</div>
</div>
</div>
... change those in your CSS but try to use JQuery for your CSS & the maybe the selectors.
In your CSS it's...
.unique_class {
color: white;
background: black;
}
#unique_id {
color: white;
background: black;
}
To do the same internal css changes using JQuery it's like this (just examples):
$(".unique_class").css({"color":"white", "background-color":"black"});
$("#unique_id").css({"color":"white", "background-color":"black"});
Alternately for individual internal css changes (one thing at a time):
$(".unique_class").css("color", "white");
$(".unique_class").css("background-color", "black");
$("#unique_id").css("color", "white");
$("#unique_id").css("background-color", "black");
To affect the document & properly apply your changes to the DOM via JavaScript/JQuery, you need to ensure your code is executed after the page loads.
To do this you can use the JQuery document ready syntax. Your JavaScript functions don't need to be within the document ready function but executing your initializeClock() function & the css changes do need to be within it.
These need to be executed after the doucment loads (put your other functione before it & add your proper css classes, ids & styles to the example below):
$(document).ready(function() {
$(".unique_class").css({"color":"white", "background-color":"black"});
$("#unique_id").css({"color":"white", "background-color":"black"});
initializeClock('mytimecounter_clockdiv', '2025-01-01');
});
You don't really need to use so many constants or really use them at all if you declare all variables at the start of the JavaScript but we'll get into that later after you attempt to fix up your code.
Adjust it with the tips I gave you & post the results so I can see if you grasp what I explained.
OK thanks Chen, I'll look at it later
I see that you're using an iframe for now to negate the css issues.
Do you want to attempt to fix the previous code on your own or would you like me to post an entire fixed block code?
Quote from: Chen Zhen on December 03, 2024, 06:16:17 PMI see that you're using an iframe for now to negate the css issues.
Do you want to attempt to fix the previous code on your own or would you like me to post an entire fixed block code?
HI Chen,
The iframe is from another site that do those countdowns, that's the reason, the same as the visitor counter, I wanted to do my own.
I didn't do anything yesterday as I was busy all day but I plan on giving it a go today to try and see if I can write the code to work as you would. I'll let you know how I get on
I have genuinely had a go but I haven't got anywhere.
I went to Hobby and was going to test on there but then noticed that the code I created had changed and when I looked at the block on the portal page I noticed everything was OK, so that's when I realised you had done that last night
I had to make changes to the width from 60% to 100% as the days numbers where overlapping on Quizland Xmas theme, but that also might be my coding of the Xmas theme that caused that.
Thanks for posting the code there. Looking at your code what I started to do was nothing like yours, so I think I might have been there testing well after the date deadline had passed :D
I will be editing it though as I will use it for the normal arcade and quiz resets which will not need the fireworks etc
I'm now drawing a line under this
_________________________________________________ ;)
Off that subject now.
How is the PC build going?
Here is the code for other people that are interested (change example.com to the gif path ~ file attached):
<script>
var mytimecounter_fireworks = true, mytimecounter_fireworksgif = "https://example.com/fireworks.gif", mytimecounter_deadline = "2025-01-01", mytimecounter_width = "45rem";
var mytimecounter_days = "Days", mytimecounter_hrs = "Hours", mytimecounter_mins = "Minutes", mytimecounter_secs = "Seconds";
var mytimecounter_titles = ["New Year 2025", "Quiz and Arcade Reset"];
var mytimecounter_hny = ["happy", "new", "year"];
</script>
<div class="mytimecounter_parent">
<div class="mytimecounter_container">
<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 id="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>
<script>
var total, seconds, minutes, hours, days, clock, updateTimeSpan, timeintervalCounter, endtime, mytimecounter_str = "", hnycount = 0;
function mytimecounter_getTimeRemaining(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};
}
function mytimecounter_updateClock(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);
}
}
}
function mytimecounter_initializeClock(id, endtime) {
mytimecounter_updateClock(id, endtime);
timeintervalCounter = setInterval(function(){mytimecounter_updateClock(id, endtime);}, 1000);
}
$(document).ready(function() {
$(".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({"display":"flex", "justify-content":"center", "width":"100%"});
$(".mytimecounter_container").css({"width":mytimecounter_width, "min-width":mytimecounter_width, "max-width":"100%"});
$(".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":"35px"});
$(".mytimecounter_mid").css({"font-family":"serif", "font-weight":"60", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"blue", "font-size":"10px"});
$(".mytimecounter_bot").css({"font-family":"serif", "font-weight":"60", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"#44c21c", "font-size":"35px"});
$("#mytimecounter_clockdiv").css({"position":"relative", "width":"100%", "min-width":"100%", "color":"blue", "text-align":"center", "font-family":"sans-serif", "font-weight":"100", "font-size":"60px", "display":"flex", "align-items":"center", "justify-content":"center"});
$("#mytimecounter_clockdivdiv2").css({"width":"10%", "color":"blue", "text-align":"center", "font-family":"sans-serif", "font-weight":"100", "font-size":"60px", "display":"flex", "align-items":"center", "justify-content":"center"});
$(".mytimecounter_clockdivdiv").css({"max-width":"10%", "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({"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":"15px", "display":"block", "height":"1ch", "min-height":"1ch"});
$(".mytimecounter_smalltext2").css({"font-size":"15px", "display":"block", "height":"1ch", "min-height":"1ch"});
$(".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) {
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({"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"});
$("#mytimecounter_clockdiv").html('<div class="mytimecounter_clockdivdiv"><span>' + mytimecounter_str + '</span></div>');
$("#mytimecounter_clockdiv").css({"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"});
}
});
</script>
Since you say it needs adjustment for other themes then perhaps I'll post another one that works for all.
It uses flex containers so it shouldn't have needed any adjustment but perhaps I didn't test it enough.
I finished the PC build a while ago but was waiting for a TPM 2.0 chip from China that got lost in transit.
I've decided that I'm not going to bother with the TPM chip since it was easy to circumvent the W11 check plus the games & browsing that my daughter is going to use it for doesn't require it. The case & hardware are up to date & can be transferred onto a new mobo in the future which I can upgrade in about 3 - 4 years when she needs something more powerful.
From what I gather all I need to do is let her update W11 normally until the updates stop for the current W11 24H2 version & then I have to use another method to update to ie. 25H2 using something like Rufus or other ways I may explore.
Any used mobos that I buy in the future will likely be Asus Intel boards from 2015+ so that I can be sure they support TPM 2.0 & likely out of the box. Asus always has the option of an external TPM module which is why I'll stick with them just in case I need to upgrade it (but I will look for a USA source or at least USA/Canada supplier that has them stocked).
Quote from: Chen Zhen on December 04, 2024, 01:10:45 PMSince you say it needs adjustment for other themes then perhaps I'll post another one that works for all.
It uses flex containers so it shouldn't have needed any adjustment but perhaps I didn't test it enough.
The Xmas theme I created is based on SMF Default Curve which, with some help from Skhilled, I created about a year or so ago. But thinking on it now I don't think it was that that caused the problem it might be the fact that on Hobby I used EHPortal which the code and block works fine but on Quizland I use Tiny Portal so maybe it's a TP issue.
But it does work on TP once the
$(".mytimecounter_container").css({"width":"60%"});width is changed from 60 to 100%
Quote from: Chen Zhen on December 04, 2024, 01:10:45 PMI finished the PC build a while ago but was waiting for a TPM 2.0 chip from China that got lost in transit.
I've decided that I'm not going to bother with the TPM chip since it was easy to circumvent the W11 check plus the games & browsing that my daughter is going to use it for doesn't require it. The case & hardware are up to date & can be transferred onto a new mobo in the future which I can upgrade in about 3 - 4 years when she needs something more powerful.
From what I gather all I need to do is let her update W11 normally until the updates stop for the current W11 24H2 version & then I have to use another method to update to ie. 25H2 using something like Rufus or other ways I may explore.
Any used mobos that I buy in the future will likely be Asus Intel boards from 2015+ so that I can be sure they support TPM 2.0 & likely out of the box. Asus always has the option of an external TPM module which is why I'll stick with them just in case I need to upgrade it (but I will look for a USA source or at least USA/Canada supplier that has them stocked).
I wish I was still working and could afford to make my own PC since the early days of Windows 95 I have messed around inside of PC towers. My current PC is a Dell XPS8940 which I bought new back in 2021 just before I retired, I've added a lot more storage and upgraded Windows and the memory. It works very well and with having a 'NVIDIA GeForce GTX 1650 SUPER' helps with playing the odd adventure games I like, similar to Myst and Riven etc.
QuoteProcessor Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz 2.90 GHz
Installed RAM 32.0 GB (31.7 GB usable)
System type 64-bit operating system, x64-based processor
Edition Windows 11 Pro
Version 24H2
I edited the block code in the above post with some fixes.
- fixed width
- adjustable variables at the onset of the block (including text)
- subbed space with zero-width space
I think it needed a fixed width instead of the percentage, however I put in min & max widths in case it's viewed on a smartphone or tablet where the fixed width is too large. It should work properly now.. let me know.
Using all classes (no ids), variable functions & some logic, you can make it possible to put duplicate blocks on the same page.
Not that you'd necessarily want to do this but it's possible.
<script>
if (typeof mytimecounter_once === "undefined") {
var mytimecounter_fireworks = true, mytimecounter_fireworksgif = "https://example.com/fireworks.gif", mytimecounter_deadline = "2025-01-01", mytimecounter_width = "45rem";
var mytimecounter_days = "Days", mytimecounter_hrs = "Hours", mytimecounter_mins = "Minutes", mytimecounter_secs = "Seconds";
var mytimecounter_titles = ["New Year 2025", "Quiz and Arcade Reset"];
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 class="mytimecounter_parent">
<div class="mytimecounter_container">
<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>
<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);
}
}
}
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({"display":"flex", "justify-content":"center", "width":"100%"});
$(".mytimecounter_container").css({"width":mytimecounter_width, "min-width":mytimecounter_width, "max-width":"100%"});
$(".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":"35px"});
$(".mytimecounter_mid").css({"font-family":"serif", "font-weight":"60", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"blue", "font-size":"10px"});
$(".mytimecounter_bot").css({"font-family":"serif", "font-weight":"60", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"#44c21c", "font-size":"35px"});
$(".mytimecounter_clockdiv").css({"position":"relative", "width":"100%", "min-width":"100%", "color":"blue", "text-align":"center", "font-family":"sans-serif", "font-weight":"100", "font-size":"60px", "display":"flex", "align-items":"center", "justify-content":"center"});
$(".mytimecounter_clockdivdiv2").css({"width":"10%", "color":"blue", "text-align":"center", "font-family":"sans-serif", "font-weight":"100", "font-size":"60px", "display":"flex", "align-items":"center", "justify-content":"center"});
$(".mytimecounter_clockdivdiv").css({"max-width":"10%", "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({"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":"15px", "display":"block", "height":"1ch", "min-height":"1ch"});
$(".mytimecounter_smalltext2").css({"font-size":"15px", "display":"block", "height":"1ch", "min-height":"1ch"});
$(".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({"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"});
$(".mytimecounter_clockdiv").html('<div class="mytimecounter_clockdivdiv"><span>' + mytimecounter_str + '</span></div>');
$(".mytimecounter_clockdiv").css({"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"});
}
}
});
</script>
I'm home all day today so I'll do some checking, thanks again for the code
Carrying on from the post elsewhere.
The issue with the block is that on a mobile device it all get scrunched up.
If you look at the attachments you'll see what I mean. I have installed the block on Hobby along with a code from an online countdown site.
The online version changes size when the screen changes but your version doesn't.
As I said please don't put this in front of other plans you've got, I wont be using it untill the beginning of March
It's mostly a line-height issue but may require other changes.
I'll have a look.
I decided to try out scaling based on device window width.
Try this HTML block code & let me know...
<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", "Quiz and Arcade Reset"];
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 style="overflow: hidden">
<div class="mytimecounter_parent" style="overflow-y: 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);
}
}
}
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":"3rem"});
$(".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":"3rem"});
$(".mytimecounter_clockdiv").css({"position":"relative", "width":"100%", "min-width":"100%", "color":"blue", "text-align":"center", "font-family":"sans-serif", "font-weight":"100", "font-size":"4rem", "display":"flex", "align-items":"center", "justify-content":"center"});
$(".mytimecounter_clockdivdiv2").css({"width":"10%", "color":"blue", "text-align":"center", "font-family":"sans-serif", "font-weight":"100", "font-size":"4rem", "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({"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":"1rem", "display":"block", "height":"1ch", "min-height":"1ch"});
$(".mytimecounter_smalltext2").css({"font-size":"1rem", "display":"block", "height":"1ch", "min-height":"1ch"});
$(".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({"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 = $(window).height(), w = $(window).width();
var ratio = (120+w)* 0.00115;
var adjust = w < 1920 && ratio > 0 && ratio < 1 ? ratio : "1.0";
$(".mytimecounter_parent").css("font-size", "small");
$(".mytimecounter_parent").css("transform", "scale(" + adjust + ")");
}
$(window).resize(function() {
var h = $(window).height(), w = $(window).width();
var ratio = (120+w)* 0.00115;
var adjust = w < 1920 && ratio > 0 && ratio < 1 ? ratio : "1.0";
$(".mytimecounter_parent").css("font-size", "small");
$(".mytimecounter_parent").css("transform", "scale(" + adjust + ")");
});
}
});
</script>
I've added it on Hobby and it's working the same as the original no reduction in size.
All 3 different code blocks are there so you can see them