EU Cookie Law Message with jQuery

Starting from 26th May 2012 all UK websites will be required to offer users an opt-in tool to allow cookies. Websites found not to be complying with the new ruling could be faced with a maximum fine of £500,000.

Popular website tools such as Google Analytics use what are described as unessential cookies which fall under this law. This means that if you use Google Analytics on your website, you must display a message informing your users that this is the case in order for your site to be compliant.

Here is a simple jQuery solution which will display a message on your site, and once clicked will not show up again.

First you need to add the HTML into your page, it is best to have this at the bottom just above the tag.

<div id="cookie-msg">
<div id="cookie-msg-inner">This site uses cookies. By continuing to browse the site you are agreeing to our use of cookies.
<div id="cookieClose">I Agree</div>
</div>
</div>

Now to style the message box with CSS. It is best to try and keep the message out of the way, so it is probably best to have it in a fixed position at the bottom of the page. You may need to edit the CSS to fit in with your website.

#cookie-msg{width:100%;line-height:40px;color:#F7F7F7;font-weight:700;text-align:left;display:none;min-width:1010px;background:#000;position:fixed;bottom:0;z-index:9999;}
#cookie-msg-inner{width:1000px;margin:0 auto;overflow:hidden;}
#cookie-msg-inner span{float:left;display:inline;}
#cookieClose{float:right;display:inline;cursor:pointer;background:#F60;line-height:24px;margin-top:7px;border:1px solid #C44F00;border-radius:3px;padding:0 8px;font-weight:700;color:#FFF;box-shadow:0 0 1px #FFF inset;}
#cookieClose:hover{background:#C44F00;}

So once that is done, you now need to add in the jQuery that remembers when the user agrees to accept cookies from your site. And yes you guessed it, this is done using a cookie.

Remember, you must have the jQuery file included on your page (within the tags). We recommend using Google API to server the JS file.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

You will also need jCookie, which is a jQuery plugin. Download the file here

Include jCookie within the tags, just under the jQuery file like this (remember to change the path to the file):

<script type="text/javascript" src="/path/to/file/jcookie.js"></script>

And then under that you need to add in the link to the code to set the cookie that remembers when someone has clicked “I Agree”. It should look like this:

<script type="text/javascript" src="/path/to/file/eucookie.js"></script>

To see this in action and find all the files, download the ZIP here.

Posted on 9th January 2013 by Stuart in jQuery, Website Management

cookie law, eu cookie law, jquery, jquery eu cookie

Related Posts from jQuery, Website Management

Web Design