✔ Popup-Fenster Position

A

angelikamorgan

Mitglied
Hallo,

ich habe ein problem mit der Positionierung des Popup Fensters.

Auf der index.html Seite befindet sich der Link zum öffnen des Popup-Fensters.
Nach dem Klicken wird das Fenster geöffnen und mittig ausgerichtet. Der Code zum Ausrichten des Fensters befindet sich in der Datei inhaltDerPopupSeite.html.

Ihr könnt das Pupup-Fenster per drag/drop über den Bildschirm bewegen. Beim Loslassen des Fensters wird das Fenster immer wieder mittig ausgerichtet.

Soweit alles grün :)

In dem Popup-Fenster befindet sich eine Schaltfläche mit der Aufschrift 'resize windows'.
Beim Drücken der Schaltfläche vergrößert sich das Popup-Fenster.

Problem: die Ausrichtung des Fensters funktioniert nicht mehr !
Ich möchte, dass das Fenster nach der Vergrößerung weiterhin mittig ausgerichtet wird.

durch

self.setInterval("moveWin("+popWidth+", "+popHeight+")", 1000);

wird jede Sekunde das Fenster auf die ursprüngliche Position zurück verschoben.
Ich muss irgendwie die Werte für popWidth und popHeight nach der Vergrößerung des Fensters neu setzen.

Wie kann ich mein Vorhaben realisieren ?

Ich bedanke mich im Vorraus
Angelika


index.html

PHP: 
<html>
	<head>
		<script type="text/javascript">
		function popup(url, width, height) {
			var left = (screen.availWidth - width) / 2;
			var top = (screen.availHeight - height) / 2;
			var popup = open(url, "Popup", "left="+left+", top="+top+", width="+width+",height="+height);
		}
		</script>
	</head>
	<body>	 
		<a href="#" onClick="popup('inhaltDerPopupSeite.html', 200, 200)">open popup</a>
	</body>
</html>


inhaltDerPopupSeite.html

PHP: 
<html>
	<head>
		<script type="text/javascript">		

		var popWidth = "200";
		var popHeight = "200";

		function moveWin(width, height) {
			var left = (screen.availWidth - width) / 2;
			var top = (screen.availHeight - height) / 2;
			window.moveTo(left, top);
		}
		
		window.onload = function(){
			self.setInterval("moveWin("+popWidth+", "+popHeight+")", 1000);			
		}
		
		function resizeWin() {
			popWidth = 600;
			popHeight = 600;
			self.resizeTo(popWidth, popHeight);
			// moveWin(popWidth, popHeight);
		}		
		</script>
	</head>
	<body>
		<a href="javascript:resizeWin()">resize windows</a>
	</body>
</html>
 
Moin,

angelikamorgan hat gesagt.:
Code: 
		window.onload = function(){
			self.setInterval("moveWin("+popWidth+", "+popHeight+")", 1000);			
		}
Zum Vergrößern anklicken....

So, wie du es da zu stehen hast, wird moveWin immer mit den Werten aufgerufen, die beim Laden der Seite existieren.
Wenn du immer die aktuellen haben willst, also inkl. etwaiger Änderungen(durch resizeWin())....schreibs so:
Code: 
window.onload = function(){
            self.setInterval("moveWin(popWidth,popHeight)", 1000);            
        }
 
Hallo Sven,

danke für die Lösung !

Das Ganze ist für mich noch nicht einleuchtend.

Schau dir bitte das folgende Beispiel an:

PHP: 
1. var str = "a";
2. alert(str); // Ergebnis = a
3. str = "b";
4. alert("neu: "+str); // Ergebnis = neu: b


Die folgende Zeile ist vergleichbar mit dem Beispiel Zeile 4
PHP: 
self.setInterval("moveWin("+popWidth+", "+popHeight+")", 1000);

Die folgenden Zeilen

PHP: 
popWidth = 600;
popHeight = 600;

setzen den neuen Wert. Vergleichbar mit dem Beispiel Zeile 3


Bei deiner Schreibweise befinden sich die Variablen popWidth und popHeight innerhalb der Anführungsstrische.
PHP: 
"moveWin(popWidth,popHeight)"

Für mich ist das gleichbedeutend mit dem folgenden Beispiel:


PHP: 
1. var str = "a";
2. alert(str); // Ergebnis = a
3. str = "b";
4. alert("neu: +str"); // Ergebnis = neu: +str <----!!

Ich hoffe, du kannst mein Anliegen verstehen.

Gruß
 
Moin,

die Beispiele sind nicht vergleichbar :eek:

Grund: setTimeout() erwartet den Funktionsaufruf als String, welcher dann quasi evaluiert wird.(schau dir mal die Methode eval() dazu an)

Soll heissen, der String wird als solcher sofort verarbeitet, und daraus der Funktionsaufruf zusammengestellt....so wie er dann später erfolgt.

Code: 
popWidth=600;
popHeight=600;

self.setInterval("moveWin("+popWidth+", "+popHeight+")", 1000);  
//evaluiert: setInterval("moveWin(600,600)", 1000);  

self.setInterval("moveWin(popWidth,popHeight)", 1000);  
//evaluiert: setInterval("moveWin(popWidth,popHeight)", 1000);

Das 1. Beispiel nimmt die Variablen, so wie sie zum Zeitpunkt des Lesens der Zeil sind, das 2. so, wie sie zum Zeipunkt des Funktionsaufrufes sein werden.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück