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){
px = findBottom(obj);
px = px + 40;
if(px<400){
window.resizeTo(document.body.offsetWidth+6,px);
}
else{
window.resizeTo(document.body.offsetWidth+6,400);
}
}
//-->
</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.