Page 1 of 1

(Style/JS/CSS) HOWTO write fit to page popup windows?

Posted: Wed Apr 30, 2003 4:07 am
by Heavy
I have something like:

Code: Select all

<div style="cursor:pointer;cursor:hand;" onclick="window.open("url.php?ID=<?php echo $ID ?>","window_name","width=400,height=400")">Open popup</Div>
The content screen dimensions of the BODY output from url.php differs drastically in relation to $_GET['ID'].
Therefore, I would like the window to fit itself around the body content.
Is that possible?

Posted: Thu May 01, 2003 3:29 am
by []InTeR[]
Yep,

You want to resize the body of your popup?

Here is a script:

Code: Select all

<HTML>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
function resizepage(obj)&#123;
  px = findBottom(obj);
  px = px + 40;
  if(px<400)&#123;
    window.resizeTo(document.body.offsetWidth+6,px);
  &#125;
  else&#123;
    window.resizeTo(document.body.offsetWidth+6,400);
  &#125;
&#125;
//-->
</SCRIPT>
</head>
<BODY onhelp="return false;" onload="resizepage('closebut')">
content
<INPUT ID="closebut" NAME="closebut"  TYPE="button" VALUE="Close window" CLASS="DATAILSUBMIT" OnClick="window.close()">
</BODY>
</HTML>
The closebut is the last thing visable on the page.
It allso has a min of 400, no max. Maybe you want to build that in.

Posted: Thu May 01, 2003 4:18 am
by Heavy
Wonderful! Thanks!

Is this W3C standards compatible?

I will try this right away.
I'll tell you how it worked.

Posted: Thu May 01, 2003 4:22 am
by []InTeR[]
It's not W3C compatible.

But it can be made.

The solution

Posted: Thu May 01, 2003 12:32 pm
by Heavy
Here's how I survived:

Code: Select all

//This function loads the popup from the main window:
			function PopUpPerm(ID){
				<?php
				if ($_GET['BrowserIsGecko']){
					?>
					window.open('popup-perm.php?ID=' + ID, "joja", "dependent,height=1000,width=1000,scrollbars")
					<?php
				}else{
					?>
					window.showModalDialog('popup-perm.php?ID=' + ID, "joja", "dialogWidth:300px; dialogHeight:600px;resizable:yes;scrollbars:yes")
					<?php
				}
				?>
			}
And here's the popupwindow code:

Code: Select all

<html>
	<head>
		<SCRIPT>
			function InitPage(){
				Resize()
				window.focus()
			}
			
			function min(a,b){
				return a < b ? a : b
			}
			var padding = 50
			function Resize(){
				<?php
				if ($BrowserIsGecko){
					?>
					var tableWidth = document.defaultView.getComputedStyle(document.getElementById('Table3'),null).getPropertyValue("width")
					tableWidth = Number(tableWidth.substr(0,tableWidth.length-2))
					var windowWidth = window.outerWidth
					var clientWidth = window.innerWidth
					
					var tableHeight = document.defaultView.getComputedStyle(document.getElementById('Table'),null).getPropertyValue("height")
					tableHeight = Number(tableHeight.substr(0,tableHeight.length-2))
					var windowHeight = window.outerHeight
					var clientHeight = window.innerHeight

					var windowCX = tableWidth + (windowWidth - clientWidth) + padding
					var windowCY  = min(tableHeight + (windowHeight - clientHeight) + padding ,window.screen.availHeight ) 
					window.resizeTo( windowCX, windowCY); 
					window.moveTo((window.screen.availWidth - windowCX) / 2 ,(window.screen.availHeight - windowCY) / 2)
					<?php
				}else{
					?>
					oRcts = document.getElementById('Table3').getClientRects();
					var tableWidth = oRcts[0].right - oRcts[0].left
					var windowWidth = window.dialogWidth
						windowWidth = Number(windowWidth.substr(0,windowWidth.length-2))
					var clientWidth = document.body.offsetWidth
					
					oRcts = document.getElementById('Table').getClientRects();
					var tableHeight = oRcts[0].bottom - oRcts[0].top
					var windowHeight = window.dialogHeight
						windowHeight = Number(windowHeight.substr(0,windowHeight.length-2))					
					var clientHeight = document.getElementById('Body').offsetHeight
					
					var windowCX = tableWidth + (windowWidth - clientWidth) + padding
					var windowCY  = min(tableHeight + (windowHeight - clientHeight) + padding,window.screen.availHeight ) 
					window.dialogWidth = windowCX + 'px'
					window.dialogHeight = windowCY + 'px'
					window.dialogLeft = (window.screen.availWidth - windowCX) / 2 + 'px' 
					window.dialogTop = (window.screen.availHeight - windowCY) / 2 + 'px'
					<?php
				}
				?>
			}

		</SCRIPT>
	</head>
	<body onload="InitPage()" id="Body">
		<table id="Table">
			<tr>
				<td>
					<table id="Table3">
						<tr><td>[Content]</td></tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>
Yepp! Lots of characters! Optimize it for me someone! I'm too tired of it to do it right now.

Here's what it does:
It fits the popupwindow around the content nicely, and the usage of that "min"-function keeps it inside the screen in case of very tall content.

The code works both in Mozilla, NS7 and IE6.