Jump to content
Sign in to follow this  
Theo van der Heijdt

Javascript cookie pop up

Recommended Posts

Hi all,

 

i am struggling with a javascript setting. In this Corona period i want to inform my site visitors about what changed in our company (For instance when to visit us again) and i want to give that pop-up in a weekly base, with the code i have put under this text  the popup checks daily and pop-up daily, how can i set the text to pop-up in a weekly base.

Is someone able to help please?

 

My text and code are based like this;

<div class="demomelding" style="display: none">
<h5>Beste Klant,</h5>
<p>De maatregelen rondom de bestrijding van het Covid-19 virus treffen ook de dienstverlening van Hexis.<br /><br />Wij zijn open, met de volgende aanpassingen: <br /><br />- Voorkom wachttijden. Bestel vooraf via webshop, mail of telefoon. <br />- Bestellingen kun je tussen 9 en 17 u afhalen. Kom alleen. <br />- We laten max. 3 personen tegelijk binnen. <br />- Hou je aan de route zoals die op de vloer is aangegeven.&nbsp;<br /><br />- Onze bezorgdienst voor de regio rijdt weer, <br />&nbsp;&nbsp; je bestelling van vandaag wordt weer de volgende dag bezorgd. <br /><br />Dank voor je medewerking.<br />#staysafe </p>
<div onclick="CloseDemoPopup();" class="exit-questions exittext">Klik hier om verder te gaan.</div></div>
<div class="demobg" style="display: none"></div>
<script>
function InitJquery(){if(botCheck()==false)
{
   CheckDemoPopup();
}
}


function CheckDemoPopup() {
    var localStorageDateTime = new Date(localStorage.getItem("Next-DemoPopup"));

    //Check of er al een cookie is gezet
    var currentDateTime = new Date(); //get the current time.

    var currentDate = currentDateTime.getDate();
    var localStorageDate = localStorageDateTime.getDate();

    if (localStorageDate == currentDate) {
        //Er is al op akkoord geklikt
    }
    else {
        setTimeout(DisplayDemoPopUp, 60);
    }
}

function DisplayDemoPopUp() {
    $('.demomelding').fadeIn(50);
    $('.demobg').fadeIn(100);
    $('body').css('overflow', 'hidden');
}

function CloseDemoPopup() {
    $('.demomelding').fadeOut(100);
    $('.demobg').fadeOut(100);
    $('body').css('overflow', 'auto');

    localStorage.setItem("Next-DemoPopup", new Date());
    //createCookie('Next-DemoPopup', "PopupShowed", 1);
}


</script>

<style>

.demomelding {
    width: 600px;
    height: 500px;
}
 </style>

Share this post


Link to post
Share on other sites

You can count whether seven days have passed by comparing the timestamps. The getTime() method converts each date into a number measured in seconds.

var SEVEN_DAYS = 7 * 24 * 60 * 60; // How many seconds in 7 days
if(localStorageDate.getTime() - currentDate.getTime() > SEVEN_DAYS) {
  // Popup code here
}

 

Share this post


Link to post
Share on other sites

This code would replace the part of your code which is calling DisplayDemoPopUp.

Share this post


Link to post
Share on other sites

Thank you, i am really new to it so it now looks like this, do you agree ?

 

<div class="demomelding" style="display: none">
<h5>Beste Klant,</h5>
<p>De maatregelen rondom de bestrijding van het Covid-19 virus treffen ook de dienstverlening van Hexis.<br /><br />Wij zijn open, met de volgende aanpassingen: <br /><br />- Voorkom wachttijden. Bestel vooraf via webshop, mail of telefoon. <br />- Bestellingen kun je tussen 9 en 17 u afhalen. Kom alleen. <br />- We laten max. 3 personen tegelijk binnen. <br />- Hou je aan de route zoals die op de vloer is aangegeven.&nbsp;<br /><br />- Onze bezorgdienst voor de regio rijdt weer, <br />&nbsp;&nbsp; je bestelling van vandaag wordt weer de volgende dag bezorgd. <br /><br />Dank voor je medewerking.<br />#staysafe </p>
<div onclick="CloseDemoPopup();" class="exit-questions exittext">Klik hier om verder te gaan.</div></div>
<div class="demobg" style="display: none"></div>
<script>
function InitJquery(){if(botCheck()==false)
{
   CheckDemoPopup();
}
}


function CheckDemoPopup() {
    var localStorageDateTime = new Date(localStorage.getItem("Next-DemoPopup"));

    //Check of er al een cookie is gezet
    var currentDateTime = new Date(); //get the current time.

    var currentDate = currentDateTime.getDate();
    var localStorageDate = localStorageDateTime.getDate();

    if (localStorageDate == currentDate) {
        //Er is al op akkoord geklikt
    }
    else {
       var SEVEN_DAYS = 7 * 24 * 60 * 60; // How many seconds in 7 days
if(localStorageDate.getTime() - currentDate.getTime() > SEVEN_DAYS) {
  // Popup code here
    }
}

function DisplayDemoPopUp() {
    $('.demomelding').fadeIn(50);
    $('.demobg').fadeIn(100);
    $('body').css('overflow', 'hidden');
}

function CloseDemoPopup() {
    $('.demomelding').fadeOut(100);
    $('.demobg').fadeOut(100);
    $('body').css('overflow', 'auto');

    localStorage.setItem("Next-DemoPopup", new Date());
    //createCookie('Next-DemoPopup', "PopupShowed", 1);
}


</script>

<style>

.demomelding {
    width: 600px;
    height: 500px;
}
 </style>

Share this post


Link to post
Share on other sites

That code won't work. The code that opens the popup is gone.

Of course, you need to replace the "// Popup code here" comment with the actual code that makes the popup appear. The "if (localStorageDate == currentDate)" block would need to be removed since that is the part that was checking for the current day before.

It seems like you are not familiar enough with Javascript yet. You should make an effort to understand what each line of code is doing. If there is a line of code that you don't understand, ask about it and I can explain it to you.

Share this post


Link to post
Share on other sites

Thanks for all your help, yes i am new to this and learning, but this is for my office, it is a message how we changed our policy in this corona time.

if you see my text above the script and the text of my button, my boss would like to change that it pop ups once a week. could you put the whole script here so i can copy paste it so that it works here, i am learning and learning, but this is still to difficult for me to understand, doing an online training but i am still a newbie, you would be of great help if you put the right message for me complete.

 

Thanks in advance

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...