Ein simples Script für die Einblendung von Cookie-Hinweisen

Eine einfache Variante mit Position top

Nach dem einführenden Teilen zur Cookie-Richtlinie und den mit Position fixed verbundenen Problemen, möchten wir Ihnen auf dieser Seite eine erste Variante vorstellen. Diese Variante wurde so einfach wie möglich gehalten und blendet die Hinweise für eine definierbare Zeit an Top-Position ein. Obwohl einfach, wird der eigentlich Zweck vom Script vollauf erfüllt. Eine erweiterte Variante stellen wir auf der nächsten Seite vor.

Übersicht – Zustimmung zur Nutzung von Cookies:

Hinweise zum Script

Bei Verwendung des Scripts bitte folgendes beachten. Der anzuzeigende Text und ebenso die CSS Eigenschaften können nach Belieben geändert und angepasst werden. Wichtig ist einzig, dass die Syntax beachtet wird, da bereits ein fehlendes Semikolon oder einseitig fehlende Anführungszeichen einen Ausfall des Scripts zur Folge hätten.
Welche Zeiten wo verändert werden können, geht aus den Kommentaren im Script hervor und sollte leicht anpassbar sein. Sollten einzelne Zeichen oder Laute nicht richtig dargestellt werden, muss gegebenenfalls das Script mit einem geeigneten Editor in den jeweils vom Server verwendeten Zeichensatz konvertiert und gespeichert werden, wobei die Regel UTF-8 ist, bei älteren Seiten möglicherweise jedoch auch Windows -1252.Allgemeine Hinweise zur Einbindung von JavaScript sind auf der letzten Seite zusammengefasst.
Obwohl zwei Funktionen zum Speichern von Cookies in Script notiert sind, wird dennoch nur ein Cookie gesetzt. Je nach Ablauf werden nur die Werte eines bereits vorhandenen Hinweise-Cookies überschrieben.

Falls die Einblendung mit den Cookie-Hinweisen nicht mehr oberhalb vom Header angezeigt wird, weil der “OK”-Button betätigt wurde oder bereits ein Cookie existiert, wenn der Einstieg von einer der anderen beiden Seiten mit Beispielen erfolgte, kann der Button “Hinweise erneut einblenden” betätigt werden. Diese Möglichkeit ist nur bei der Demo-Einblendung gegeben, da nach Betätigung des Buttons ein bereits bestehendes Cookie überschrieben und die Hauptfunktion erneut aufgerufen.

Es sei angemerkt, dieses Script lässt noch einige Wünsche offen, so ist es unter anderem nicht abwärtskompatibel für IE kleiner Version 9. Es kann jedoch bei Bedarf angepasst oder erweitert werden. Im erweiterten Script auf der nächsten Seite wurden hingegen ältere Versionen des Internet Explorers berücksichtigt. Bei der erweiterten Variante erfolgt die Einblendung weiter unten als DIV-Bereich. Über zusätzliche Möglichkeiten verfügt die finale Variante, ist dafür jedoch weniger für Einsteiger zum Experimentieren geeignet.

Die Scripts sind kostenlos, ein kostenloser Support wird hingegen nicht übernommen. Einrichtung oder Anpassungen auf Anfrage.

Ablauf

In der ersten Zeile wird abgefragt, ob der Browser möglicherweise die Annahme von Cookies allgemein verweigert und dieses mit einem booleschen Wert dem Script mitteilt. Wurde kein false übermittelt, wird anschließend nach onload die Funktion “blendeHinweiseEin” aufgerufen. In dieser Funktion wird zuerst überprüft, ob noch kein Cookie mit dem Namen Hinweise und dem zugewiesen Wert existiert.
Sollte noch kein entsprechendes Cookie existieren, wird ein DIV-Bereich mit den gewünschten Hinweisen erzeugt und als erstes Kind-Element von Body platziert. Weiterhin wird ein Timeout gesetzt, nach wie viel Millisekunden die Hinweise ausgeblendet werden sollen und die Funktion “ueberwacheButton” aufgerufen. Diese Funktion dient lediglich der Erzielung eines Hover-Effektes.

Nach Ablauf der vorgegebenen Zeit wird die Funktion “blendeTagesHinweiseAus” aufgerufen, insofern nicht bereits vorher mit einem Klick auf “OK” die Funktion “blendeMonatsHinweiseAus” ausgelöst wurde. In beiden Funktionen wird ein und dasselbe Cookie gesetzt, nur mit unterschiedlichen Werten und von unterschiedlicher Lebensdauer. Nachdem ein Cookie gespeichert wurde, wird die Funktion “helfeBeraeumen” aufgerufen, welche die Überwachung des Buttons beendet und den anfänglich eingefügten DIV-Bereich wieder löscht.

Code der JavaScript-Datei hm-cookiehinweise.js in der Version 1.01:

/** --------------------------------------------------------------------------------
 * Scriptname:  HM-CookieHinweise
 * Description: Ein Script für die Einblendung von Cookie-Hinweisen in Position top.
 * Autor:       Horst Mueller
 * Autor URI:   http://www.coder-welten.com/
 * Version:     1.01
 * Datum:       12. August 2015
 * Lizenz:      GNU General Public License v2 oder hoeher
 * Lizenz URI:  http://www.gnu.org/licenses/gpl-2.0.html
 * Copyright:   © 2006/2015 - Verlag Horst Mueller - Stendal
 * ---------------------------------------------------------------------------------
 */
"use strict";

if (window.addEventListener && navigator.cookieEnabled != false) {
    window.addEventListener("load", blendeHinweiseEin, false);
}
function blendeHinweiseEin() {
    var pruefeTag = /hinweise=einenTag/;
    var pruefeMon = /hinweise=einenMon/;

    // Prüfe ob noch kein Cookie mit Namen "hinweise" für einen Tag oder Monat vorhanden ist.
    if (pruefeTag.test(document.cookie) != true && pruefeMon.test(document.cookie) != true) {

        var element = document.createElement("div");
        var hinweis = document.createTextNode("Unsere Website www.coder-welten.com " +
                                              "verwendet Cookies: ");
        var lkstyle = "text-decoration:none;" +
                      "font-family:Verdana;"  +
                      "font-size:14px;"       +
                      "font-weight:bold;"     +
                      "color:#98671a";

        element.setAttribute("id", "hinweise");

        var einlink = document.createElement("a");
        einlink.setAttribute("href", "http://www.example.com/datenschutz.html");
        einlink.setAttribute("target", "_blank");
        einlink.style.cssText = lkstyle;
        einlink.appendChild(document.createTextNode(" » Weitere Infos « "));

        var umbruch = document.createElement("br");
        var einoder = document.createTextNode("Mit der Nutzung unserer " +
        "Website erklären Sie sich mit dem Setzen von Cookies einverstanden. ");

        var einbutton = document.createElement("button");
        einbutton.setAttribute("id", "klickmich");
        einbutton.appendChild(document.createTextNode("OK"));
        einbutton.addEventListener("click", blendeMonatsHinweiseAus, false);
        einbutton.style.cssText = "font-style:normal;"        +
                                  "color:#5d402f;"            +
                                  "border:2px solid #c0c0c0;" +
                                  "border-radius:3px;"        +
                                  "margin-top:2px;"           +
                                  "padding-top:0px;"          +
                                  "padding-bottom:0px;"       +
                                  "vertical-align:-3px;"      +
                                  "cursor:pointer;";

        element.appendChild(hinweis);
        element.appendChild(einlink);
        element.appendChild(umbruch);
        element.appendChild(einoder);
        element.appendChild(einbutton);

        var elstyle = "width:100%;"                      +
                      "font-family:Verdana;"             +
                      "font-size:14px;"                  +
                      "color: #604c3e;"                  +
                      "font-style:italic;"               +
                      "background-color:#f3ddaf;"        +
                      "border-top:2px solid #98671a;"    +
                      "border-bottom:2px solid #98671a;" +
                      "padding-top:12px;"                +
                      "padding-right:12px;"              +
                      "padding-bottom:8px;"              +
                      "padding-left:22px;"               +
                      "margin-top:0px;"                  +  // 0 oder z.B. -8px je nach Design
                      "margin-bottom:8px;"               +
                      "margin-left:-8px;"                +
                      "display:block";

        element.style.cssText = elstyle;

        var bodyelement  = document.getElementsByTagName("body")[0];
        var firstelement = bodyelement.firstChild;
        bodyelement.insertBefore(element, firstelement);

    // Ausblendung nach 60 Sekunden
    window.setTimeout(blendeTagesHinweiseAus, 60000);
    // Nur aufrufen wenn benötigt
    ueberwacheButton("starten");
    }
}
// Verändert bei Hover das Aussehen des Buttons
function ueberwacheButton(was) {
    var ok_button;

    if (document.getElementById("klickmich") && was == "starten") {
        ok_button = document.getElementById("klickmich");
        // Beginne Überwachung
        ok_button.addEventListener("mouseover", schwebeStellung, false);
        ok_button.addEventListener("mouseout", normalStellung,  false);
    }
    else if (document.getElementById("klickmich") && was == "beenden") {
        ok_button = document.getElementById("klickmich");
        // Beende Überwachung
        ok_button.removeEventListener("mouseover", schwebeStellung, false);
        ok_button.removeEventListener("mouseout", normalStellung, false)
    }
    // Verändert bei Hover das Aussehen des Buttons
    function schwebeStellung() {
        ok_button.style.color = "#800000";
        ok_button.style.border = "2px solid #989898";
    }
    function normalStellung() {
        ok_button.style.color = "#5d402f";
        ok_button.style.border = "2px solid #c0c0c0";
    }
}
// Kleine Helferfunktion zur Beräumung bei Ausblendung
function helfeBeraeumen() {
    if (document.getElementById("klickmich")) ueberwacheButton("beenden");
    if (document.getElementById("hinweise")) {
        var beraeumung = document.getElementById("hinweise");
        beraeumung.parentNode.removeChild(beraeumung);
    }
}
/*----------------------------------------------------------------------------------
 * Speichere Cookie bei Ausblendung nach x Sekunden wegen fehlender Bestätigung nur
 * für einen Tag mit 24 x 60 x 60000 Millisekunden.
 * ---------------------------------------------------------------------------------
 */
function blendeTagesHinweiseAus() {
    var einTag = new Date();
    einTag.setTime(einTag.getTime() + (24 * 60 * 60000));
    document.cookie = "hinweise=einenTag; expires=" + einTag.toGMTString() + "; path=/";
    // Ausblendung nach x Sekunden wie eingestellt
    helfeBeraeumen();
}
/*----------------------------------------------------------------------------------
 * Speichere Cookie bei Bestätigung mit Klick auf "OK" für 30 Tage mit
 * 30 x 24 x 60 x 60000 Millisekunden.
 * ---------------------------------------------------------------------------------
 */
function blendeMonatsHinweiseAus() {
    var einMon = new Date();
    einMon.setTime(einMon.getTime() + (30 * 24 * 60 * 60000));
    document.cookie = "hinweise=einenMon; expires=" + einMon.toGMTString() + "; path=/";
    // Ausblendung bei "OK"
    helfeBeraeumen();
}



Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *