If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

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.

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;

HTML Code:

<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;

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, simple 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;