Layer-code anpassen :)

F

forsti222

Mitglied
Ja und zwar hab hier nen Layer-Code und möchte diesen gerne anpassen hab aber leider KA wie, da ich js nicht behersche :( leider nur php/mysql

Code: 
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<script type="text/javascript">
<!--
var zeit = 50;          // Zeit zwischen den einzelnen Verschiebeungen des Layers.
                       //höhere Werte lassen den Layer langsamer reinsliden.
var endposition = 100;  //Endposition des layers von linken Rand des
                       //Bildschirmes aus gesehen.
function schieb(){
var teil = document.getElementById('werbung');
var links = parseFloat(teil.style.left);
if(links < endposition){
teil.style.left = links + 20 + "px";
window.setTimeout("schieb()",zeit);
}
}
function verschwinde(){
var teil = document.getElementById('werbung');
var links = parseFloat(teil.style.left);
if(links > (-1 * parseFloat(teil.style.width))-100){
teil.style.left = links - 20 + "px";
window.setTimeout("verschwinde()",zeit);
}
}

//-->
</script>
</head>
<!-- Die Zahl innerhalb von setTimeout bestimmt, wie lange es dauert
    Bis der layer reinslidet (in Millisekunden).
-->
<body onload="schieb()">
<!-- Anfang des Layers

    Folgende Werte dürfen NICHT verändert werden:

     Äußerer Div:
      Position:absolute;
      id="werbung"
      Der wert von left: muss immer den (Wert der Breite x (-1)) -100 betragen.

     Innerer Div:
      position:absolute;
      top:10px;
      right:30px;
      onclick="verschwinde()"
-->
<div style="padding:35px; position:absolute; width:500px; top:50px; left:-800px; height:300px; background-color:#d9fffe; border:2px #000 solid;" id="werbung">
test
<div style="position:absolute; top:10px; right:10px; border:2px dashed #000; width:20px; height:20px; text-align:center; vertical-align:middle; cursor:pointer;" onclick="verschwinde()">X</div></div>
<!-- Ende des Layers -->

</body>
</html>
und zwar möchte ich gerne, dass man ohne onload den layer bekommt, sowie statt den Text eine webseite anzeigen lassen kann und das ich alles in eine .js datei verstauen kann, damit ich ned auf jeder Seite das so kompliziert einbauen muss :)

Wäre jemand so nett und hilft mir :) falls dieser dann in php/mysql Hilfe braucht helf ich ihm gerne :)

lg danke schonmal
 
Hi,
forsti222 hat gesagt.:
und zwar möchte ich gerne, dass man ohne onload den layer bekommt [...] und das ich alles in eine .js datei verstauen kann
Zum Vergrößern anklicken....
falls du den onload-Eventhandler aus dem <body>-Tag verbannen willst:

Code: 
var zeit = 50;          // Zeit zwischen den einzelnen Verschiebeungen des Layers.
                       //höhere Werte lassen den Layer langsamer reinsliden.
var endposition = 100;  //Endposition des layers von linken Rand des
                       //Bildschirmes aus gesehen.
function schieb(){
var teil = document.getElementById('werbung');
var links = parseFloat(teil.style.left);
if(links < endposition){
teil.style.left = links + 20 + "px";
window.setTimeout("schieb()",zeit);
}
}
function verschwinde(){
var teil = document.getElementById('werbung');
var links = parseFloat(teil.style.left);
if(links > (-1 * parseFloat(teil.style.width))-100){
teil.style.left = links - 20 + "px";
window.setTimeout("verschwinde()",zeit);
}
}

window.onload = function(){
schieb();
}
Code: 
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<script type="text/javascript" src="dein_script.js"></script>

</head>
<body>
...
</body>
</html>
forsti222 hat gesagt.:
sowie statt den Text eine webseite anzeigen lassen kann
Zum Vergrößern anklicken....
Eine Website lässt sich nicht in einem DIV anzeigen. Hierfür müsstest du dann zusätzlich einen iFrame in das DIV einbauen.
 
Hi,

vielleicht soll ja der HTML-Quelltext ebenfalls von JS erzeugt werden.

Externe JSDatei: dein_script.js
Code: 
var zeit = 50;          // Zeit zwischen den einzelnen Verschiebeungen des Layers.
                       //höhere Werte lassen den Layer langsamer reinsliden.
var endposition = 100;  //Endposition des layers von linken Rand des
                       //Bildschirmes aus gesehen.
function schieb(){
	var teil = document.getElementById('werbung');
	var links = parseFloat(teil.style.left);
	if(links < endposition){
	teil.style.left = links + 20 + "px";
	window.setTimeout("schieb()",zeit);
	}
}
function verschwinde(){
	var teil = document.getElementById('werbung');
	var links = parseFloat(teil.style.left);
	if(links > (-1 * parseFloat(teil.style.width))-100){
	teil.style.left = links - 20 + "px";
	window.setTimeout("verschwinde()",zeit);
	}
}

function initSlider(){
  var objSlider = document.createElement("div");
  objSlider.style.padding         = "35px";
  objSlider.style.position        = "absolute";
  objSlider.style.width           = "500px";
  objSlider.style.left            = "-800px";
  objSlider.style.height          = "300px";
  objSlider.style.backgroundColor = "#d9fffe";
  objSlider.style.border          = "2px solid #000";
  objSlider.id                    = "werbung";

  var objIFrame = document.createElement("iframe");
  objIFrame.src          = "http://www.quaese.de/";
  objIFrame.style.border = "none";
  objIFrame.style.height = "300px";
  objIFrame.style.width  = "500px";

  var objClose = document.createElement("div");
  objClose.style.position      = "absolute";
  objClose.style.top           = "10px";
  objClose.style.right         = "10px";
  objClose.style.border        = "2px dashed #000";
  objClose.style.width         = "20px";
  objClose.style.height        = "20px";
  objClose.style.textAlign     = "center";
  objClose.style.verticalAlign = "middle";
  objClose.style.cursor        = "pointer";
  objClose.onclick = function(){verschwinde();};
  objClose.appendChild(document.createTextNode("X"));

  objSlider.appendChild(objIFrame);
  objSlider.appendChild(objClose);
  document.getElementsByTagName("body")[0].appendChild(objSlider);
}

window.onload = fucntion(){
  initSlider();
}
Eingebunden wird es wie bereits von @Maik gezeigt.

Aufrufen kannst du es zum Beispiel über einen Button.
Code: 
<button onclick="schieb()">schieb()</button>
Damit bist du vom Aufruf im onload-Event losgelöst.

Ciao
Quaese
 
Danke vielmals schonmal :) jetzt würde mich nur noch 1 interesieren wie muss ich den
das
Code: 
objClose.appendChild(document.createTextNode("X"));
abändern das ich dort nen Image platzieren kann?

danke :)
 
Hi,

erstelle statt des Textknoten ein BildElement, weise diesem die Bildquelle zu und hänge es in die Dokumentenstruktur ein.
Code: 
var objImg = document.createElement("img");
objImg.src = "bild.gif";
objClose.appendChild(objImg);
Ciao
Quaese
 
Nochmal Danke :). Nur bemerkte ich ein neuerliches Problem und zwar lagert sich der Layer nicht wie gewünscht über den Inhalt sondern unter den Inhalt! Kann mir hier noch jemand helfen?

lg danke
 
Hi,

der Layer lässt sich mit Hilfe der z-index-Eigenschaft (in JS zIndex) schichtpositionieren - hierbei gilt: je höher der Wert, desto weiter vorne (oben) erscheint das Obkjekt:

Code: 
var objSlider = document.createElement("div");
  objSlider.style.padding         = "35px";
  objSlider.style.position        = "absolute";
  objSlider.style.width           = "500px";
  objSlider.style.left            = "-800px";
  objSlider.style.height          = "300px";
  objSlider.style.backgroundColor = "#d9fffe";
  objSlider.style.border          = "2px solid #000";
  objSlider.style.zIndex          = "100";
  objSlider.id                    = "werbung";
Falls du aber vom Layer objClose sprichst:

Code: 
  objClose.style.zIndex           = "100";
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück