Jump to content
#StayAtHome ×
BySplitDecision

Setting Cookie with JavaScript

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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

Check this.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

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.   Restore formatting

  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.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.