Ein erweitertes Script für Cookie-Hinweise

Eine Variante mit Position fixed und zusätzlichen Methoden

Im Unterschied zur simplen Variante, bei dem die Hinweise an Position top eingefügt werden, können die Cookie-Hinweise bei diesem Script beinahe beliebig frei im Browserfenster platziert werden. Weiterhin sorgt die CSS Positionsangabe fixed dafür, dass die Hinweise beim Scrollen an der gewählten Position im sichtbaren Bereich verbleiben. Um die unter “Position der Hinweise” geschilderten Probleme zu umgehen, erfolgt die Berechnung nicht ab top oder bottom, sondern nur ab top. Nähere Einzelheiten weiter unten

Übersicht – Zustimmung zur Nutzung von Cookies:

Hinweise zum Script

Da es mit der CSS Eigenschaft Position fixed in allen weiter verbreiteten Desktop-Browsern keine Probleme gibt, vereinfacht sich die Berechnung, wobei die Eigenschaft innerHeight die innere Höhe des Fensters liefert und die Eigenschaft offsetHeight die Höhe des DIV-Bereiches für die einzublendenden Hinweise. Bei der Berechnung wird nun lediglich die Höhe des Elementes von der inneren Höhe des Fensters abgezogen, minus des Abstands des Elementes vom unteren Randbereich. Im Beispiel beträgt dieser untere Abstand 40 Pixel.

Etwas anders verhält es sich bei mobilen Endgeräten, da hier Skalierung und Zoomlevel nicht unbedingt im Einklang stehen. Zumindest wenn gezoomt wird, gibt es bislang kaum eine Garantie, dass sich Position fixed wie erwartet verhält. Wie erwartet verhielt sich in durchgeführten Tests hingegen die CSS Eigenschaft Position mit dem Wert absolute. Bei der Berechnung kommt dann als dritter Parameter die Eigenschaft pageYOffset ins Spiel, um festzustellen, ob und wieviel gescrollt wurde.
Im Unterschied zur Position fixed verharren die Hinweise nicht wie eingefroren an einer Position innerhalb des Fenster, sondern springen mit einer Verzögerungszeit von 0,5 Sekunden zu dieser Position.

Da es sich bei der Einblendung der Hinweise auf dieser Seite nur um eine voll funktionsfähige Demo-Einblendung handelt, lassen sich die Einblendungen durch überschreiben des Cookies reaktivieren, falls diese bereits ausgeblendet wurden. Nach Betätigung des Buttons wird ein bestehendes Cookie überschrieben und das Script erneut aufgerufen.

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

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

/** --------------------------------------------------------------------------------
 * Scriptname:  HM-CookieHinweise
 * Description: Ein Script für die Einblendung von Cookie-Hinweisen in Position fixed.
 * Autor:       Horst Mueller
 * Autor URI:   http://www.coder-welten.com/
 * Version:     1.02
 * Datum:       14. 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";
var hm_oldbrowser = false;
/*----------------------------------------------------------------------------------
 * Funktionen nur aufrufen und Hinweise nur einblenden, falls der Browser nicht
 * nicht false für die Annahme von Cookies übermittelt.
 * ---------------------------------------------------------------------------------
 */
if (navigator.cookieEnabled != false) {
    if (window.addEventListener) {
        window.addEventListener("load", blendeHinweiseEin, false);
    }
    else if (window.attachEvent) {
        window.attachEvent("onload", blendeHinweiseEin);
        hm_oldbrowser = true;
    }
}
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) {
        /*--------------------------------------------------------------------------
         * Erzeugung des Div-Bereiches für die Einblendung. Die CSS-Eigenschaften
         * sowie Texte können angepasst werden, die URLs müssen angepasst werden.
         * -------------------------------------------------------------------------
         */
        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"));

        // Abfrage ob addEventListener oder attachEvent fuer IE kleiner 9
        if (hm_oldbrowser  == false) {
            einbutton.addEventListener("click", blendeMonatsHinweiseAus, false);
        }
        else if (hm_oldbrowser == true) {
            einbutton.attachEvent("onclick", blendeMonatsHinweiseAus);
        }
        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:82%;"                +
                      "max-width:600px;"          +
                      "font-family:Verdana;"      +
                      "font-size:14px;"           +
                      "color: #604c3e;"           +
                      "font-style:italic;"        +
                      "line-height:normal;"       +
                      "background-color:#f2e5b0;" +
                      "border:2px solid #98671a;" +
                      "border-radius:12px;"       +
                      "padding:12px;"             +
                      "position:fixed;"           +
                      "right:10px;"               +
                      "z-index:1000;"             +
                      "display:block;"            +
                      "box-shadow:0px 4px 6px #d3b7a9;";

        element.style.cssText = elstyle;
        document.body.appendChild(element);

    // Ausblendung nach 120 Sekunden
    window.setTimeout(blendeTagesHinweiseAus, 120000);
    /*------------------------------------------------------------------------------
     * Beide Funktionen nur aufrufen wenn die Hinweise eingeblendet sind, da
     * ansonsten kein Element mit der ID hinweise und mit der ID klickmich vorhanden
     * ist.
     * -----------------------------------------------------------------------------
     */
    ueberwacheButton("starten");
    ueberwacheScreen();
    }
}
// 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");
        // Starte Überwachung addEventListener
        if (hm_oldbrowser  == false) {
            ok_button.addEventListener("mouseover", schwebeStellung, false);
            ok_button.addEventListener("mouseout", normalStellung,  false);
        }
        else if (hm_oldbrowser == true) {
            ok_button.attachEvent("onmouseover", schwebeStellung);
            ok_button.attachEvent("onmouseout", normalStellung);
        }
    }
    else if (document.getElementById("klickmich") && was == "beenden") {
        ok_button = document.getElementById("klickmich");
        // Beende Überwachung addEventListener
        if (hm_oldbrowser  == false) {
            ok_button.removeEventListener("mouseover", schwebeStellung, false);
            ok_button.removeEventListener("mouseout", normalStellung,  false);
        }
        // Beende Überwachung attachEvent
        else if (hm_oldbrowser == true) {
            ok_button.detachEvent("onmouseover", schwebeStellung);
            ok_button.detachEvent("onmouseout", normalStellung);
        }
    }
    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";
    }
}
/*----------------------------------------------------------------------------------
 * Überwachung von Screen mit Fallunterscheidungen für mobile Endgeräte und
 * ältere Browser. Die Liste kann bei Bedarf erweitert werden.
 * ---------------------------------------------------------------------------------
 */
function ueberwacheScreen() {
    var mobile = /iPhone|iPad|iPod|Android|Windows Phone|BlackBerry/i.test(navigator.userAgent);
    var ismobi = (mobile) ? "Mobile" : "Nein";

    if (document.getElementById("hinweise")) {
        var blende = document.getElementById("hinweise");
        var ihoehe = blende.offsetHeight;

        if (ihoehe > 1) {
            // Korrigiere Abstand vom rechten Rand je nach Screen-Weite
            var iweite = (screen.availWidth < 1440) ? 4 : 20;
            var rechts = Math.round((screen.availWidth / 100) + iweite) ;

            if (window.innerHeight && screen.width > 800 && ismobi == "Nein") {
                var bistop = window.innerHeight - ihoehe - 40;

                blende.style.position = "fixed";
                blende.style.top      = bistop + "px";
                blende.style.right    = rechts + "px";
                window.setTimeout(ueberwacheScreen, 500);
            }
            else if (window.innerHeight && (screen.width <= 800 || ismobi == "Mobile")) {
                var bistop = (window.innerHeight - ihoehe - 40) + window.pageYOffset;

                blende.style.position = "absolute";
                blende.style.top      = bistop + "px";
                blende.style.right    = rechts + "px";
                window.setTimeout(ueberwacheScreen, 500);
            }
            else {
                blende.style.position = "fixed";
                blende.style.top = "40px";
            }
        }
    }
}
// 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" fuer 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 *