Popup-Window dem Inhalt der Seite automatisch anpassen

messmar

messmar

Erfahrenes Mitglied
Hi,

ich habe ein popup-window, dessen Breite dem Inhalt sich anpasst und 15px (in die Breite) dazufügt.

Das Problem ist, dass wenn ich eine weitere Seite innerhlab des Fensters bzw. popup-window aufrufe, das Fenster sich um weitere 15px breiter wird und immer wieder
15px in die Breite dazufügt, wenn ich eine wieter Seite aufrufe.

Auch bei neu laden des Fensters oder der Seite wird 15px in die Breite zugefügt.

Code der Popup-Seite
Code: 
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript">
<!--
function resizePopup()
{
	windowHeight = document.body.offsetHeight;
	windowWidth = document.body.offsetWidth;
	
	popupHeight=document.all['popupcontent'].offsetHeight;
	popupWidth=document.all['popupcontent'].offsetWidth;
	addHeight=80;
	addWidth=15;
	
	newHeight = popupHeight+addHeight;
	newWidth = popupWidth+addWidth;
	
	if( ( newWidth > windowWidth ) || ( newHeight != windowHeight ) )
	{
		window.resizeTo(newWidth,newHeight);
	}
}

//Popup Window will be opened
function openWindow(adresse, width, height)
{
	window.open(adresse, "popup2", "width=" + width + ",height=" + height );
}

//-->
</script>

</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="resizePopup();">
		<div id="popupcontent"><!-- Header Upper Part -->
		<table width="500" border="1" cellspacing="0" cellpadding="0" class="header">
			<tr><td rowspan="2" height="51"><img src="images/logo_popup.gif" border="0" width="127" height="51" alt=""></td>
				<td rowspan="2" width="100%"><img src="templates/symantec/images/blind.gif" width="1" height="1" border="0"></td>
				<td align="right" valign="top" height="17">
					<!-- Header Upper Menu -->
					<table border="0" cellspacing="0" cellpadding="0">
						<tr class="header_top_menu">
							<td width="7"><img src="templates/symantec/images/round_left_bottom_white.gif" width="7" height="17" alt="" border="0"></td>
							<td><img src="templates/symantec/images/blind.gif" width="5" height="1" border="0"></td>
							<td nowrap><img src="templates/symantec/images/icon_arrow.gif" border="0" hspace="2"><a class="header_links" href="javascript:window.close();">close</a>&nbsp;</td>	
							<td><img src="templates/symantec/images/blind.gif" width="20" height="1" border="0"></td>
						</tr>
					</table>					
					<!--/ Header Upper Menu -->
				</td>
			</tr>
			<tr><td align="right"><img src="templates/symantec/images/header_right.gif" width="220" height="34" alt=""></td></tr>
		</table>
		</div>		
	</body>
</html>

Code der Seite, die das Popup-Fenster aufruft:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<title>Untitled</title>
		<script>
		
		<!--
			//Popup Window will be opened
			function openWindow(adresse, width, height)
			{
				window.open(adresse, "popup2", "width=" + width + ",height=" + height );
			}
		//-->
		</script>
	</head>
	
	<body>
		
		<table width="50%" align="center">
			<tr>
				<td>
					<a class="header_links" href="javascript:openWindow('trest_poup.htm',600,500)">Here we go &raquo;&raquo;</a>
				</td>
			</tr>
		</table>
	</body>
</html>


Vielen Dank und Gruß
Messmar
 
Moin....

ich nehme mal an, mit den Werten 15/80 willst du die Browser-Bedienelemente/Rahmen/etc. dazurechnen.

Versuche stattdessen, diese Werte zu ignorieren, und den Anzeigebereich anzupassen.
In NON-IE-Browsern geht das bequem über window.innerWidth/Height .... beim IE kann man annähernd per resizeBy() ein passables Ergebnis erreichen:
Code: 
<script type="text/javascript">
<!--
function resizen()
{
  b = document.getElementsByTagName('body')[0];
  c = document.getElementById('popupcontent');
if(window.innerHeight)
  {
    window.innerHeight = c.offsetHeight;
    window.innerWidth  = c.offsetWidth;
  }
else
  {
    window.resizeBy(c.clientWidth-b.clientWidth,
                    c.clientHeight-b.clientHeight);
  }  
}
window.onload=resizen;
//-->
</script>
<style type="text/css">
<!--
html,body{margin:0;overflow:hidden}
#popupcontent{float:left;}
-->
</style>
 
Danke dir schonmal Sven,

Aber irgendwie erreiche ich mit dem was du hier gepostet hast, nicht das was ich genau
mir vorstelle.

Was hälst du von der folgenden Lösung. Die funktioniert bei mir und zwar auf Firefox auch:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<style>
			#popupcontent {
				width: 100%;
			}
		</style>
		<script language="JavaScript">
		<!--
		function resizePopup()
		{
			
			
			newWidth = document.getElementById('popupcontent').clientWidth;
			newHeight = document.getElementById('popupcontent').clientHeight;
			window.resizeTo(newWidth+30,newHeight+80);
				
		}
			//-->
		</script>
	</head>
	<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="resizePopup()">
		<div id="popupcontent">
		<table width="200" border="1" cellspacing="0" cellpadding="0" class="header">
			<tr>
				<td rowspan="2" height="51"><img src="images/logo_popup.gif" border="0" width="127" height="51" alt=""></td>
				<td rowspan="2" width="100%"><img src="templates/symantec/images/blind.gif" width="1" height="1" border="0"></td>
				
			</tr>
		</table>
		<table width="200" height="300" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td><a href="test1.htm" onclick="resizePopup();">TEST_01</a></td>
				<td><a href="test2.htm" onclick="resizePopup();">TEST_02</a></td>
				<td><a href="test3.htm" onclick="resizePopup();">TEST_03</a></td>
				<td><a href="test4.htm" onclick="resizePopup();">TEST_04</a></td>
			</tr>
		</table>
		</div>		
	</body>
</html>

Du musst nur Dummy-Seiten: test1.htm, test2.htm, test3.htm und test4.htm erstellen und alles
testen.
Aber in allen 4 Seiten muss das Script im Head eingebunden sein und im Body-Tag die Onload-Funktion onload="resizePopup()" augerufen wird.

Gruß
Messmar
 
Diese Lösung gefällt mir garnicht... weil nunmal jeder andere Symbolleisten in seinem Browser an hat.
Woher willst du wissen, wieviel Platz diese einnehmen?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück