Execute javascript only once a week - javascript

I've got a question, im very new to javascript but i got this from the internet:
<script>
function lightbox_open(){
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
</script>
But i dont want to spam everyone this popup, so it only has to show 1 time every week on your pc, thought u can do this with a cookie. But im new to it so i cant get it working.
Someone that can help me out?
So if someone opens my page, show the popup. 2nd time he visits there is no popup, after 1 week the popup has to show again.

First create a function to set cookies:
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
Then, a function to get a cookie:
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length,c.length);
}
return "";
}
and finally, check if cookie is set or else do the work and set the cookie
function checkCookie() {
var lightbox = getCookie("lightbox");
if (lightbox === "") { // Cookie not set
lightbox_open();
setCookie("lightbox", "seen", 7);
}
}

Set a cookie that gets deleted after a week:
document.cookie = 'preventSpam;max-age=604800'; // 7 * 24 * 60 * 60
Then check whether the cookie exists
if (document.cookie) {
showSomePopup();
}
Beware: This is just a simplest possible demonstration. If you want to use cookies for more than this single use-case, you need to implement/import some kind of cookie getter/setter, as shown in documentation.

Related

How do delete elements from page based on cookie value?

I want to create a button on my webpage, which when clicked, sets a cookie with a specified value. The cookie should be valid for the entire domain, all its directories and sub-domains.
The code I'm using now is this:
function setCookie(cname, cvalue, exdays)
{
var d = new Date();
d.setTime(d.getTime() + (365*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "name1" + cvalue + "value1" + expires + ";path=/";
}
Then, once the cookie and its value is set, I want that button to get deleted from the page. Also, next time the page loads, I want to check if the cookie and the value exists and if not, show the button or else, delete the button.
The button in context has an id: delete
I'm using this code to check for cookie and its value:
function getCookie(name1)
{
var name = name1 + "value1";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++)
{
var c = ca[i];
while (c.charAt(0) == ' ')
{
c = c.substring(1);
}
if (c.indexOf(name) == 0)
{
return c.substring(name.length, c.length);
}
}
return "";
}
I've found these codes from here: https://www.w3schools.com/js/js_cookies.asp
I'm going to use this code to delete the element if the cookie and its value is present:
function removeElement(elementId)
{
var element = document.getElementById(delete);
element.parentNode.removeChild(element);
}
I've taken this code from here: https://www.abeautifulsite.net/adding-and-removing-elements-on-the-fly-using-javascript
I don't know how to link those 2 fuctions to carry out the required action.
Here is a working solution for you. Take a look at the comments inside the Code.
Are u new to JS? in this case you should take a look at codecademy. Its for free and you will learn the basics very fast.
Note that SO does not allow you to check or set cookies. For that reason the runable code below will cause an error. Here is a working fiddle.
if (getCookie('myCookie')) removeElement('myButton'); // remove if cookie is set
if (document.getElementById('myButton')) document.getElementById('myButton').onclick = function() { // bind function to clickevent
setCookie('myCookie', 'myValue', 1); // set cookie
removeElement('myButton'); // remove button
}
function setCookie(cname, cvalue, exdays) { // your setCookie Funktion
var d = new Date();
d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + '=' + cvalue + '; '+ expires + ";path=/"; // reset to w3schools solution
}
function getCookie(name) { // your getCookie Funktion
// removed 'var name = ...' because you wont find your cookie if you changing the name here
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function removeElement(elementId) { // your removeElement Function
var element = document.getElementById(elementId); // variable delete was undefined, if your buttons id was delete you had to write it in ''
element.parentNode.removeChild(element);
}
<button type="button" id="myButton">
click me
</button>
Going by your requirements you just want to delete a specific button if the cookie is present.
In this case you will need to do 2 things.
Call the getCookie and based on the return value call the removeElement at the end of the setCookie method.
Note: I am assuming your setCookie method is synchronous.
Load the button by default and do the same as Step 1 once the page is loaded.
To summarize, your mrthods should look like this:
setCookie method:
function setCookie(cname, cvalue, exdays){
var d = new Date();
d.setTime(d.getTime() + (365*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "name1" + cvalue + "value1" + expires + ";path=/";
if(getCookie(cname)) removeElement('delete');
}
After Loading the document:
document.onload = ()=>{
if(getCookie(cname)) removeElement('delete');
}

Redirect if access page without passing through another

For example I got 3 pages:
page1.html
page2.html
page3.html
How can I block people from accessing page2 without going to page1 first?
I'd like the only way to access this page it'd be by passing to page1 and clicking a link. Then from page2, I can access page3. Thanks!
If someone tries to access it, either an error or a redirect to page1.
You can use cookies to do this. I'm not the best at javascript, but here is what I found that you can modify.
So here is a step by step process you can use to get your result. This example came from w3schools
You need to set a cookie on page1.html.
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Now you need to get and check the cookies.
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
Hopefully, this will help you. Here is a fiddle with the complete JS: https://jsfiddle.net/uv3joc2b/
If you are using static html pages, you can add a cookie in page1.html, then read the cookie in page2.html.
If it doesn't exist redirect the user to page1.html

Display popup once per browser session not working

I want to display a popup once in per browser session in a day. So I collect this below script from here. But this script dose bot display anything anytime. Please help me to solved it.
Note: without script popup display well for every page start. But I just want once for my site per browser session.
Cookie script:
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
function checkCookie() {
var user = getCookie("ccname");
if (user != "") {
} else {
$(".socialbox").fadeIn();
$(".smallcontainers").fadeIn()
user = "mysocial";
setCookie("ccname", user, 1);
}
}

cookie is expired when browser closed for a html file locating on harddrive

It is a html file with Javascript which is located on my computer (not real home page).
I am using following JavaScript code to add a cookie, the cookie is stil alive when I don't close the browser but when I close the browse the cookie does not exist any more. How do I make the cookie survive in 4 days even when you close the browser?
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
setCooike("name", "test", 4);
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
getCookie("name") returns ""??
This is likely a setting in your browser to clear your cookies when you close it. So it cannot be resolved by code, some users will have this setting enabled and won't want to use cookies so you should plan for that situation.

Open overlay pop-up every 15 minutes

I looking to adv code like this page do : vozforums.com
They open a overlay pop-up every 15 minutes, use cookie. Here is screen shot :
I'm look in to they code and they using this pop-up code : http://defunkt.io/facebox/
But i'm do not know how to open pop-up every 15 minutes and just one-time per session (use jquery and cookie). So please help.
A cookie can be set for a certain amount of time. You just need to check if the cookie exists, you shouldn't show the popup else show it and set the cookie.
if(readCookie('popupshown') == null)
{
//show popup
}
methods for reading and setting cookies:
// Cookies
function createCookie(name, value, minutes) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (minutes * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
name = name;
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
setTimeout and jQyeryUI Modal Dialog will do the trick for you.
window.setTimeout(function () {
$("#myDialog").dialog("open");
}, numberOfMSToWaitBeforeOpening);
You'll need to to a little coding around management of the timeout when they close the dialog if you want a recurrence of the popup.

Categories

Resources