Cookie Hinweisleiste

Scripte > Protection

Simple Cookiebar Hinweisleiste auf der Webseite

Cookie Bar - Hinweisleiste: Durch den Einbau eines Java Scripts am Ende des Body Bereichs, erscheint eine durch den Nutzer zu bestätigende Cookie Hinweisleiste.

Die Style-Anpassung an die Homepage sowie die Anpassung des Textinhaltes erfolgen nur in einer einzigen Datei: cookiebar.js

Der jeweilige Anpassungsbereich ist textlich grün gekennzeichnet.

ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. Javascript-Aufruf kopieren und am Ende vor dem schließenden Bodytag </body> der jeweiligen Seite einfügen.

Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.

Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.

x runter geladen

Screenshot:

Cookie Bar Hinweisleiste

Klicke unten auf die Schaltfläche „Ich stimme zu“, um die Cookie-Hinweisleiste auszublenden.

Es wird ein Cookie erstellt, sodass die Auswahl gespeichert wird.

Was ein Cookie ist und wie man diesen wieder löscht, erfahrt ihr hier.

Dummy page content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt enim vitae semper dignissim. Nulla id tortor sed urna mattis tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum venenatis ipsum, quis fringilla velit eleifend nec. Duis mollis, libero a lobortis laoreet, mi libero venenatis elit, nec tempor est dui a lacus. Suspendisse aliquam ligula arcu, quis aliquam risus pretium sed. Sed quis consequat leo. Aenean ullamcorper nisi non elit rutrum, at faucibus quam tempus. Nullam a nunc dolor. Duis egestas at ante sit amet dignissim.

Phasellus tincidunt, nibh in condimentum malesuada, ex arcu luctus metus, nec eleifend lorem purus vitae ante. Pellentesque pharetra ipsum massa, pharetra vulputate odio aliquam quis. Sed sapien erat, auctor eget libero vel, molestie malesuada lectus. Phasellus bibendum erat nulla, nec interdum mi aliquet et. Quisque finibus est ipsum, ut varius purus semper vel. Suspendisse accumsan sem vitae sapien consequat, sagittis finibus odio eleifend. Maecenas vestibulum a ante eu rutrum. Nam faucibus finibus augue, commodo pulvinar sem. Aenean facilisis pharetra ligula, vel finibus purus. Mauris nisl metus, fringilla a odio a, egestas imperdiet dolor. Curabitur sapien turpis, dignissim vitae turpis ac, scelerisque tincidunt nulla.

Cras non diam quam. Integer metus augue, pharetra et tincidunt placerat, laoreet ut ligula. Cras vitae pharetra nisl. Suspendisse cursus condimentum risus id ultrices. Donec laoreet efficitur tortor, quis cursus tortor pharetra non. Integer volutpat tristique quam, eu lacinia ante tincidunt a. Aliquam maximus euismod mattis. Cras ac mi ipsum. Aenean id dolor nibh. Mauris vitae est at urna aliquet lacinia. Integer rutrum non ligula posuere vulputate. Nam mauris nisi, feugiat in lobortis eu, commodo quis lacus. Aenean vel tortor sit amet risus aliquet aliquam. Proin consequat mi eget risus aliquam vehicula vitae et massa.

Code vor dem </BODY> Tag

Vor dem </BODY> Tag

Code Datei "cookiebar.js"

(function (window, undefined) {

"use strict";
var document = window.document;
function log() {

if (window.console && window.console.log) {
for (var x in arguments) {
if (arguments.hasOwnProperty(x)) {
window.console.log(arguments[x]);
}
}
}

}
function AcceptCookie() {

if (!(this instanceof AcceptCookie)) {
return new AcceptCookie();
}
this.init.call(this);
return this;

}
AcceptCookie.prototype = {

init: function () {

var self = this;
if(self.readCookie('AcceptCookie') == null) {
self.appendCss();
self.addCookieBar();
}
var clear_cookie_arr = self.getElementsByClass("ClearCookie", null, "a");
if(clear_cookie_arr.length > 0) {
self.addEvent(clear_cookie_arr[0], "click", function (e) {
if (e.preventDefault) {
e.preventDefault();
}
self.eraseCookie('AcceptCookie');
document.location.reload();
return false;
});
}

},
getElementsByClass: function (searchClass, node, tag) {

var classElements = new Array();
if (node == null) {
node = document;
}
if (tag == null) {
tag = '*';
}
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (var i = 0, j = 0; i < elsLen; i++) {
if (pattern.test(els[i].className)) {
classElements[j] = els[i];
j++;
}
}
return classElements;

},
addEvent: function (obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
} else if (obj.attachEvent) {

obj["e" + type + fn] = fn;
obj[type + fn] = function() { obj["e" + type + fn](window.event); };
obj.attachEvent("on" + type, obj[type + fn]);
} else {
obj["on" + type] = obj["e" + type + fn];
}

},
createCookie: function (name, value, days) {

var expires;
if (days) {

var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
expires = "; expires="+date.toGMTString();

} else {

expires = "";

}

document.cookie = name+"="+value+expires+"; path=/";

},
readCookie: function (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;

},
eraseCookie: function (name) {

var self = this;
self.createCookie(name,"",-1);

},
appendCss: function() {

var self = this;
var cssId = 'AcceptCookieCss';
if (!document.getElementById(cssId)) {
   var head = document.getElementsByTagName('head')[0];
   var link = document.createElement('link');
   link.id   = cssId;
   link.rel = 'stylesheet';
   link.type = 'text/css';
   link.href = 'https://fonts.googleapis.com/css?family=Open+Sans';
   link.media = 'all';
   head.appendChild(link);
}
// Style-Einstellungen Cookie Bar
var cssCode = "";
cssCode += "#AcceptCookieBar .AcceptCookieBarBtn,";
cssCode += "#AcceptCookieBar .AcceptCookieBarBtn:after { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }";
cssCode += "#AcceptCookieBar { position: fixed; bottom: 0; left: 0; z-index: 9999; overflow-x: hidden; overflow-y: auto; width: 100%; max-height: 100%; padding: 30px 0; background: #404040; font-family: 'Open Sans', sans-serif; text-align: center; }";
cssCode += "#AcceptCookieBar * { padding: 0; margin: 0; outline: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }";
cssCode += "#AcceptCookieBar .AcceptCookieBarShell { width: 90%; margin: 0 auto; }";
cssCode += "#AcceptCookieBar a[href^=tel] { color: inherit; }";
cssCode += "#AcceptCookieBar a:focus,";
cssCode += "#AcceptCookieBar button:focus { outline: unset; outline: none; }";
cssCode += "#AcceptCookieBar p { font-size: 18px; line-height: 1.4; color: #fff; font-weight: 400; }";
cssCode += "#AcceptCookieBar .AcceptCookieBarActions { padding-top: 10px; }";
cssCode += "#AcceptCookieBar .AcceptCookieBarBtn { position: relative; display: inline-block; height: 46px; padding: 0 30px; border: 0; background: #4285f4; font-size: 18px; line-height: 44px; color: #fff; text-decoration: none; vertical-align: middle; cursor: pointer; border-radius: 0; -webkit-appearance: none; -webkit-border-radius: 0; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; }";
cssCode += "#AcceptCookieBar .AcceptCookieBarBtn:hover,";
cssCode += "#AcceptCookieBar .AcceptCookieBarBtn:focus { text-decoration: none; }";
cssCode += "#AcceptCookieBar .AcceptCookieBarBtn:after { position: absolute; top: 0; right: 52%; bottom: 0; left: 52%; z-index: -1; border-bottom: 4px solid #14428d; background: rgba(20, 66, 141, .3); content: ''; }";
cssCode += "#AcceptCookieBar .AcceptCookieBarBtn:hover:after,";
cssCode += "#AcceptCookieBar .AcceptCookieBarBtn:focus:after { right: 0; left: 0; }";
cssCode += "@media only screen and (max-width: 767px) {";
cssCode += "#AcceptCookieBar { padding: 15px 0; }";
cssCode += "#AcceptCookieBar .AcceptCookieBarShell { width: 96%; }";
cssCode += "#AcceptCookieBar p { font-size: 16px; }";
cssCode += "}";
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (styleElement.styleSheet) {
   styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode));
}
document.getElementsByTagName("head")[0].appendChild(styleElement);

},
addCookieBar: function() {

var self = this;
var htmlBar = '';
htmlBar += '<div class="AcceptCookieBarShell">';
htmlBar += '<form action="#" method="post">';
// Textinhalt und Link Cookie Bar
htmlBar += '<p>Wir verwenden Cookies, um sicherzustellen, dass wir Ihnen das beste Erlebnis auf unserer Website bieten. <br />Durch das Schließen dieser Nachricht stimmen Sie unseren Cookies auf diesem Gerät gemäß unserer
<a href="cookiesite.php" target="_blank">Cookie-Richtlinie</a> zu, sofern Sie sie nicht deaktiviert haben.</p>';
htmlBar += '<div class="AcceptCookieBarActions">';
// Button-Text Cookie Bar
htmlBar += '<button type="button" class="AcceptCookieBarBtn">Ich stimme zu!</button>';
htmlBar += '</div>';
htmlBar += '</form>';
htmlBar += '</div>';
var barDiv = document.createElement('div');
barDiv.id = "AcceptCookieBar";
document.body.appendChild(barDiv);
barDiv.innerHTML = htmlBar;
self.bindCookieBar();

},
bindCookieBar: function(){

var self = this;
var btn_arr = self.getElementsByClass("AcceptCookieBarBtn", null, "button");
if(btn_arr.length > 0) {
self.addEvent(btn_arr[0], "click", function (e) {
if (e.preventDefault) {
e.preventDefault();
}
self.createCookie('AcceptCookie', 'YES', 365);
document.getElementById("AcceptCookieBar").remove();
return false;
});
}

}

};

window.AcceptCookie = AcceptCookie;

})(window);

window.onload = function() {

AcceptCookie = AcceptCookie();

}

» nach oben «