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 

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?

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

OK thanks Chen, I'll look at it later

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

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


Thanks again Chen

$actCounter = false;
Just make the above variable false & it will tally all visits in a lump sum from any page that uses the block.
The only person that can reset the counter is an admin.


Here is another code that is likely set up the way you want it....

PHP block code:
global $user_info, $modSettings;
$actCounter = false; // boolean : true = different counter for each action, false = same counter for every action
$buttonName = !empty($actCounter) ? 'Page Views' : 'Visitors';
// allow a reset option for speicific users -> use array(0) for all admins, user id# for specific admin [ ie. array(1) ] or multiple user id#'s for specific users [ ie. array (1,3,8) ]
// requires $adminReset to be true else it will be ignored
$adminId = array(1);
$adminReset = true;
if (empty($user_info['is_guest']) && !empty($adminReset)) {
$allowReset = empty($adminId[0]) && !empty($user_info['is_admin']) ? true : (in_array($user_info['id'], $adminId) ? true : false);
}
list($title, $title2, $cursor, $ask, $ask2, $visitCount, $data) = !empty($adminReset) && !empty($allowReset) ?
array('Click to reset the counter', 'Click to reset the current action counter', 'help', 'Reset the page visit counter?', 'Reset the page visit counter for this action?', array(), array()) :
array('Page views', '', 'crosshair', '', '', array(), array());

// don't bother changing code below this comment
$action = !empty($_REQUEST['action']) && !empty($actCounter) && is_string($_REQUEST['action']) ? strtolower($_REQUEST['action']) . '_' : 'visitor_count_';
$reset = !empty($_REQUEST['visitorReset']) && is_string($_REQUEST['visitorReset']) && $_REQUEST['visitorReset'] == $action && !empty($allowReset) ? true : false;
$data = !empty($modSettings['website_visitor_count']) && json_validate($modSettings['website_visitor_count']) ? json_decode($modSettings['website_visitor_count'], true) : array();
$visitCount[$action] = empty($reset) && !empty($data) && !empty($data[$action]) ? intval($data[$action]) + 1 : 1;
$data[$action] = $visitCount[$action];
$setting = json_encode($data, JSON_INVALID_UTF8_SUBSTITUTE);
updateSettings(array('website_visitor_count' => $setting));
echo '
<div class="visitor_data_body">
<div>' . $buttonName . '</div>
<div class="website_visit_counter"></div>
</div>
<script>
$(document).ready(function() {
$(".visitor_data_body").css({"display":"flex","justify-content":"center","align-items":"center","flex-direction":"column"});
$(".website_visit_counter").prop("title", "' . (empty($actCounter) ? $title : $title2) . '");
$(".website_visit_counter").css({
"display":"flex",
"justify-content":"center",
"align-items":"center",
"flex-direction":"column",
"background-color":"#ff4957",
"height":"30px",
"width":"50px",
"color":"white",
"border-radius":"30px",
"font-weight":"700",
"font-size":"15px",
"margin-top":"10px",
"cursor" : "' . $cursor . '"
});

});
var posthash, visitCount = Number("' . $visitCount[$action] . '");
$(".website_visit_counter").html(visitCount);' . (!empty($allowReset) ? '
$( ".website_visit_counter" ).on( "click", function() {
if (confirm("' . (empty($actCounter) ? $ask : $ask2) . '") == true) {
posthash = location.hash.replace("#", "");
if(posthash != ""){
location.hash = "";
}
window.location.href = window.location.href.replace(/\;visitorReset=\d+/g,"").replace(/\;+$/, "").replace(/\#+$/, "") + ";visitorReset=' . $action . '";
} else {
return false;
}
});' : '') . '
</script>';

---

This one currently can only be reset by user id#1 which is you.
It asks for confirmation before a reset so you don't do it by accident.
The user IDs that can use the reset are configurable & it can be disabled altogether.
All variables at the onset of the block are more or less self explanatory or have remarks for guidance.

Thanks Chen

Yes the idea was for site wide page visits going forward and no need for a reset, I didn't understand the idea of the reset button in the first place as the number should just increase day by day as visitors and members come to the site.

I'll have a look at your code in a few days