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.
Related
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);
});
<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 was following the steps in this topic here, and set up my cookie below to show my Modal once a day.
<script type="text/javascript">jQuery(document).ready(function($) {
$('#myModal').appendTo("body");
if ($.cookie("pop") == null) {
$("#myModal").modal("show");
$.cookie("pop", ’1′);
}
$('#myModal').modal({
keyboard: false,
backdrop:false
});});</script>
This works fine, but how do I set this up so that the cookie only last 30 minutes instead of one day?
you can pass in an object with expires as a key, the value of that will be the expire date of the cookie in days.
ie:
var date = new Date();
date.setTime(date.getTime() + (30 * 60 * 1000));
$.cookie("cookieName", "cookieValue", { expires: date });
this example would set the cookie to 30 minutes from the time of creation
I have a popup which is loaded after 30 seconds of viewing the homepage. Is it possible to have it load after 30 seconds of browsing the site and not just a particular page?
Thanks.
Update:
Current code still only loads the box after 30 seconds on each page load
var myDaemon = '';
localStorage.setItem('myTimestamp', Date.now());
if(myDaemon) clearInterval(myDaemon);
myDaemon = setInterval(function(){
var TimeDiffinSeconds = (Date.now() - localStorage.myTimestamp) / 1000;
if( TimeDiffinSeconds > 30){
requestcallback();
clearInterval(myDaemon);
localStorage.myTimestamp = Date.now();
}
},1000);
function requestcallback(){
// localStorage.clear();
var popup
if(localStorage["popup"] != null){
var timestamp = new Date().getTime(),
last_here = new Date();
last_here.setTime(localStorage["popup"]);
var current = last_here.getTime() + (7 * 24 * 60 * 60 * 1000);
if(current < timestamp){
popup = setTimeout(showPopup, 1);
}
}
else{
popup = setTimeout(showPopup, 1);
}
function showPopup(){
jQuery('.overlay').fadeIn();
clearTimeout(popup);
}
jQuery('.overlay .close').click(function(){
jQuery('.overlay').fadeOut();
var current = new Date().getTime();
localStorage["popup"] = current;
});
}
You could use Local Storage in order to save a time-stamp the moment the user visits the site , and then code a simple SetInterval to check that timestamp in specific intervals. If the difference between the current timestamp and the one saved is more than 30 seconds , you can launch your popup.
This is tricky with Javascript though. Depending on your Sites Design a different Approach is required. Also if it is for Security reasons , this is best done with AJAX and Validation through a Server. Javascript can be easily manipulated / prevented from a user and your code can be easily avoided.
A simple Example to get you going :
At your index page insert the following code :
<script>
var myDaemon = '';
localStorage.setItem('myTimestamp', Date.now());
</script>
We have declared a "var myDaemon = '';" so that we can hold our Daemons IDs in there and effectively Clearing them from any of our pages later.
Then at the Pages that you want to check for activity insert the following code :
if(myDaemon) clearInterval(myDaemon);
myDaemon = setInterval(function(){
var TimeDiffinSeconds = (Date.now() - localStorage.myTimestamp) / 1000;
if( TimeDiffinSeconds > 30){
alert('You have been browsing for more than 30 Seconds');
clearInterval(myDaemon);
localStorage.myTimestamp = Date.now();
}
},1000);
The if(myDaemon) clearInterval(myDaemon); is there to make sure we do not overlap Daemons and end up with a million of Alerts after visiting a few pages.
The clearInterval(myDaemon); after the alert is there to make sure that we stop the Daemon when we reach our goal.
The localStorage.myTimestamp = Date.now(); is there to make sure we reset our localstorage to a new Timestamp , in order to recalculate the activity of the user (if needed).
1) Define cookie functions (copy from w3school)
function setCookie(cname, cvalue, exdays) {...}
function getCookie(cname) {...}
function checkCookie() {...}
2) Create cookie if user doesn't have one
getCookie('user_first_visited') || setCookie('user_first_visited', Date.now());
3) Loop detecting if user visited over 30 seconds
if (!getCookie('user_popup_triggerred')) {
var loopDetect = setInterval(function(){
var TimePast = (Date.now() - getCookie('user_first_visited')) / 1000;
if( TimePast > 5){
alert('Browsed any page more than 5 Seconds');
clearInterval(loopDetect);
setCookie('user_popup_triggerred', 1);
}
}, 1000);
}
See jsfiddle, you can try it on two pages and you should not get popupBox on page reload after triggered once. Clean your browser cookie to try again.
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;