Blog (my web musings)

The EU cookie law went into effect in the UK in May 2012. UK's implementing guidance requires web sites to:

• Inform site visitors when a site uses cookies
• Explain what the non-essential cookies are and what they do
• Obtain consent to store non-essential cookies on the visitor's device

For more information, please see this nice "Everything You Need to Know About the Cookie Law in Five Minutes" article.

Accept Cookies / Cookie Consent Bar Demo:

Demo

The cookie consent bar uses CSS3 transitions to fade in from the bottom of the screen. 'OK' dismisses the bar and sets a cookie for 90 days to keep it hidden.

Compatibility

Works in all browsers, but IE8/9 users forego the fade effect.

About the Cookie Consent Bar

Like Google and Twitter et al, the notification bar takes an 'implied opt-in' approach, which is to continue using cookies, but tell users that they're being used. Telling users that your site uses cookies is the absolute minimum - to further comply with the law, you should;

• Briefly explain what cookies are and why they might be used
• Refer to a privacy policy outlining how your site uses cookies
• Advise people that they can change cookie settings in their browser

All of these things may appear in one 'cookie policy' document, but I've included 3 links in the demo to offer clear separation.

HTML markup

The markup for the bar is pretty straight-forward;

<div id="consent" class="consent">
    <p>This website uses cookies to make it better. By continuing to use the site, you agree to our use of cookies. [ <a href="about-cookies.htm">more info</a> | <a href="browser-settings.htm">change settings</a> | <a href="privacy-policy.htm">privacy policy</a> ]</p>
    <span><button id="ok" title="Agree to cookies and hide this bar for 90 days">OK</button></span>
</div>

You can change the text to your liking and just have one link to a web page about cookies.

CSS styling

You can dress it up any way you like with CSS - the basics for formatting, and sticking it to the bottom of the screen, are as follows;

.consent { position:fixed; display:table; left:0; bottom:0; width:100% }
.consent p, .consent span { display:table-cell; vertical-align:middle }
.consent button { float:right }

To expand on that with a fancy fade-in-and-up animation, we head towards CSS3 transitions territory;

.consent { -webkit-animation:fadeBar 1s 1s both; animation:fadeBar 1s 1s both }
@-webkit-keyframes fadeBar { 
    0% { opacity:0; -webkit-transform:translateY(100%) } 
    100% { opacity:1; -webkit-transform:none } 
    }
@keyframes fadeBar { 
    0% { opacity:0; transform:translateY(100%) } 
    100% { opacity:1; transform:none } 
    }

You'll notice that I've highlighted some things in red. This is just to show you how easy it is to change the position of the notification bar...

To move the bar to the top of the screen, just change bottom:0; to top:0;, and to reverse the fade-in-and-up animation so that it comes downwards instead, simply change all instances of 100%; to -100%; (negative 100%).

JavaScript

Now, to give functionality to the notification bar we need JS. After defining the variables, here's the part that hides the bar and also sets a cookie to keep it hidden for 90 days;

btn.onclick = function() { // hide bar and set cookie when button is clicked 
    bar.style.display = 'none'; 
    var d = new Date; 
    d.setTime(d.getTime()+24*60*60*1000*90); // 90 days 
    document.cookie = "consent=ok;path=/;expires="+d.toGMTString(); 
    }

Then this small function gets the cookie, reads it, and returns the value inside;

function getCookie(name) { 
    var v = new RegExp(name+"=([^;]+)").exec(document.cookie); 
    return (v != null) ? unescape(v[1]) : null; 
    }

... Ready to be used in this line, which is where the magic happens...;

bar.style.display = (cookie == 'ok') ? 'none' : 'table';

In plain English the line above means, "if the cookie value is 'ok', set the bar style to display:none (hide it), otherwise set it to display:table (show it)".

In the demo, I've included an inline snippet of code to delete the cookie - just to help you see the setting and unsetting magic between page refreshes.

Head over there for the complete example. Here's the link again to round things off...

Accept Cookies / Cookie Consent Bar Demo:

Demo