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);
});
Related
//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');
<html>
<head>Harshal</head>
<script>
var limit="5:0"
var doctitle = document.title
var parselimit=limit.split(":")
parselimit=parselimit[0]*60+parselimit[1]*1
function beginrefresh(){
if (parselimit==1)
window.location.reload()
else{
parselimit-=1
curmin=Math.floor(parselimit/60)
cursec=parselimit%60
if (curmin!=0)
curtime=curmin+" minutes and "+cursec+" seconds left until page refresh!"
else
curtime=cursec+" seconds left until page refresh!"
document.title = doctitle + ' (' + curtime +')'
setTimeout("beginrefresh()",1000)
}
}
if (window.addEventListener)
window.addEventListener("load", beginrefresh, false)
else if (window.attachEvent)
window.attachEvent("load", beginrefresh)
</script>
</html>
This is my demo code. I'm refreshing the page every 5 minutes when someone clicks on the link and the tab title counts down the 5 fives. However, I cannot figure out how I can start the refresh at 8:01 a.m and then again at 8:06 am and then again at 8:11 a.m. and just keeps going and doesn't depend on when someone clicks on it.
Any help?
To achieve expected result, use SetInterval
SetInterval for every minute (1000*60)
GetTime in Hours and Minutes separately
Start after 8am or anytime after 8am
Check every 5 mins to refresh
refresh window
setInterval(function(){
var currTimeHr = new Date().getHours();
var currTimeMin = new Date().getMinutes();
if(currTimeHr >= 8){ //start at 8 or at any point after 8am
if(currTimeMin%5 === 0){ // check every 5 mins
window.location.reload(true); //refresh page
}
}
}, 1000*60)
code sample - https://codepen.io/nagasai/pen/MXVWxb?editors=1010
use set interval.
setInterval(function() {
window.location.reload();
}, 300000);
setinterval is in ms (5mins = 300k ms)
The new page (after refresh) has no awareness of the previous page's state. So you need a way to pass that state forward, through a query parameter or something.
My approach would be to just reload the page when they clicked the link, and have the new page set itself to refresh after 5 minutes (keeping the same url so we're loading the page with the refresh code).
if(window.location.search.includes('refresh')){
setTimeout(function(){//we're in "refresh mode" so just wait 5 minutes and do it again
location.href = location.href;
}, 1000 * 60 * 5);
}
refresh every five minutes
the example doesn't seem to work because the navigation. but it should work in theory
To start at specified time use the following "wait" function
var startHour = 8;
var startMinute = 5;
function wait() {
var startTime = currentTime = new Date();
startTime.setHours(startHour);
startTime.setMinutes(startMinute);
if (startTime < currentTime) {
setTimeout(wait, 1000);
} else {
// run refresh function here
}
}
I am using this jQuery cookie plugin for create & display cookie.
var date = new Date();
var minutes = 2;
date.setTime(date.getTime() + (minutes * 60 * 1000));
$.cookie('the_cookie', 'the_value', { expires: date });
alert($.cookie('the_cookie'));
I set two minutes (for test, usually I will use one hour. Explained below.), but if I visit the page again after two minutes, it is still displaying cookie alert.
What I want to do
I want to display a message to my website for one hour timing. It means, when visitor open my website first time, visitor can see the message. When visitor clicks on other page, the message will not show. After one hour, the message will show again.
How can I set minutes, hours as well as days?
Here is my codes fiddle.
That's because you're showing the alert after you create/recreate the cookie. :)
If you move alert($.cookie('the_cookie')); to the start of your code snippet, your cookie will disappear in 2 minutes.
Just use Chrome's Resources > Cookies tab to verify. :)
Here's an updated test harness that will also show the cookie expiring:
http://jsfiddle.net/bvaughn/860rr2Ly/
if ($.cookie('temporaryCookie')) {
alert('Cookie still set');
} else if ($.cookie('longerCookie')) {
alert('Cookie expired at ' + $.cookie('longerCookie'));
} else {
alert('Cookie never set');
}
var expiresAt = new Date();
expiresAt.setTime(expiresAt.getTime() + 5000); // 5 secs
$.cookie('longerCookie', new Date());
$.cookie('temporaryCookie', true, { expires: expiresAt });
You can try
var thecookie = $.cookie('shown');
if (!thecookie) {
var date = new Date();
var delay = 20 * 1000;
date.setTime(date.getTime() + delay);
$.cookie('shown', 'true', {
expires: date
});
$('body').html('show the message')
}
Demo: Fiddle
If you're not worried about IE8 and earlier, you can just use max-age and straight javascript as a simpler solution:
if (document.cookie.indexOf('the_cookie') == -1) {
//show message
document.cookie = 'the_cookie;path=/;max-age=120;';
}
This shows the message and sets a 2 minute cookie if the cookie has not been set previously or has expired.
I'm implementing a script with Colorbox which shows a nice popup the first time a user visits a website. This script that I found is setting the cookie to last for 15 days - what I want is to manually be able to manage the "cookie-update" by my own. In my case I want to use this script to show the user that my website has been updated and using the Colorbox to show the changelog; just on the first visit. Something like this:
Update #1 -> New cookie tells there's a new update -> Show Colorbox 1 time -> Then no more, until...
Update #2 -> New cookie tells there's a new update -> Show Colorbox -> ...and so on...
Short version of the question: How do I change the script from a 15 day timer to manually be able to change it so I can decide when I want to show my Colorbox with a new changelog?
The original script is located here:
http://papermashup.com/automatic-jquery-site-subscription-lightbox/
You need to put a date in the site - Note JS months start at zero
DEMO
var latestUpdate=new Date(2012,11,10).getTime(); // 10th of December
var whatVersionSeen = parseInt($.cookie("visited"));
if (isNaN(whatVersionSeen)) whatVersionSeen = 0; // first time
if (whatVersionSeen < latestUpdate) { // whatever in the cookie < latest update
$.cookie('visited', latestUpdate, { expires: 365 });
$.colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
}
the above code replaces
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
}
completely and expects to find $.cookie
There is Jquery Code in that Script.
$("document").ready(function (){
// load the overlay
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
}
$(".open_popup").colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
});
if you want to change the days then change it here.
var fifteenDays = 1000*60*60*24*15;
I need to redirect users to a different page after 12 seconds and I do this with i.e code. However I’d like to show them a simple countdown in any div so they know that this is about to happen in 12 (11, 10, 9….1, 0) seconds
This will need to be written with jQuery. Thanks
<meta content="120; url=http://www.example.com" http-equiv="refresh" />
You can use something like this instead:
<div id="counter">12</div>
<script>
var count = 12;
var timer = setInterval(function() {
if (--count < 1) {
clearInterval(timer);
window.location.href = "http://www.example.com/";
}
$("#counter").text(count);
}, 1000);
</script>
DEMO: http://jsfiddle.net/PeHFc/