Run a function if a cookie exists

Question

Okay, I'm new to javascript coding, cookies etc., and I can't quite find the answer to my problem on the net. I'm trying to create a site that has a div that displays some helpful information at the top.

<div id="helpdiv">
<!--This content shows only on web browsers Internet Explorer 6/7/8/9/10/11 and Microsoft Edge.-->
Looks like your using Internet Explorer/Edge. This site is optimized when "Compatibility Mode" is disabled. Thank you!
</div>

I found some code that I can use that will show this div for 8 seconds, then disappear. But I want this to only show up once.

function closeHelpDiv(){
 document.getElementById("helpdiv").style.display=" none";
 }

 // close the div in 8 secs
 window.setTimeout( closeHelpDiv, 8000 );

I figured if a cookie was used, then the browser could check for that cookie, and if it existed, then it wouldn't need to show the div. Only the first time they visited the site.

So here's the flow I'm trying to acheive:

1. Check for a cookie named “helpText”

2. If the cookie doesn’t exist:

I want to run a function that hides a div (id="helpdiv") after 8 seconds of showing.

Here is some code I found that hides a div:

 function closeHelpDiv(){
 document.getElementById("helpdiv").style.display=" none";
 }

 // close the div in 8 secs
 window.setTimeout( closeHelpDiv, 8000 );

I then want to set a site cookie called ”helpText” so that next time they visit the site, the function won’t run again.

3. If cookie exists:

I want the div with an Id of “helpdiv” to have the style=“display:none;”

If I need to add anymore code, please let me know and I can explain more. Any help would be a life saver!!

Answer 1

You can check for cookies on the current web document like this:

document.cookie

So if you are planning to check for a specific string you could do an indexOf("") with the word you are looking for and validating if the index is more than 0.

if(document.cookie.indexOf("helpText") > 0 ){
   the cookie was found, so your function should be here
}else{
   cookie not found
}

Probably is better to do a search over Stackoverflow because there are a lot of answers about cookies and javascript:

Here It's a full answer about this: Check if cookie exists else set cookie to Expire in 10 days

Answer 2

try

function getCookie(name) {
  var value = "; " + document.cookie;
  var parts = value.split("; " + name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
}

from

Get cookie by name

Use it to check whether the cookie exists or not. In your code you can easily

 if(getCookie('helpText')!=''){
   $('selector').css('attrib','prop');
 }

Answer 3

Extending on Lemmy's answer, this is what you need:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"> 
    $(document).ready(function(){
        var myCookie = getCookie("helpText");

        if (typeof myCookie === 'undefined') {
            // close the div in 8 secs
            window.setTimeout( closeHelpDiv, 8000 );
        }


        function closeHelpDiv(){
            document.getElementById("helpdiv").style.display=" none";
        }

        function getCookie(name) {
            var value = "; " + document.cookie;
            var parts = value.split("; " + name + "=");
            if (parts.length == 2) return parts.pop().split(";").shift();
        }

    });
</script>  

Here is the updated script for your wordpress environment:

<script type="text/javascript"> 
    jQuery(document).ready(function($){
        var myCookie = getCookie("helpText");

        if (typeof myCookie === 'undefined') {
            // close the div in 8 secs
             window.setTimeout( closeHelpDiv, 8000 );
            //setTimeout(closeHelpDiv, 2000);
        }


        function closeHelpDiv(){
            document.getElementById("helpdiv").style.display=" none";
        }

        function getCookie(name) {
            var value = "; " + document.cookie;
            var parts = value.split("; " + name + "=");
            if (parts.length == 2) return parts.pop().split(";").shift();
        }
    });
</script>

In Wordpress you must use change the $ sign with jQuery and pass the $ sign into the function. The dollar sign in $(document).ready(function(){}); is not used for compatibility with other libraries.

Answer 4

So you need to set a cookie after displaying banner to user on her first visit -

function closeHelpDiv(){
    document.getElementById("helpdiv").style.display=" none";
    document.cookie="visitedBefore=true; expires=1 Jan 9999 12:00:00 UTC; path=/";
}

check with following code if that user already visited your site

function showBanner(){
    // check if visited Earlier
    if(!getCookie('visitedBefore'))){
        window.setTimeout( closeHelpDiv, 8000 );
    }   
}

function getCookie(name) {
   var value = "; " + document.cookie;
   var parts = value.split("; " + name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
}

  showBanner();

So you are doing all things correct just use cookies as described above.