JS/CSS Layer Script mit Cookie Reloadsperre

Hier habe ich mal ein Layer Script gecodet, welches rein auf Javascript aufbaut. Es wird also keine Serverseitige Sprache benötigt. Weder PHP noch MYSQL wird vorausgesetzt.

Die Reloadsperre basiert hier auf Cookie-Basis via Javascript. Es wird vorher überprüft, ob der User das speichern von Cookies erlaubt. Sind Cookies deaktiviert wird der Layer erst gar nicht angezeigt - da er sonst nicht mehr geschlossen werden könnte. Die Reloadsperre gilt also auch ganz ohne zusätzliche IP-Sperre, als sehr zuverlässig.

HTML CODE:

<!-- LAYER SCRIPT BY WWW.DUG-PORTAL.COM -->
<div style="display:none;" id="layer"><div id="line"><a name="exit" href="#exit" onclick="exit(); return false;">CLOSE</a></div><div id="inhalt"><span onclick="exit();">
<script src="LINK ZUR JS DATEI" type="text/javascript"></script>

<!-- Hier kommt der Layer-Inhalt rein! iFrame bitte IMMER wie folgt angeben:
<iframe scrolling="no" frameborder="0" src="http://www.google.de"></iframe> -->
</span></div></div>
<!-- LAYER SCRIPT BY WWW.DUG-PORTAL.COM -->

Diesen Teil am besten kurz vor dem schließenden </body> Tag einfügen! Damit wird sichergestellt dass die Ladezeit der Seite nicht durch den Layer beeinträchtigt wird.

JAVASCRIPT CODE:

//---------------------------------------------------------------------------------
// LAYER SCRIPT BY WWW.DUG-PORTAL.COM - EINSTELLUNGEN
//---------------------------------------------------------------------------------
var t1m3 = 1000*60*60; // Zeit in welchem Abstand der Layer erscheint
var layh = '400'; // Layer Hoehe
var layw = '600'; // Layer Breite
var layt = '80'; // Abstand oben
var layf = '1000'; // iFrame Hoehe (nur wenn ein iFrame als Inhalt angegeben wird)
var layx = '1000'; // iFrame Breite (nur wenn ein iFrame als Inhalt angegeben wird)
var layo = 'auto'; // Bildlaufleisten ein/ausblenden hidden/auto (Bei iFrame immer auf auto)
var layg = 'left'; // Text Ausrichtung
var lays = 'eeeeee'; // Layer Background Color
var layl = '99CC00'; // Leiste Background Color
var layb = '000000'; // Border Color
var laya = 'FF0000'; // Exit Link Farbe
var laye = 'ffffff'; // Exit Link Hover Farbe
//---------------------------------------------------------------------------------

// Alle Cookies holen
function gc(cn) {
if (document.cookie.length>0) {
st=document.cookie.indexOf(cn + "=");
if (st!=-1) {
st=st + cn.length+1;
en=document.cookie.indexOf(";",st);
if (en==-1) en=document.cookie.length;
return unescape(document.cookie.substring(st,en));
}}
return ""; }

// Funktion zum schliessen
function exit() {
document.getElementById('layer').style.display = 'none';

// + Cookie setzen
var a = new Date();
a = new Date(a.getTime() +t1m3);
document.cookie = 'layerdug=none; path=/; expires='+a.toGMTString()+';';

// Das Cookie für die Cookie-Prüfung unten, wird hier gelöscht
// Da es nur zur Überprüfung dient, wird es nicht länger benötigt
document.cookie = 'check=cookie; path=/; expires=Thu, 01-Jan-70 00:00:01 GMT;';
}

// Wenn kein Cookie gesetzt, Inhalt anzeigen
laydug=gc('layerdug');
if (laydug!="none") {

// Bzw. prüfen ob der User das speichern von Cookies erlaubt
// Inhalt verbergen wenn Cookies deaktiviert sind
document.cookie = 'check=cookie; path=/';
ccaon=gc('check');
if (ccaon=="cookie") {

// Layer Pixel berechnen
var layc = layw / 2;
var layy = layh - 39;

// Stylesheet generieren
var hct_b = document.createElement('style');
var hct_c = '#layer{z-index:999;position:fixed;border:1px solid #'+layb+';width:'+layw+'px;height:'+layh+'px;margin-left:-'+layc+'px;left:50%;top:'+layt+'px;background-color:#'+lays+';font-family:Verdana,sans-serif,tahoma;font-size:11px;}#inhalt iframe{border:0;width:'+layx+'px;overflow:hidden;height:'+layf+'px;}#line{border-width:0px 0px 1px 0px;border-style:solid;border-color:#'+layb+';padding:5px;text-align:right;background-color:#'+layl+';}#inhalt{height:'+layy+'px;overflow:'+layo+';text-align:'+layg+';padding:8px;}#line a{color:#'+laya+';text-decoration:none;font-size:9px;font-weight:bold;}#line a:hover{color:#'+laye+';}';

hct_b.setAttribute("type", "text/css");
if (hct_b.styleSheet) {
hct_b.styleSheet.cssText = hct_c;
} else {
var hct_a = document.createTextNode(hct_c);
hct_b.appendChild(hct_a);
}
var hh1 = document.getElementsByTagName('head')[0];
hh1.appendChild(hct_b);

// Layer von display:none auf block umstellen
document.getElementById('layer').style.display = 'block';
}
}

Dieser Teil wird in eine JS Datei (name.js) ausgelagert. Link zur Datei im Script drüber anpassen (siehe rot markierte Stelle).

Und so sieht der Layer dann aus:


Ich habe mich dazu entschlossen das ganze ohne Grafiken zu gestalten. Das Aussehen kann natürlich via CSS beliebig angepasst werden (siehe Einstellungen). Drückt man hier auf den "CLOSE" Link oder auf den Layer Inhalt, so verschwindet der Layer und die Releoadsperre wird aktiv. Der Layer taucht dann erst wieder auf, nachdem das Cookie abgelaufen ist (je nach eingestellter Zeit - aktuell 1 Stunde).

Hinweis:Damit der Layer richtig funktioniert muss ein gültiger DOCTYPE vorhanden sein!

Chanchelog (Last Update 22.06.2010)

22.06.2010
HTML Code und JAVASCRIPT Code voneinander getrennt.
Was eine bessere Performance + Übersicht bietet
Des Weiteren können jetzt auch sogenannte Randomscripte eingesetzt werden (Info)

Dieses Script lässt mehrere Banner rotieren (wird zur JS Datei hinzugefügt)

// Random Banner
var banner=new Array() // do not change this!

// Javascript Inhalte bitte maskieren! Beispiel: <'+'script><'+'/script>
banner[0] = 'BANNER_1';
banner[1] = 'BANNER_2';
banner[2] = 'BANNER_3';
banner[3] = 'BANNER_4';

var B = banner.length;
var whichbanner=Math.round(Math.random()*(B-1));
function showbanner(){document.write(banner[whichbanner]);}

Als Inhalt wird dann folgender Code angegeben:

<script type="text/javascript">showbanner();</script>

17.05.2010
Funktion zum überprüfen ob der User Cookies erlaubt (Info)

Sind Cookies deaktiviert wird der Layer nicht angezeigt. Sinnvoll, da die Reloadsperre auf Cookies basiert. Andernfalls könnte der Layer nicht mehr geschlossen werden.

27.12.2009
Bildlaufleisten angepasst
Zwei Browserspezifische Bugs behoben
Script mit zusätzlichen Kommentaren versehen
Sonstige kleinere Änderungen

26.12.2009
Komplett überarbeiteter Code
Einstellungen via Variabeln möglich
Bildlaufleisten hinzugefügt
iFrame Funktion (Hinweis)

Das iFrame muss immer wie folgt angegeben werden:

<iframe scrolling="no" frameborder="0" src="http://www.google.de"></iframe>

20.12.2009
Erste Version

Tags: css layer, javascript layer, css popup script, html css layer script