We Keep Coding

Redirect after countdown ends

Currently, I have this in my HTML code and am not 100% sure on how to redirect to another page I have after the countdown finishes. I am not too familiar with javascript at the moment either, any help is appreciated. I know that when the page loads it takes the current time ( at the .now snippet) and just adds 10 seconds to it rather than a set time the script should end at then display the difference between present and that set time. The issue with this is that when anyone loads this page it would always show a countdown for 10 seconds to it rather than a universal countdown. For example, the time currently is 3:53 and should end at 4:00. Once the time hits 4 push the redirect.
<!--Countdown Script -->
<script type="text/javascript">
$(document).ready(function() {
$('#countdown17').ClassyCountdown({
theme: "flat-colors-very-wide",
end: $.now() + 10
});
});
</script>

You want to get the time from a fixed one. So, utilize Date built-in API instead of jQuery's $.now(), because
This API has been deprecated in jQuery 3.3; please use the native Date.now() method instead.
What time do you want? Determine it beforehand (GMT):
const date1 = new Date('September 13, 2021 04:00:00');
Then, when subtracting the dates you'll get the time remaining.
<!--Countdown Script -->
<script type="text/javascript">
$(document).ready(function() {
$('#countdown17').ClassyCountdown({
theme: "flat-colors-very-wide",
end: date1 - new Date() // gets the difference between determined date and current date
onEndCallback: () => {
window.location.href = "http://www.example.com";
}
});
});
</script>
Remember to handle the case when the time of access was after the pre-defined time.

add a callback parameter (function) to your countdown
<!--Countdown Script -->
<script type="text/javascript">
$('#countdown17').ClassyCountdown({
theme: "flat-colors-very-wide",
end: $.now() + 10,
onEndCallback: function () {
window.location.href = "http://www.newlink.com";
}
});
</script>

If you're trying to redirect and doesn't matter if is using javascript or not, use the tag from the HTML.
<meta http-equiv="refresh" content="10; URL="https://www.mywebsite.com.br/" />
It will count to 10 and redirect to your URL

I'm assuming this is the ClassyCountdown() jQuery plugin you are using: https://github.com/arsensokolov/jquery.classycountdown
If that's the case, it has an onEndCallback which is called once the countdown reaches 0.
So your code would become something like this:
<!--Countdown Script -->
<script type="text/javascript">
$(document).ready(function() {
$('#countdown17').ClassyCountdown({
theme: "flat-colors-very-wide",
end: $.now() + 10,
onEndCallback: function () {
document.location.href = 'https://www.google.com' // <- The url to redirect to
}
});
});
</script>
Updated answer to redirect at an absolute time:
$(document).ready(function() {
setInterval(function() {
// This is when you want the redirect to happen
// This is the absolute time, as reported by the users browser
let hour = 21;
let minute = 18;
let second = 20;
let date = new Date();
if (date.getHours() == hour && date.getMinutes() == minute && date.getSeconds() >= second) {
document.location.href = 'https://www.whatever.com';
}
}, 1000);
});

Updating Full Calendar Day At Midnight

//Reset At Midnight
function resetAtMidnight() {
var now = new Date();
var night = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate() + 1, // the next day, ...
0, 0, 0 // ...at 00:00:00 hours
);
var msToMidnight = night.getTime() - now.getTime();
setTimeout(function() {
reset(); // <-- This is the function being called at midnight.
resetAtMidnight(); // Then, reset again next midnight.
}, msToMidnight);
}
function reset() {
$('#calendar').fullCalendar('today');
}
I am trying to have FullCalendar.js update the current day everyday at midnight. I pulled this reset snippet from another post on here - but the reset function does not seem to execute.

You have not provided full detail so I don't know what exactly you need but following code might help you to solve your issue.
You can check midnight quite easily using moment.js library.
Following code was taken from another post Best Way to detect midnight and reset data
$(document).ready(function() {
var midnight = "0:00:00";
var now = null;
setInterval(function() {
now = moment().format("H:mm:ss");
if (now === midnight) {
alert('reset() function here');
}
$("#time").text(now);
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<code id="time"></code>
Fullcontrol:
You can either use rerenderEvents or refetchEvents as per your requirement. So it will be something like this
function reset(){
$('#calendar').fullCalendar('rerenderEvents');
OR
$('#calendar').fullCalendar('refetchEvents');
}
If you want to re-draw the fullcontrol then here is another informative post 're-draw fullcalendar'
As post suggested you can do
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar('render');

Expanding a multiple instance timer to be timezone aware

I have a js timer that is used to show a countdown to the end times on items that are sold in an auction format. The js I use is below.
$('[data-countdown]').each(function() {
var $this = $(this), finalDate = $(this).data('countdown');
$this.countdown(finalDate, function(event) {
$this.html(event.strftime('%-Dday%!D %-Hhr%!H %Mmin%!M %Ssec'));
});
});
I want to make this timezone aware so I searched online and found MomentJS.
I've included the moment-with-locales.min.js and moment-timezone-with-data-2010-2020.min.js files and they are being correctly loaded.
I'm really struggling to get my head around how to integrate the js into my current script as the sample on the github is for a single instance timer only.
The code example they give is
var nextYear = moment.tz("2015-01-01 00:00", "America/Sao_Paulo");
$('#clock').countdown(nextYear.toDate(), function(event) {
$(this).html(event.strftime('%D days %H:%M:%S'));
});
Now I assume I need to apply the
= moment.tz("2015-01-01 00:00", "America/Sao_Paulo");
type code to my date which are stored in data-countdown, but I just end up with a blank space where the countdown should be.
This is what I tried to do
var $this = $(this), finalDate = moment.tz($(this).data('countdown'), "America/Sao_Paulo");
Where have I gone wrong adding the moment.tz command?

I got it to work using
$('[data-countdown]').each(function() {
var $this = $(this), finalDate = moment.tz($(this).data('countdown'), "Europe/London");
$this.countdown(finalDate.toDate(), function(event) {
$this.html(event.strftime('%-Dday%!D %-Hhr%!H %Mmin%!M %Ssec'));
});
});
Only issue I have is that the time is 1hr out. An end time of 15:00 in London should have one hour more on the countdown in Paris, but it has two hours more at the moment.

Why does $(document).getElementbyId not work in this function while just document.getElementbyId works?

This is the function. I am including Jquery library from Google CDN and it is before this script.
{
$(document).ready( function() {
function displayTime() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
// This gets a "handle" to the clock div in our HTML
//This does not work???
var clockDiv = $(document).getElementById('clock');
//This works though
var clockDiv = document.getElementById('clock');
// Then we set the text inside the clock div
// to the hours, minutes, and seconds of the current time
clockDiv.innerText = hours + ":" + minutes + ":" + seconds;
}
// This runs the displayTime function the first time
displayTime();
});
}

As others have mentioned, to achieve the same functionality as you would using just the Web API for Document with jQuery, you would use a selector instead. As Arun P states, you would do
var clockDiv = $('#clock'); // select the div with an ID of clock
clockDiv.text( /* your text */ ); // set the text of the selected element to the passed argument
jQuery is a library the abstracts the Web APIs to help with cross-browser compatibility issues and to generally make navigating and manipulating the DOM a bit easier.

to set text in a div
$('#clock').text('some text');

Because jQuery returns the document information differently. If I remember correctly it would have to be:
$(document)[0].getElementById('clock');

Button selects webpage (from list) based on date

I am terrible with Javascript but learning from my bruises.
On the site I am working on - I currently have a page setup for everyday of the year (i.e. January 1st has its own page '01-jan-01.html' January 2nd is '01-jan-02.html') - I want to make a button that will look up the current date then send the user to the corresponding page (Think 'This day in history').
I already have a button that will pick one of these pages at random and the code works see below:
<script type="text/javascript">
var urls = [
'01-jan-01.html'
'01-jan-02.html'
....
];
function goSomewhere() {
var url = urls[Math.floor(Math.random()*urls.length)];
window.location = url; // redirect
}
Then on my button I simply call goSomewhere() on the onClick() and as i said earlier, this works fine. However I can't figure out how to select based on the CURRENT DATE. any help would be greatly appreciated. thank you!
EDIT: No answers but here is the progress so far:
<script>
var day = date.getDate();
var month = date.getMonth();
function goSomewhere() {
var url = month + "-" + day];
window.location = url; // redirect
}
</script>
This wouldn't even solve my problem entirely but its how I'm trying to wrap my head around the logic. In the above code I would still need to find a way to incorporate the 'jan' (month) varible in each webpage link since the formatting is 'MM-mmmmm-DD' - would it be easier if I change the naming mechanic to simply "MM-DD"? I'd prefer not to since it would involve a lot of manual work. Thanks

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
var yy = yyyy.toString().substr(2,2); //get two digit year
if(dd<10){ dd='0'+dd }
if(mm<10){ mm='0'+mm }
location.href = yy+'-'+mm+'-'+dd+'.html';