Javascript for adding a cookie policy overlay

In accordance with EU laws introduced in May 2012, all web sites are required notify users about the sites cookies policies in order to obtain user consent.

Most sites include this in a prominent pop-up type overlay which appears when a user first visits a site. On clicking the 'Accept' button the message should disappear, and stay disappeared on subsequent pages and visits (ironically using a persistent cookie).

NOTE: I've come across a Drupal module which provides this functionality: EU Cookie Compliance Module

But should you want to create this yourself, here is the script to help you achieve the cookie overlay functionality.

1) Add the cookie policy notification message

Here is the HTML:

<div id="cookiePolicy" style="display:none">By continuing to use the site you agree to our <a href="/privacy-and-cookies-policy">cookies policy</a>. <a id="cookiePolicyAccept">Accept</a></div>

This is the basic CSS which will make it appear in an overlay:

#cookiePolicy {position:fixed; bottom:0; left:0; width:100%; background:#003a91; color:#fff; z-index:10000; text-align:center; padding:15px 0; margin:0;}

2) Add the javascript

This javascript uses jQuery to make the message appear and fade out once the 'Accept' button is clicked. It also records the fact that it's been clicked in a persistent cookie,so that when the user visits the site again the message doesn't appear. I would include this javascript via an external .js file. See this post on the best way to include external javascript files in Drupal

function getCookie(w){
  cName = "";
  pCOOKIES = new Array();
  pCOOKIES = document.cookie.split('; ');
  for(bb = 0; bb < pCOOKIES.length; bb++){
   NmeVal  = new Array();
   NmeVal  = pCOOKIES[bb].split('=');
   if(NmeVal[0] == w){
    cName = unescape(NmeVal[1]);
   }
  }
  return cName;
}

function setCookie(name, value, expires, path, domain, secure) {
var cookieVal = name + "=" + escape(value) + "; ";
if (expires) {
  cookieVal += "expires=" + expires.toUTCString() + "; ";
}
if (path) {
  cookieVal += "path=" + path + "; ";
}
if (domain) {
  cookieVal += "domain=" + domain + "; ";
}
if (secure) {
  cookieVal += "secure" + "; ";
}
document.cookie = cookieVal;
}

function setTimeOut(){
setTimeout(function(){
  $("#cookiePolicy").fadeOut("slow", function () {
   $("#cookiePolicy").remove();
  });
}, 15000);
}
function removeDivs(){
$("#cookiePolicy").fadeOut("slow", function () {
   $("#cookiePolicy").remove();
  });
}
$(document).ready(function(){
cookieValue = getCookie('hasVisited');
if (cookieValue == ""){
  $("#cookiePolicy").fadeIn("slow");
  setTimeOut();
}
$('#linkPrivacyPolicy').bind('click', function() {
  removeDivs();
});
$('#cookiePolicyAccept').bind('click', function() {
  removeDivs();
  var expiryDate = new Date();
  expiryDate.setDate(expiryDate.getDate() + 5 * 365);
  setCookie('hasVisited', '0', expiryDate, '/');
});
});

If you are using this javascript within a Drupal 7 site remember to enclose the above script within the below. See this post about using jQuery in Drupal 7.

(function ($) {
	   // your javascript here
})(jQuery);
Justin Chevallier

Justin Chevallier

Avid Drupal site builder & user for +10 years.

Comments

Submitted by Hans on

Thanx, exactly what i was searching for. Works perfect.

Submitted by karthik varma y on

Thanks Justin for the illustrated example

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.