Cookie Notice ; Cookie Directive

[graphicz]

Having spent a lot of time trying to sort out a decent notice to comply with the new Cookie Directive ( http://www.ico.org.uk/for_organisati..._guide/cookies ) I have come up with this assembled from a variety of sources. Hopefully it will save people some time and stress.

It is a div which appears at the top of the page on first page load, but will not be displayed again for either 365 days or until the user clears his cache of cookies.

The div offers the viewer a link to agree, a link to get out and a link to Sellerdeck's Ts and Cs page (info.html) where often the privacy policy resides.

Here is an example: http://www.graphicz.gb.com/First-Time-Two-Three.html

Here is the code:
This goes before the </head> tag.

<style type="text/css">
/***  Cookie box  ***/
#cooktab {
  position: absolute;
   top:0px;
	left:0px;
	width:100%;
	height:auto;
	background:#001833;
	opacity:.80;
	-ms-filter: “alpha(opacity=80)”;
	filter: alpha(opacity=80);
	-khtml-opacity: .80;
	-moz-opacity: .80;	
	font-size:14px;
	color:#FFFFFF;
	text-align:	center;
	z-index:1000;
}
#cooktab p {
	font-size:14px;
	}
#cooktab a {color:white; text-decoration:none;}
#cooktab a:hover {color:white; text-decoration:underline;}
#inwardly {
position:relative;
height:auto;
width:70%;
padding:15px;
margin-left:auto;
margin-right:auto;
font-family: Georgia, "Times New Roman", Times, serif;
}
span.byebye {cursor:pointer;color: #fff; }
span:hover.byebye {color: #fff; text-decoration:underline; }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
 <script type="text/javascript">
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
 
function eraseCookie(name) {
	createCookie(name,"",-1);
}

$(function () {
  $(".byebye").click(function () {
  $("#cooktab").fadeOut('slow');
  });
});
</script>

This goes before the </body> tag.

<script>
var days = 365;
if (readCookie('kooksville')) {}
else {
document.write("<div id=\"cooktab\">");
document.write("<div id=\"inwardly\">");
document.write("<p>On 26 May 2011, the rules about cookies on websites changed. This site uses cookies. The Sellerdeck Shopping Cart cookies we use are essential for parts of the site to operate&nbsp;:");
document.write(":&nbsp;This site also uses cookies to allow you to use social networking buttons and for us to collect analytics data.<\/p>");
document.write("<p><span class=\"byebye\">OK by me<\/span>&nbsp;\/&nbsp;<a href = \"http:\/\/www.ico.org.uk\/for_organisations\/privacy_and_electronic_communications\/the_guide\/cookies\">Get me out of here<\/a>&nbsp;::&nbsp;<a href=\"info.html\">Privacy Policy<\/a><\/p>");
document.write("<\/div><\/div>");
    createCookie('kooksville', 'yes', days);
}
</script>

(NB. If you try this and preview locally on your PC in Chrome it doesn't work (it does in FF Safari etc) It has to be uploaded to a server to work in Chrome.)

There is also a hosted version of a cookie notice offered free by Heart Internet at:
http://www.heartinternet.co.uk/eu-cookie-law.html

I am sure there is some polishing to be done if anyone wishes.

Thank you.

[peblaco]

A few fixes needed.. Jquery link has no specified http so it would add the store folder and need the fix to change .js to %2Ejs from here thanks to Norman. The info.html link won't work from the home page, you can add the variable CatalogURL to create an absolute link. The span:hover.byebye is not valid CSS, you may have intended span.byebye:hover.

[graphicz]

Hi Louise

I had some issues with it working in v9 and v12, fixed by putting all the code in the head and using:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Without those lines I got: a javascript error is found '$' is undefined.

Also couldn't get <actinic:variable name="CatalogURL" /> to work within the javascript even with escape slashes: <actinic:variable name=\"CatalogURL\" \/\>
I got: OK by me / Get me out of here :: info.html">Privacy Policy

Thank you

[graphicz]

Yes it does work using the catalogurl variable. I was being too clever trying to use escapes inside the expression

[NormanRouxel]

SD text variables within JavaScript (or SD's embedded PHP) need to be put in single quotes and have encoding="perl" selectable="false" added.

E.g.

var myurl = '<actinic:variable name="CatalogURL" encoding="perl" selectable="false" />';

[BillS]

Nice bit of code - Thanks.

Cookie creation should be moved to .byebye.Click though, as any action on first page creates the cookie... as per:

$(function () {
  $(".byebye").click(function () {
  createCookie("SOI-Cookie", "yes", 365);
  $("#cooktab").fadeOut('slow');
  });