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