Next Generation Download: Ultimatedownload ist das größte deutschsprachige öffentliche Usenet-Archiv im Internet. Ultimatedownload bietet direkten Zugriff auf Millionen digitale Medien. 10.000 Terabyte an Daten erwarten Sie! Und täglich kommen 10 Terabyte hinzu. Egal ob Erotik, Software, Filme, Musik oder Computerspiele - im Usenet finden Sie das was Sie suchen. Jetzt kostenlos testen und 14 Tage mehr als 300 GB downloaden.

JS/CSS Layer Script mit Cookie Reloadsperre

Hinweis: Am heutigen Freitag dem 14.09.2012 habe ich die Version 2.0 meines Layer-Scripts fertiggestellt. Es gab viele Änderungen und Verbesserungen welche die Bedienung des Scripts erheblich erleichtern (siehe Chanchelog)

Hier habe ich ein Layer Script geschrieben, welches rein auf Javascript aufbaut. Es wird also keine Serverseitige Sprache benötigt. Weder PHP noch MYSQL wird vorausgesetzt. Zudem wird kein zusätzliches Framework wie etwa jQuery oder YUI benötigt.

Die Reloadsperre basiert bei diesem Layer auf Cookie-Basis via Javascript. Es wird vorher überprüft ob der User das Speichern von Cookies erlaubt. Ist das der Fall, so wird der Layer und sein Inhalt dem Besucher angezeigt. Andernfalls wird der Layer 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:
<!-- JS/CSS LAYER SCRIPT v2.0 - BY DUG-PORTAL.COM -->
 <div id="dp_layer" style="display:none;">
  <div id="dp_line"><span onclick="dplayer(0)">CLOSE</span></div>
   <div id="dp_inhalt">
    <script src="dug_layer.js" type="text/javascript"></script>
    <script type="text/javascript">
   dplayer("inhalt") // Layer Inhalt
  </script>
 </div>
</div>

Dieses HTML-Konstrukt kommt in die Seite wo der Layer erscheinen soll. Am besten direkt vor dem schließenden </body>-Tag. Dadurch wird verhindert dass die Ladezeit der Seite durch den Layer beeinträchtigt wird.

JAVASCRIPT SOURCE-CODE:
//-----------------------------------------------------------
// JS/CSS Layer Script mit Cookie Reloadsperre
// AUTOR......: DI4V0L0 - www.dug-portal.com
// LICENSE....: GNU GPL
// LANGUAGE...: Javascript
// VERSION....: 2.0
//-----------------------------------------------------------

function dplayer(c_lay) {
//-----------------------------------------------------------
// LAYER GRUNDEINSTELLUNGEN
//-----------------------------------------------------------
var t1m3 = 1000;        // Zeit in welchem Abstand der Layer erscheint (1000 = Eine Stunde)
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 Button Farbe
var laye = 'ffffff';    // Exit Button Hover Farbe

//-----------------------------------------------------------
// LAYER INHALT - EINSTELLUNGEN
//-----------------------------------------------------------
var linh = 'Inhalt <b>HTML</b>';    // Text, JS-Code, HTML-Code ect.
var ifri = 'http://dug-portal.com'; // iframe (URL zum iframe inklusive http://)

//-----------------------------------------------------------
// LAYER RANDOM-INHALT - EINSTELLUNGEN
//-----------------------------------------------------------
var srsrih=new Array()  // DIESE VARIABLE NICHT AENDERN!!
srsrih[0] = 'INHALT 1'; // Inhalt 1 - Text, JS-Code, HTML-Code ect.
srsrih[1] = 'INHALT 2'; // Inhalt 2 - Text, JS-Code, HTML-Code ect.
srsrih[2] = 'INHALT 3'; // Inhalt 3 - Text, JS-Code, HTML-Code ect.
srsrih[3] = 'INHALT 3'; // Inhalt 4 - Text, JS-Code, HTML-Code ect.
//------------------------------------------------------------

function dp_ach(a){if(document.cookie.length>0){var b=document.cookie.indexOf(a+"=");if(b!=-1){var c=b+a.length+1;var d=document.cookie.indexOf(";",c);if(d==-1)d=document.cookie.length;return unescape(document.cookie.substring(c,d))}}return""}var laydug=dp_ach('layerdug');if(laydug!="none"){document.cookie='check=cookie; path=/';var ccaon=dp_ach('check');if(ccaon=="cookie"){if(c_lay==0){document.getElementById('dp_layer').style.display='none';var nda=new Date();var ndb=new Date(nda.getTime()+t1m3*60*60);document.cookie='layerdug=none; path=/; expires='+ndb.toGMTString()+';';document.cookie='check=cookie; path=/; expires=Fri, 02 Jan 1970 00:00:00 UTC';return false}if(c_lay=="random"){var randB=srsrih.length;var whichbanner=Math.round(Math.random()*(randB-1));document.write((srsrih[whichbanner]));return false}if(c_lay=="iframe"){document.getElementById("dp_inhalt").innerHTML='<iframe src="'+ifri+'" scrolling="no" frameborder="0">Your browser does not support iframes</iframe>';return false}if(c_lay=="inhalt"){document.write(linh);return false}var layc=layw/2;var layy=layh-39;var hct_b=document.createElement('style');var hct_c='#dp_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:11px verdana,sans-serif,tahoma;}#dp_inhalt iframe{border:0;width:'+layx+'px;overflow:hidden;height:'+layf+'px;}#dp_line{border-width:0px 0px 1px 0px;border-style:solid;border-color:#'+layb+';padding:5px;text-align:right;background-color:#'+layl+';}#dp_inhalt{height:'+layy+'px;overflow:'+layo+';text-align:'+layg+';padding:8px;}#dp_line span{display:block;cursor:pointer;color:#'+laya+';text-decoration:none;font-size:9px;font-weight:bold;}#dp_line span: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);document.getElementById('dp_layer').style.display='block'}}}dplayer()

Der Source-Code muss in eine Javascript-Datei ausgelagert werden - zum Beispiel dug_layer.js - und der Pfad zu dieser Datei muss dann in dem HTML-Konstrukt  oben, angepasst werden (siehe rot markierte Stelle).

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

Erfolgreich getestet mit Internet Explorer 7, 8 und 9, Firefox, Google Chrome, Opera, Safari sowie allen gängigen Android Browsern. Durch die Cross-Browser-Fähigkeit sollte der Layer überall problemlos funktionieren.


Hinweise zu den Einstellungen für den Layer Inhalt
Der Layer Inhalt wird in der Javascript Datei hinterlegt (siehe Einstellungen). Ausgegeben wird der Inhalt dann über die jeweilige Funktion (siehe blau markierten Text im HTML-Konstrukt).

Es gibt genau 3 Funktionen welche für den Inhalt zuständig sind:

dplayer("inhalt") - Holt den Inhalt aus der Variable linh.
dplayer("iframe") - Holt die URL aus der Variable ifri und zeigt diese als iframe an.
dplayer("random") - Holt den Inhalt aus den Variablen srsrih[0], srsrih[1] u.s.w und gibt den Content zufällig wieder.

Als Inhalt kann entweder Text, HTML oder Javascript -Code angegeben werden (gemischt ist natürlich genauso möglich).

Das Array für den Random-Inhalt kann beliebig erweitert bzw. gekürzt werden. Um das Array zu erweitern, einfach srsrih[4] = 'INHALT 4'; in die nächste Zeile schreiben (immer um eine Zahl erhöhen - von 0 auf 1, 2, 3, 4 u.s.w).

Über das Random-Script wäre es auch möglich, mehrere iframes rotieren zu lassen. Dazu muss einfach der iframe Code direkt als Inhalt angegeben werden: <iframe src="http://example.com" scrolling="no" frameborder="0">Your browser does not support iframes</iframe>

Auch die Einbindung einer externer Javascript-Datei via <script src="inhalt.js" type="text/javascript"></script> ist möglich. Damit kann z.B Google-Ads oder jede andere beliebige Werbung ect. im Layer angezeigt werden. Wichtig ist nur dass jeglicher Code in EINER ZEILE geschrieben wird. Des Weiteren müssen Apostrophe mit Backslashes maskiert werden (e.g. \'\'). Auch Script-Tags müssen maskiert werden (e.g. <'+'script... <'+'/script>).

Beispiel 1: var linh = 'Das ist ein normaler Textinhalt mit Apostrophe \'\' als Beispiel';
Beispiel 2: var linh = 'Das ist HTML-CODE: <br /><img src="image.jpg" title="image" alt="image" />';
Beispiel 3: var linh = 'Eine externe JS-Datei: <'+'script src="layer.js" type="text/javascript"><'+'/script>';

Und so sieht der Layer dann aus:
Error: Image Not Found!

Ich habe mich dazu entschlossen komplett auf Grafiken zu verzichten. Das Aussehen kann natürlich via CSS beliebig angepasst werden (siehe Einstellungen). Drückt man hier auf den "CLOSE" Button, 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).

Chanchelog (Last Update 14.09.2012)

14.09.2012 [Version 2.0 fertiggestellt]
  1. Bug behoben welcher im Internet Explorer sowie Google Chrome manchmal Probleme machte, wenn als Inhalt eine Externe Javascript Datei angegeben wurde.
  2. Wird der Layer weg geklickt, so wird jetzt ein eventuell vorhandenes iframe nicht mehr im Hintergrund geladen.
  3. Der Inhalt wird jetzt über Funktionen ausgegeben (siehe Informationen zum Inhalt weiter oben)
  4. Das Random-Script sowie die iFrame-Funktion wurden direkt in den Source-Code integriert. In den Einstellungen kann so zwischen normalen Inhalt, Random-Inhalt oder einer iFrame-URL gewählt werden.
  5. Verschiedne Anpassungen bzw. Änderungen am Code vorgenommen. Unter anderem ist der Layer jetzt auch W3C konform.
  6. Teil des Source-Codes komprimiert
  7. Die Variable für die Zeitangabe welche dafür zuständig ist, in welchem Abstand der Layer erscheint, wurde so angepasst dass es für jedermann verständlich ist (1000 = Eine Stunde, 2000 = 2 Stunden u.s.w)
  8. Der Source-Code befindet sich jetzt in einer Javascript Funktion und sämtliche Variablen wurden als Lokale Variablen definiert. Damit wird ein Konflikt mit evt. identischen Variablen verhindert.

22.06.2010
  1. Funktion zum überprüfen ob der User das Speichern von Cookies erlaubt
  2. Random-Script Erweiterung (lässt verschiedene Inhalte rotieren)

27.12.2009
  1. Bildlaufleisten angepasst
  2. Zwei Browserspezifische Bugs behoben
  3. Script mit zusätzlichen Kommentaren versehen
  4. Sonstige kleinere Änderungen

26.12.2009
  1. Komplett überarbeiteter Code
  2. Einstellungen via Variabeln möglich
  3. Bildlaufleisten hinzugefügt
  4. iFrame Funktion

20.12.2009
  1. Erste Version

Tags: layer script javascript, popup cross browser css, html free reloadsperre, erstellen programmieren download

Kommentare:

  1. Der einzige Grund warum ich den Blog hier besuche sind die Scripte die hier angeboten werden.Finde ich echt genial.

    Danke

    AntwortenLöschen
  2. Freut mich danke! Naja der eine besucht den Blog wegen dem, der eine wegen dem andern ect. Deswegen gibt es hier ja auch von allem ein bisschen. (;

    AntwortenLöschen
  3. Wenn er jetzt noch von allen möglichen Seiten komm würde wäre er perfekt. ;)
    Aber mal wieder Top Arbeit von euch.

    AntwortenLöschen
  4. jetzt suche ich noch ein Rotations code!

    Könnte ich mal hinweise bekommen wo ich eins finde?

    AntwortenLöschen
  5. danke aber ich kappiere das net

    AntwortenLöschen
  6. Was kapierst du nicht? Also einfacher als einfach geht ja wohl nicht mehr. Wenn du die einfachsten Dinge nicht kapierst, dann lern erstmal die Grundlagen von HTML...

    AntwortenLöschen
  7. also ich habe es versucht einzufügen doch dann wird nur im layer der link angezeigt und nicht die seite

    AntwortenLöschen
  8. Also ich weiss leider nicht wirklich wie ich dir helfen kann, denn eigentlich steht bereits alles oben Schritt für Schritt.

    Du fügst das Random-Script einfach am Anfang der JS Datei hinzu, da wo eben auch der Teil für den Layer drin ist.

    Und dann als Inhalt einfach:
    <script type="text/javascript">showbanner();</script>

    AntwortenLöschen
  9. Super Script. Herzlichen Dank. Habe lange gesucht bis ich ein Layerscript mit Reloadsperre gefunden habe.
    Nun aber auch gleich eine Frage zu der Einzustellenden Zeit. Was bedeuten die Zahlen var t1m3 = 1000*60*60; bezw für was stehen die Zahlen 1000, 60 und 60?

    AntwortenLöschen
  10. 1000 Millisekunden sind eine Sekunde, mal 60 macht eine Minute, und mal 60 macht eine Stunde. In diesem Beispiel beträgt die Cookie-Lebensdauer also genau eine Stunde.

    AntwortenLöschen
  11. wie kann man oben in der leiste einen Textlink links am rand machen?

    AntwortenLöschen
  12. Ersetze...
    <div id="line">

    mit...
    <div id="line"><div style="float:left;">TEXT</div>

    AntwortenLöschen
  13. Hallo,

    vielen Dank, für das schöne Script. Ich würde den Layer gerne für meinen Wordpress Blog nutzen. Ich habe ihn unten in der Header.php eingebunden. Leider liegen einige Inhalte des Blogs über dem Header. Der Header sollte aber eigentlich über allem liegen, so dass man an seinem Platz nur den Layer sieht und keine Elemente der Seite wie z.B. die Navigation. Was mache ich falsch?

    AntwortenLöschen
  14. Ich verstehe ehrlich gesagt dein Problem nicht so ganz.

    "Leider liegen einige Inhalte des Blogs über dem Header"

    Naja das hat aber nichts mit meinem Layer zu tun, da hast du wohl eher ein Problem mit deiner Seite.

    "Der Header sollte aber eigentlich über allem liegen, so dass man an seinem Platz nur den Layer sieht"

    Hää? Was möchtest du nun, den Layer in den Header deiner Seite einbinden, oder was?

    AntwortenLöschen
  15. Tut mir Leid, ich habe da einmal Header und Layer verwechselt. Der Layer soll natürlich nicht in in dem Header erscheinen :- )

    Also liegt das an meinem Blog, wenn paar Elemente der Seite über dem Layer liegen?

    Danke, für die rasche Antwort :- )

    AntwortenLöschen
  16. Aso jetzt hab ich dich verstanden. Also um welche Elemente handelt es sich denn? Sind das vlt. Flash-Elemente die über den Layer liegen? Ein Link zu deiner Seite mit eingebautem Layer wäre natürlich auch nicht verkehrt. Solltest du deine Seite nicht veröffentlichen wollen, so schick mir eine Nachricht über das Kontaktformular

    AntwortenLöschen
  17. Hallo DI4V0L0,

    vielen dank, für deine schnelle Antwort. Ich habe über das Kontaktformular meine URL geschickt :- )

    AntwortenLöschen
  18. Ok sollte jetzt funktionieren. Das Problem war einfach, dass auf deiner Seite bestimmte Elemente explizit mit einem z-index hervorgehoben werden. Nun habe ich einfach dem Layer einen hohen z-index verpasst.

    AntwortenLöschen
  19. Tausend Dank, sehr nett von dir... Also einfach den neuen Code von der Seite nehmen?

    AntwortenLöschen
  20. Genau! Ich habe nur den Javascript Code um eine CSS-Angabe (z-index:999) erweitert.

    AntwortenLöschen
  21. Eine Frage: Wie kann ich die Reloadzeiten verstellen? Wofür stehen die einzelnen Werte in 1000*60*60? Ich hätte es gern so eingestellt, dass man jedes mal den Banenr angezeigt bekommt, oder ein mal täglich z.B.

    Wie ginge das? Danke für die Hilfe.

    AntwortenLöschen
  22. .. sorry. Hat sich natürlich schon erledigt. ar zu ungeduldig.

    AntwortenLöschen
  23. Danke ich werd das Script gleich mal antesten. ;)

    AntwortenLöschen
  24. Hi danke vielmals für das einfach zu installierende Script. Funktioniert tadellos.
    Ein Wunsch hätte ich aber noch. Gibt es eine Möglickeit, dass der Layer immer zentriert im Browserfenster dargestellt wird?
    Oder sonst noch die Zusatz-Option Abstand von links

    AntwortenLöschen
  25. Der Layer ist eigentlich so aufgebaut, dass er immer zentriert im Browserfenster erscheint. Welchen Browser benutzt du denn?

    AntwortenLöschen
  26. Wie mache ich es wenn ich im Background ein Bild haben möchte und wenn ich draufklicke dann zur Webseite geführt werden will.

    AntwortenLöschen
  27. Kommt drauf an was du machen willst. Soll nur das Background-Image im Layer sichtbar sein oder auch ein Inhalt? Soll dann der Inhalt + das Background-Image anklickbar sein? Oder oder...

    AntwortenLöschen
  28. klasse script, wirklich!
    leider kenne ich mich nur mit html / php ein bischen aus, daher die frage ob es die möglichkeit gibt den layer erst nach einer verzögerung anzuzeigen, bzw. auf wunsch zu öffnen.?!

    mfg
    joschi

    AntwortenLöschen
  29. ps: funktioniert nicht mit dem IE8 / google chrome :( firefox ohne probleme...

    AntwortenLöschen
  30. Das mit dem IE8 kann ich nicht bestätigen - funktioniert ohne Probleme! Ich denke mal du hast einfach vergessen den DOCTYPE im Dokument anzugeben. Sofern das HTML-Dokument richtig aufgebaut ist, sollte der Layer in allen gängigen Browsern funktionieren.

    Natürlich kann man den Layer auch so umschreiben, dass er erst nach einem Klick erscheint. Eine Verzögerung erreichst du mit "setTimeout".

    Leider fehlt mir gerade die Zeit, so dass ich dir nicht weiterhelfen kann - musst du selber ran (;

    AntwortenLöschen
  31. danke für den tipp.
    angegeben ist:
    ->

    IE zeigt den layer nur zur hälfte an, nicht mittig, sondern ganz links am rand. Chrome öffnet den layer gar nicht. alles auf verschiedenen versionen gestestet und an verschiedenen rechnern.
    kann natürlich auch an meinem design liegen, ich mach heute abend mal ne konforme, leere standardpage, teste die sache noch mal durch und werde dann berichten ^^ über das set timeout werde ich mich mal belesen :)

    mfg
    joschi

    AntwortenLöschen
  32. Du kannst auch diese Seite hier zum testen nehmen, da hier genau dieser Layer - in verkleinerter Form - verbaut ist. Grundsätzlich teste ich auch immer mit IE (ausgeschlossen IE6), Firefox, Safari, Chrome und Opera.

    AntwortenLöschen
  33. Hello,

    would it be possible to put the space around the layer box under a gray or white transparent layer ?
    The same as Greybox works, for example.
    http://orangoo.com/labs/GreyBox/

    Thx

    AntwortenLöschen
  34. Yes, it is possible! However, i can not help, i have no time.. Sorry.

    AntwortenLöschen
  35. Hello,

    I saw the box located in the right bottom corner.
    Can you tell whet settings are needed for this ?
    In the default settings I can only choose the distance from the top.

    Thx!
    Mike

    AntwortenLöschen
  36. Hi

    echt Klasse Teil dickes THX. Aber ich habe noch eine Frage kann man zu dem Close auch ein Exitpopup mit einbauen ?

    AntwortenLöschen
  37. Natürlich kann man. Nur musst du das selber machen oder jemanden fragen, da ich gerade keine Zeit habe. Mit ein wenig Javascript sicher kein großer Aufwand.

    AntwortenLöschen
  38. Wie bekomme ich in den layer eine grafik rein also
    die eigentliche botschaft/werbung als hintergrund
    oder normal ?

    AntwortenLöschen
  39. Ich verstehe nicht genau was du meinst. Du willst ein Bild in den Layer einfügen? Dann nimmst du natürlich den HTML <img> Tag - www.w3schools.com/tags/tag_img.asp

    AntwortenLöschen
  40. ich muss erstmal sagen super script simpel aber dennoch sehr umfangreich danke.

    mich würde interessieren das der layer ein paar millisekunden verzögert kommt damit man den original inhalt der seite sieht.

    AntwortenLöschen
  41. @torna: Ganz am Ende des Scripts wird die Funktion dplayer() aufgerufen. Ersetze das einfach mit window.setTimeout("dplayer()", 5000) und der Layer erscheint 5 Sekunden verzögert.

    AntwortenLöschen
  42. Hi, danke für das Script!
    Werde es gleich mal ausprobieren :)

    AntwortenLöschen
  43. Vielen Dank für das hilfreiche Layer Script. Werde ich gleich mal ausprobieren.
    LG Markus

    AntwortenLöschen
  44. Vielen Dank für das tolle Script, habe es im Einsatz! Danke!

    AntwortenLöschen
  45. Super Script. Leichter Einbau. Besten dank

    AntwortenLöschen

ACHTUNG: Anonyme Kommentare werden nicht freigeschaltet! Bitte wählt aus der Dropdown-Liste "Name/URL" anstatt "Anonym". Mit "Name/URL" bleibt ihr ebenfalls anonym, jedoch kann so zwischen User A und User B unterschieden werden.

Gültige HTML-Tags: <a href="LINK">LINK TITEL</a> | <b>BOLD</b> | <i>KURSIV</i>