How to make your website EU Cookie compliant with jQuery

We posted a short time ago about the new EU cookie law coming into effect and have been meaning since then to post a solution you can put on your site to make it compliant with the new EU cookie law.

So, first you need to display the actual message and button that states that your website uses cookies. The code below is an example of what we use on our website:

<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. 
          <a class="cookmore" target="_blank" href="#">More Information</a>
          <div id="cookieClose">I Agree</div>
     </div>
</div>

So you have the message displayed (CSS styling advised), so now you need a handy bit of jQuery that remembers when the user agrees to accept cookies from your site. And this is done by using a cookie!!

So remember to have a link to jQuery in the head section of your page:

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

You will also need the jCookie plugin, which you can get from here: jCookie Plugin

And then we have the jQuery code (which goes within the tags on your webpage):

$(document).ready(function(){

var cookie = $.cookie(“hidden”);
var hidden = cookie ? cookie.split(“|”).getUnique() : [];
var cookieExpires = 365; // cookie expires in 365 days

// Remember the message was hidden
$.each( hidden, function(){
var pid = this;
$(‘#’ + pid).hide();
})

// Add Click functionality
$(‘#cookieClose’).click(function(){
$(‘#cookie-msg’).hide();
updateCookie( $(‘#cookie-msg’) );
});

// Update the Cookie
function updateCookie(el){
var indx = el.attr(‘id’);
var tmp = hidden.getUnique();
if (el.is(‘:hidden’)) {
// add item to hidden list
tmp.push(indx);
} else {
// remove element id from the list
tmp.splice( tmp.indexOf(indx) , 1);
}
hidden = tmp.getUnique();
$.cookie(“hidden”, hidden.join(‘|’), { expires: cookieExpires } );
}

if(hidden.indexOf(‘cookie-msg’) == -1) {
$(‘#cookie-msg’).slideDown();
};

});
// Return a unique array.
Array.prototype.getUnique = function() {
var o = new Object();
var i, e;
for (i = 0; e = this[i]; i++) {o[e] = 1};
var a = new Array();
for (e in o) {a.push (e)};
return a;
}

// Fix indexOf in IE
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(obj, start) {
for (var i = (start || 0), j = this.length; i < j; i++) { if (this[i] == obj) { return i; } } return -1; } } [/php]

And there we have it, a quick, simple solution to make your site compliant with the new EU cookie law. If you would like any more information on this, or would like us to implement the above code on your website please get in touch.