Setting Cookie with JavaScript

[BySplitDecision]

Good morning Freaks!

I'm currently working on a popup for my website but it appears every time I visit a page on my website.

What I would like to do is show the popup only 2 times, and if the user visits anymore pages, it doesn't show. I'm sure it's a simple tweak to my code but I haven't got a clue on how to set the cookie and then determine the amount of pages visited etc.

Here is my code below:

HTML:

<div id="popup-box">
	<div class="close-popup">X</div>
	<p id="popup-text">This is my text.</p>
	<a href="#">
		<img src="../img/isopod.jpg" alt="ISOPOD" title="ISOPOD">
	</a>
	<a href="#" id="popup-btn">Learn More <span class="icon">r</span></a>
</div>

 

CSS:

#popup-box {
    position: fixed;
    bottom: 0px;
    right: 0px;
    background: #fff;
    border: 2px solid #eaeaea;
    padding: 25px;
    z-index: 999999;
    text-align: center;
    display: none;
    box-sizing: border-box;
}

#popup-box .close-popup {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    z-index: 9999999;
    font-size: 22px;
    font-weight: bold;
}

#popup-box p {
    text-align: center;
    font-size: 26px;
}

#popup-box img {
    display: block;
    width: 280px;
    margin: auto;
}

#popup-box #popup-btn {
    width: 340px;
    border: 6px solid #455560;
    color: #455560;
    padding: 9px 16px 13px 20px;
    display: inline-block;
    z-index: 1;
    position: relative;
    font-size: 22px;
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 10px;
}

#popup-box #popup-btn:hover {
    color: #ffffff;
    background-color: #455560;
}

#popup-box #popup-btn span.icon {
    font-size: 24px;
    float: right;
    font-weight: bold;
    padding-top: 4px;
    text-transform: none;
}

 

JS:

jQuery(function(){

    setTimeout(function(){
        jQuery('#popup-box').fadeIn(500);
    }, 3000);

    jQuery('.close-popup').click(function(){
        jQuery('#popup-box').css("display","none");
    });
});

 

I believe I'd need to put the setTimeout function within an if() statement but I'm not sure how to store the cookie and then read that.

 

Many thanks in advance for any help you can provide.

Cheers,

BSD

 

[requinix]

Unfortunately, cookies in Javascript are difficult to deal with. Still. After all these years...

Check this.

[maxxd]

I've used js-cookie in the past and liked it quite a lot. It's very straightforward and seems to just work. I've only used it with the noConflict() method so I can't talk to any global namespace conflicts, though.

[BySplitDecision]

Thank you both for your replies.

I've gone through the websites but can't seem to figure out how I'm going to do it. 

My pages are built with the .php extension. Is it better to set a cookie using PHP?

 

Many thanks,

BSD

[requinix]

If you aren't already involving PHP in this process then there's no need to bring it in now just for cookies.

maxxd linked js-cookie. You can install and use it that way - look at the CDN section of the readme, it's just a matter of adding a <script>.

Otherwise the page I linked has, somewhere on it, a couple functions to read and write cookies. You would copy and paste that into your code somewhere so that you can use it.

[maxxd]

If you're using PHP how did this post get into the JavaScript forum? If you're dealing with PHP then yes, just use native PHP cookie functions. If you're using JavaScript, either use the library I linked to or the native functions detailed on the page requinix linked to. Either way, don't muddy the waters by involving a second language when either of the other two are perfectly capable of handling the problem.

[BySplitDecision]

Hi Requinix, 

Thanks for your message. I'll have another look over it, I'm just not sure on how to determine if the user has visited 2 pages so that I can stop the popup showing.

 

Maxxd,  It's not a case of me using JavaScript OR PHP, I'm using both within the website. I wanted to do it with JavaScript but after failing to grasp the 2 links sent, I simply asked if maybe PHP was the better way - as I know that's commonly how cookies are set.

Jeez.

 

Thanks Requinix,

BSD

[requinix]

3 minutes ago, BySplitDecision said:

Thanks for your message. I'll have another look over it, I'm just not sure on how to determine if the user has visited 2 pages so that I can stop the popup showing.

Get from cookie, if not set then start at 0. If value is >=2 then don't show popup. If value is <2 then increment, save to cookie, and show popup.

[maxxd]

3 hours ago, BySplitDecision said:

It's not a case of me using JavaScript OR PHP, I'm using both within the website.

OK - sorry if I came off harsh; didn't mean to be and that wasn't clear to me from your posts. In that case, go with whichever is more familiar to and comfortable for you. Personally, I use PHP if and when the option is available, but that's probably because I'm more familiar with PHP than JavaScript. That being said, whichever language is best for you to use, do what requinix suggests.