✔ Sogenanntes Layer-Fenster

Cusco · 17. März 2006

Hi,

ich suche ein script welches eine eigene HTML-Seite (die momentan als Popup gezeigt wird) in einen sogenannten Layerfenster anzeigt, Also ein Fenster im Browser-Fenster.
Die HTML-Seite hat die ausmaße von 280x480 oder so und zeigt nur ein paar Textlinks. Ich finde so ein Layerfenster oder wie sie sich nennen wäre gut dafür, Popup ist unbrauchbar und wegen den Popupblockern haben die auch keinen Sinn, ausserdem hasse ich extra geöffnete Fenster, die User bestimt auch, darum gibt es wohl diese Blocker.

Der Layer müste sich per klick einfach schließen lassen, ansonsten dauerhaft dar sein (aber nicht Seiten übergreifend). Ich habe bisher nur ein script gefunden welches sich nur Automatisch nach Sekunden schließt, also total unbrauchbar für mich. Achja es wäre gut wenn sich der Layer immer rechts unten im Browserfenster öffnet, damit er nicht all zu störend ist, also das wichtige warum die Seite angesteuert wird (Börsencharts), sichtbar bleibt.

Dennis Wronka · 17. März 2006

Ich hab die Tage mal was aehnliches gebastelt. Dabei wird durch einen Button der Layer geoeffnet und durch einen Button wieder geschlossen. Durch Doppelklick kann der Layer auch verschoben werden.

HTML:

<html>
<head>
<style type="text/css">
#movediv
{
	position:absolute;
	top:25px;
	left:25px;
	width:500px;
	height:200px;
	border:1px solid;
	background-color:#bfbfbf;
	visibility:hidden;
	padding:5px;
}
</style>
<script type="text/javascript">
var drag=0;
var offsetx;
var offsety;
document.onmousemove=dragdiv;
document.ondblclick=toggledrag;

function showdiv()
{
	document.getElementById('movediv').style.visibility="visible";
	document.getElementsByName('open')[0].disabled=true;
}
function hidediv()
{
	document.getElementById('movediv').style.visibility="hidden";
	drag=0;
	document.getElementById('movediv').style.top="50px";
	document.getElementById('movediv').style.left="50px";
	document.getElementsByName('open')[0].disabled=false;
}
function toggledrag(e)
{
	if (drag==1)
		{
			drag=0;
		}
	else if (document.getElementById('movediv').style.visibility=="visible")
		{
			posx=document.getElementById('movediv').offsetLeft;
			posy=document.getElementById('movediv').offsetTop;
			divwidth=document.getElementById('movediv').offsetWidth;
			divheight=document.getElementById('movediv').offsetHeight;
			if (document.all)
				{
					offsetx=window.event.x;
					offsety=window.event.y;
				}
			else
				{
					offsetx=e.pageX;
					offsety=e.pageY;
				}
			if ((offsetx>=posx) && (offsetx<=posx+divwidth) && (offsety>=posy) && (offsety<=posy+divheight))
				{
					offsetx-=posx;
					offsety-=posy;
					drag=1;
				}
		}
}
function dragdiv(e)
{
	if (drag==1)
		{
			if (document.all)
				{
					mousex=window.event.x;
					mousey=window.event.y;
				}
			else
				{
					mousex=e.pageX;
					mousey=e.pageY;
				}
			mousex-=offsetx;
			mousey-=offsety;
			document.getElementById('movediv').style.top=mousey+"px";
			document.getElementById('movediv').style.left=mousex+"px";
		}
}
</script>
</head>
<body>
<button type="button" name="open" onclick="showdiv();");">Open window</button>
<div id="movediv">
<center><button type="button" name="close" onclick="hidediv();">Close window</button></center>
</div>
</body>
</html>

Cusco · 17. März 2006

Das ist doch schonmal ein anfang, ich habe den Source aber noch nicht Probiert. Beim Überfliegen sehe ich auch nicht was im Layer dargestellt werden soll, ich finde einfach keine URL. Automatisch aufgerufen, ich kann nur anhand des Sources vermuten das sich der Close Button im Layer befindet, und der zum Öffnen im Normalen body.
Und sich alles in einen einzigen HTML-Code befindet, nun ist das Problem das ich meine Seiten nicht mit der Hand code sondern mit Fusion 9 erstelle, der Layer soll auf die Indexseite, und im Layer eine andere Seite gezeigt werden die ebenfalls (halb) mit Fusion erstellt wurde. Nun könnte ich den Close-Button in die Seite einbinden nur weiss ich nicht ob die JS-Routienen übergreifend sind, also wenn hidediv() von der Layerseite aufgerufen wird, sich der Layer auch auf der Indexseite wirklich schließt. Ausserdem wäre es am einfachsten wenn der Layer per Script-Aktion von Fusion aufgerufen werden würde, ich weiss aber nicht wie das script dann auszusehen hat, ich kenn nicht mal die Bezeichnung der Dateiendung, vermute aber, "*.script" oder so. Achso die HTML-Datei die im Layer erscheinen soll heist übrigens "MDM-Popup.html" zumindest noch, im Moment und erscheint wie gesagt Momentan in einen ollen Popupfenster.

Edit: Achja ich muss Sagen das ich von JS keinen Blassen schimmmer habe, ich kann auch nur das nötigste in HTML

Die Seite worum es geht ist http://gold.sn-archiv.de das Popup soll wie gesagt im Layer erscheinen

Edit2: Mir ist auf meiner Seite jetzt was sehr nerviges aufgefallen: Wenn ein Untermenü aufgeklappt wird, dann wackelt das komplette Fenster, das war vor dem Popup noch nicht, auf den anderen Seiten dagegen ist alles Normal ? Woran kann das liegen?

Maik · 17. März 2006

In einem DIV-Element kann keine komplette *.html-Datei geladen / angezeigt werden.

Du könntest aber die Links in dem DIV notieren:

HTML:

<div id="adddiv" ondblclick="toggledrag();">
<form method="post" action="">
<input type="text" name="addtext">
<button type="button" name="addclose" onclick="hidediv();">Add and close</button>
</form>

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=19" target="_blank">
M&uuml;nzen aus China</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=19&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=20" target="_blank">
M&uuml;nzen aus Deutschland</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=20&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=22" target="_blank">
M&uuml;nzen aus Kanada</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=22&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=24" target="_blank">
M&uuml;nzen der Olympischen Spiele</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=24&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=25" target="_blank">
M&uuml;nzen der Seefahrt</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=25&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=26" target="_blank">
M&uuml;nzen der USA</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=26&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=27" target="_blank">
M&uuml;nzen der Weimarer Republik</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=27&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=28" target="_blank">
M&uuml;nzen schenken</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=28&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=29" target="_blank">
Antike M&uuml;nzen</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=29&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=31" target="_blank">
DDR Gedenkm&uuml;nzen</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=31&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=32" target="_blank">
Kleinsten Goldm&uuml;nzen der Welt</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=32&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=33" target="_blank">
Europa-M&uuml;nzen</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=33&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=36" target="_blank">
M&uuml;nzen zur FIFA WM 2006</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=36&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=37" target="_blank">
M&uuml;nzen - Geschenkideen</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=37&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=38" target="_blank">
Gold-Euros</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=38&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=41" target="_blank">
L&auml;nder-M&uuml;nzen</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=41&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=42" target="_blank">
MDM-Collectionen</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=42&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=43" target="_blank">
M&uuml;nzangebote des Monats</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=43&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=44" target="_blank">
M&uuml;nz-Neuheiten</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=44&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=46" target="_blank">
M&uuml;nz-Zubeh&ouml;r</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=46&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=47" target="_blank">
Silbertaler</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=47&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=48" target="_blank">
Silber-Euros</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=48&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=49" target="_blank">
S&uuml;dafrika-M&uuml;nzen</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=49&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=50" target="_blank">
Tier-M&uuml;nzen</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=50&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<a href="http://partners.webmasterplan.com/click.asp?ref=197361&site=3561&type=text&tnb=40" target="_blank">
Kursm&uuml;nzens&auml;tze</a><br><img src="http://banners.webmasterplan.com/view.asp?ref=197361&site=3561&type=text&tnb=40&js=1" border="0" width="1" height="1"><br>
<!-- END PARTNER PROGRAM -->

</div>

Dennis Wronka · 17. März 2006

Du koenntest in dem DIV auch einen iFrame einbauen.

Uebrigens, ich hab grad mal noch was an dem Code gearbeitet. Hab ich oben ausgetauscht.

Cusco · 17. März 2006

Hmm, ich habe versucht das einzubinden, aber der Layer wird nicht gezeigt

Bei der div-ID habe ich "movediv" vom CSS-Style statt "adddiv" eingetragen ansonsten wurde nichts geändert am code. bei adddiv wurde der Code der in den Laye sollte einfach am anfang der Seite gezeigt, das was normaler weise oben ist, befand sich darunter.

Edit: Halt ich habe doch was geändert: Der Schließen Button ist unten und das Eingabefeld verschwunden den das brauche ich ja nicht.

Dennis Wronka · 17. März 2006

Ich hatte hier jetzt den ganzen Kram von wegen adddiv rausgenommen und in movediv umbenannt da es nun einfach nur bei dem Test darum ging das DIV zu bewegen. Zuvor sollte es erst darum gehen von der einen Textbox in die andere was einzufuegen. Weiterhin hab ich halt am JavaScript selbst noch etwas geaendert, da vorher ueberall der Doppelklick dazu gefuehrt hat, dass man das DIV bewegen konnte, jetzt muss man in das Fenster doppelklicken. Und zusaetzlich springt nicht ploetzlich die obere linke Ecke zum Mauszeiger, sondern es bleibt in der Position wie man es "angefasst" hat.

Cusco · 17. März 2006

Dennis Wronka hat gesagt.:
Ich hatte hier jetzt den ganzen Kram von wegen adddiv rausgenommen und in movediv umbenannt da es nun einfach nur bei dem Test darum ging das DIV zu bewegen. Zuvor sollte es erst darum gehen von der einen Textbox in die andere was einzufuegen. Weiterhin hab ich halt am JavaScript selbst noch etwas geaendert, da vorher ueberall der Doppelklick dazu gefuehrt hat, dass man das DIV bewegen konnte, jetzt muss man in das Fenster doppelklicken. Und zusaetzlich springt nicht ploetzlich die obere linke Ecke zum Mauszeiger, sondern es bleibt in der Position wie man es "angefasst" hat.

Ja aber wo liegt jetzt der Fehler auf meiner Seite? Sie ist hochgeladen http://gold.sn-archiv.de

Edit: Moment muss nicht irgendwie showdiv() aufgerufen werden? Wie mache ich das und am besten wo? Am Ende des Bodytags?

Dennis Wronka · 17. März 2006

Das DIV wird nicht angezeigt weil Du nichts hast was die Funktion showdiv() aufruft.

Ausserdem kannst Du das:

HTML:

<div id="movediv" ondblclick="toggledrag();">

in das

HTML:

<div id="movediv">

umaendern da der Event ondblclick im JavaScript die Funktion zugewiesen bekommt.

Cusco · 17. März 2006

Dennis Wronka hat gesagt.:
Das DIV wird nicht angezeigt weil Du nichts hast was die Funktion showdiv() aufruft.

Ja stimmt und wie rufe ich die Funktion automatisch gleich beim Anzeigen der Seite auf? Und vor allem wo? Am Ende des Body-Tags?

✔ Sogenanntes Layer-Fenster

Cusco

Erfahrenes Mitglied

Dennis Wronka

Soulcollector

Cusco

Erfahrenes Mitglied

Maik

Dennis Wronka

Soulcollector

Cusco

Erfahrenes Mitglied

Dennis Wronka

Soulcollector

Cusco

Erfahrenes Mitglied

Dennis Wronka

Soulcollector

Cusco

Erfahrenes Mitglied

Neue Beiträge