European Cookies Acceptance
The usage of Cookies on a website has to be declared to the user. The implementation presented on this webpage is an example how to implement a client using the Javascript Classses.
The first try to make an UnitTest has failed because the code in Javascript and the Client HTML and the JavaScript QUnit test does not work together. Therefor this HTML implementation is created.
The JavaScript class files are on Subversion and not presented here.
Software
Javascript needs to include the Javascript file Cookies.js from the directory jHaFr which implements:
- Class Cookies implementing the CRUD action on Cookies.
- Class CookieUser implementing the HTML & JavaScript actions for acceptance of Cookies.
The Website needs to create a HTML div block with id. Example: <syntaxhighlight lang="xml" line start="1"> <body>
</body> </syntaxhighlight> In this case the id is cookiesWarning. To activate the code you need: <syntaxhighlight lang="xml" line start="1">
<script type="text/javascript" src="../jHaFr/jquery-1.8.3.js"> </script> <script type="text/javascript" src="../jHaFr/basis.js"></script> <script type="text/javascript" src="../jHaFr/cookies.js"></script>
<script>
$(document).ready(function(){
var cu = new CookieUser("cookiesWarning", false);
cu.checkCookieExist();
});
</script>
</syntaxhighlight>
Customization
Every website has its own design. So the CSS has to be customized. An exampe <syntaxhighlight lang="xml" line start="1"> <style type="text/css" >
h2.cookie {
font-size: 24px;
}
h2.cookie,
.cookiesButton,
#cookiesWarning,
#cookiesWarningActive,
#CookieUser,
#readMoreURL {
font-family: Gotham, calibri, sans-serif;
}
#cookiesWarning {
font-size: 16px;
}
#cookiesWarningActive {
background: #FFFF69;
margin: 5px;
padding: 5px;
box-shadow: 8px 8px 4px #999;
border-radius: 7px;
}
#cookiesWarningActive small {
background: #FA5528;
border: none;
border-radius: 7px;
box-shadow: 8px 8px 4px #233E5B;
color: #fff;
margin-top: 10px;
margin-bottom: 10px;
padding: 3px;
}
#readMoreURL: a:link {
color: #000;
text-decoration: underline;
}
#readMoreURL: a:visited {
text-decoration: underline;
color: #000;
}
#text {
}
#warning {
}
</style>
</syntaxhighlight>
Full Client
<syntaxhighlight lang="xml" line start="1"> <!DOCTYPE HTML> <html> <head>
<meta charset="utf-8" />
<title>Cookies Acceptance Reference</title>
<style type="text/css" >
h2.cookie {
font-size: 24px;
}
h2.cookie,
.cookiesButton,
#cookiesWarning,
#cookiesWarningActive,
#CookieUser,
#readMoreURL {
font-family: Gotham, calibri, sans-serif;
}
#cookiesWarning {
font-size: 16px;
}
#cookiesWarningActive {
background: #FFFF69;
margin: 5px;
padding: 5px;
box-shadow: 8px 8px 4px #999;
border-radius: 7px;
}
#cookiesWarningActive small {
background: #FA5528;
border: none;
border-radius: 7px;
box-shadow: 8px 8px 4px #233E5B;
color: #fff;
margin-top: 10px;
margin-bottom: 10px;
padding: 3px;
}
#readMoreURL: a:link {
color: #000;
text-decoration: underline;
}
#readMoreURL: a:visited {
text-decoration: underline;
color: #000;
}
#text {
}
#warning {
}
</style>
<script type="text/javascript" src="../jHaFr/jquery-1.8.3.js"> </script> <script type="text/javascript" src="../jHaFr/basis.js"></script> <script type="text/javascript" src="../jHaFr/cookies.js"></script>
<script>
$(document).ready(function(){
if (false) {
console.log("[.ready] - cookiesWarning [jQuery]: " + $("#cookiesWarning").text() );
console.log("[.ready] - cookiesWarning [basis ]: " + getDomIdVal("#cookiesWarning") );
console.log("[.ready] - cookiesWarning [basis ]: " + $('#cookiesWarning').length );
console.log("[.ready] - cookiesWarning [basis ]: " + $('#cookieWarning').length );
$("#cookiesWarning").replaceWith('
');
}
// var cu = new CookieUser("cookiesWarningDiv");
var cu = new CookieUser("cookiesWarning", false);
cu.checkCookieExist();
});
</script>
</head> <body>
</body> </html> </syntaxhighlight>
