Javascript Notification Box Using Cookies to Remember Close

4th August, 2012 in Technical 22 Comments

Due to the EU Cookie Directive that came into force in May 2012, any site that uses cookies, and assumes consent to drop these cookies, will need a notification on the site to inform the visitor that cookies are used, linking to a page that can give more information on how to remove them. 

Usually we just disable all unnecessary cookies so there is no need for this, but if you are using unnecessary cookies you will need to add a suitable notification. This method adds a subtle notification box at the bottom of the website, which when closed will use cookies to remember the choice for subsequent visits.

Note: the user will require Javascript enabled for this to work. Ideally you should modify this script to show the message even with Javascript disabled

First, add the Javascript. We add this to our global JS file with our document.ready() call:

$(document).ready(function()
{
    /******************
    COOKIE NOTICE
    ******************/
    if(getCookie('show_cookie_message') != 'no')
    {
        $('#cookie_box').show();
    }

    $('.cookie_box_close').click(function()
    {
        $('#cookie_box').animate({opacity:0 }, "slow");
        setCookie('show_cookie_message','no');
        return false;
    });
});

function setCookie(cookie_name, value)
{
    var exdate = new Date();
exdate.setDate(exdate.getDate() + (365*25));
document.cookie = cookie_name + "=" + escape(value) + "; expires="+exdate.toUTCString() + "; path=/"; } function getCookie(cookie_name) { if (document.cookie.length>0) { cookie_start = document.cookie.indexOf(cookie_name + "="); if (cookie_start != -1) { cookie_start = cookie_start + cookie_name.length+1; cookie_end = document.cookie.indexOf(";",cookie_start); if (cookie_end == -1) { cookie_end = document.cookie.length; } return unescape(document.cookie.substring(cookie_start,cookie_end)); } } return ""; }

Secondly add the relevant styles to your stylesheet, which styles the box and fixes it at the bottom of the page:

/***************************
COOKIE BOX
***************************/
#cookie_box
{ 
	position: fixed;
	display: none;
	bottom: 0px;
	font-size: 0.8em;
	z-index: 1000;
	background:#393939;
	padding:5px;
	text-align:center;
	width:99%;
	color:#ffffff;
}
	#cookie_box a:hover
	{ 
		color:#ffffff;
		text-decoration: underline
	}

Lastly, add the relevant HTML to the page to show the notification box, your message, and the close button:

<div id="cookie_box">Our site requires cookies to function, <a href="/cookies">click here</a> for more information <a href="#" class="cookie_box_close">Close [X]</a></div>
Comments
Picture of Ishan Patel

Ishan Patel 4th November, 2012 at 14:24 pm

I want to use this script to show a box which onclick closes and re-show after 5 minutes ..... when a person click close then refresh page..... the code is not shown until 5 minutes are over.........

Picture of Laurence Cope

Laurence Cope 4th November, 2012 at 21:02 pm

Hi Ishan



I have not tried it but I guess you can put a 5 minute expiry time on the cookie, like this:

<pre>
expiry = new Date();
expiry.setTime(date.getTime()+(5*60*1000)); // Five minutes
[removed] = cookie_name+ "=" + escape(value) +"; expires=" + expiry.toGMTString();
</pre><br />
I got it from <a href="http://stackoverflow.com/questions/6092218/check-if-cookie-exists-else-set-cookie-to-expire-in-10-days">http://stackoverflow.com/questions/6092218/check-if-cookie-exists-else-set-cookie-to-expire-in-10-days</a>

Picture of CMorales

CMorales 22nd November, 2012 at 13:40 pm

Set a cookie not to show the notice about cookies? Recursion FTW! :D

Great and useful article, thank you :)

Picture of Laurence Cope

Laurence Cope 22nd November, 2012 at 15:41 pm

@CMorales Yes that's perfectly fine! This does not block cookies. It is a notification that we use cookies, so dropping one to remember to close this notification is fine!!

Picture of Cmorales

Cmorales 22nd November, 2012 at 16:09 pm

@Laurence Yes, I know, it only sounded ironic to me :D

Picture of Laurence Cope

Laurence Cope 22nd November, 2012 at 16:19 pm

Ha ha, yes I know what you mean. I wasn't sure if you were questioning it or like you say being ironic! :)

Picture of Dermot Dooley

Dermot Dooley 5th February, 2014 at 10:48 am

Works well with minimum code. cheers dude

Picture of Ingvild

Ingvild 21st February, 2014 at 13:54 pm

Hi! I am new to Javascript and need to add this type of code to my page. This was exactly the kind of tutorial I needed, thanks! I have managed to get it almost right, but when i press the "Close" button on one page the popup still appears on another page (if the other page is in another folder). I see you have written that "We add this to our global JS file with our document.ready() call:", can my problem be that I have placed the JS file in the wrong place?

Picture of Laurence

Laurence 21st February, 2014 at 14:50 pm

Hi Ingvild. You can use our contact form to send a link to your domain if you want me to take a look. As long as your Javascript is added to the page, or in a file that is added to the page, it should not matter what or where the file is. It does sound to me like the Cookie is not being set though. This remembers the Close state. Although if it does not show again when you refresh the same page, then it may be working on that page, and so maybe linked to the page URL, perhaps it thinks its a different site.

Picture of Dave

Dave 12th November, 2014 at 8:18 am

Hi Laurence. Just wondering, where would you put the expiry bit of code? Thanks

expiry = new Date();

expiry.setTime(date.getTime()+(5*60*1000)); // Five minutes

[removed] = cookie_name+ "=" + escape(value) +"; expires=" + expiry.toGMTString();

Picture of Laurence Cope

Laurence Cope 12th November, 2014 at 11:26 am

Hi Dave. Put that into the setCookie function.

Picture of DC

DC 15th December, 2014 at 15:10 pm

Hi Laurance. How would i make the welcome message appear after a set lapse of time, say 2 mins. Thanks in advance for your help. Cheers

Picture of Laurence

Laurence 15th December, 2014 at 22:29 pm

Well, this works with Javascript which will be bound to that page, as soon as someone moves to a new page, the Javascript will start over. So if someone stays on the same page for 2 minutes you can use a setTimeout function:

setTimeout(function () {

$('#cookie_box').show();

}, 120000);



Thats probably not suitable for 2 minutes as they'll go to a new page and the timer starts again. So you'll need to check the cookie is older than 2 minutes to show it instead of calling $('#cookie_box').show();. Its a bit a bit more complex so I wont have the exact code sorry.

Picture of Alan

Alan 18th February, 2015 at 19:37 pm

Hi,

I know this should be simple, I have everything working but I just want to change the link colours from the default to white. I used text-decoration: none; in the stylesheet and added style="text-decoration: none" in the html link tag, but nothing happens, Is the something in the script that needs changing???

Ta!

Picture of Laurence

Laurence 19th February, 2015 at 13:42 pm

Hi Alan

If you want to change the link colours, then using text-decoration: none will not do it, because text-decoration: none is removing the link underline. It does not change colour. To change colour to white, try style="color: #ffffff"

Picture of Alan

Alan 19th February, 2015 at 18:35 pm

That did it... many thanks for your time and trouble Laurence, most appreciated.

Picture of Alan

Alan 19th February, 2015 at 19:26 pm

Oh! just one more thing, is there a way to position the notification bar to the top of the page. I tried moving the div to the top of the body section, but it still appeared at the bottom of the page!!

Thanks again for the help.

Picture of Laurence Cope

Laurence Cope 2nd March, 2015 at 21:57 pm

Sorry, I only just noticed you left another comment! In the #cookie_box, change "bottom: 0;" to "top: 0;". Simple!



bottom: 0px;

Picture of Alan

Alan 13th March, 2015 at 18:03 pm

Thanks again Laurence, also sorry for the late reply, just got back from some travels, then confused by the new layout of the site.
Cheers

Picture of Suman Shrestha

Suman Shrestha 5th October, 2017 at 14:28 pm

I have copied exactly the same code(HTML, CSS, JS) as yours and created in codepen but refreshing the page bring back the notification. Is it expected behavior???
below is my code pen link:
https://codepen.io/suman/pen/RLxVRR

Picture of Laurence Cope

Laurence Cope 5th October, 2017 at 19:18 pm

No, if done correctly it would not bring back the notice. Maybe the JS is not working right and not laving the cookie, or checking the cookie. In Chrome I use the EditThisCookie plugin to check if the cookie is actually dropped and what the value is, you could check that to see. I also use it to delete this cookie if I wanted to test the notice again.

Picture of Laurence

Laurence 23rd October, 2017 at 10:26 am

Actually Suman, I recently noticed on SOME sites we have built the cookie box was coming back on sub-pages. It didn't on most sites, so its strange. So I added path=/ to the setCookie method to state the cookie is for the whole site.

Leave a Reply

Recent