Popup Window matching height and width of its content? Possible?

stickfigure · 01-09-2007, 10:14 PM

Well, I know how to make popups though the javascript code, I have come across a situation where the content inside the popup will be different everytime... I want the popup window height and width to match the contents Attributes... Anyone know of a way? Thnx in advance...

TripperTreats · 01-09-2007, 11:21 PM

This is a roundabout method, and there might be another way, but here it is:

Inside the body tag of your popup, include this:

Code:

<body onload="window.resizeTo(this.offsetWidth,this.offsetHeight)">

Now, in some browsers offsetWidth returns only the width of the inner part of the window, not including the status bar, title bar, etc. So, you can either add a constant number of pixels in the resizeTo function's width and height, or use the modified resize function in place of the one above:

Code:

function resizeOuterTo(w,h) {
 if (parseInt(navigator.appVersion)>3) {
   if (navigator.appName=="Netscape") {
    top.outerWidth=w;
    top.outerHeight=h;
   }
   else top.resizeTo(w,h);
 }
}

stickfigure · 01-10-2007, 06:28 AM

Hmmm... I tried it, and it doesn't seem to work, It simply makes the popup window size very small regardless of what is inside or what i describe the popup window to be... I wonder if im doing something wrong...

I have this script in the header of the main page:

Code:

<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
   href=mylink;
else
   href=mylink.href;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
//-->
</SCRIPT>

And, This code on the link to the pop up window:

Code:

<A 
   HREF="popupwindow.html" 
   onClick="return popup(this, 'notes')">like to popup</A>

Then I pasted the body tag you posted into the pop up page, but it size to the content, in fact it simply makes it very small regardless of anything...

david_kw · 01-10-2007, 06:54 AM

Quote:

Originally Posted by stickfigure

I want the popup window height and width to match the contents Attributes...

I'm probably just missing something but what does this mean? Where exactly are the width and height found?

david_kw

david_kw · 01-10-2007, 06:58 AM

Anyway, here is an example of code that resizes the popup window to the size of the image that it is going to show.

Code:

function view_jpg(jpg_url, title_str)
{
    html_src = "<html><title>" + title_str + "</title><style>body{margin:5px 0px 0px 0px}</style><body onblur='top.close()'><center><img src='"+ jpg_url +"' border=0 name=view_jpg onload='window.resizeTo(document.view_jpg.width+20,document.view_jpg.height+44)' onclick='self.close()'></center></body></html>";

    popup_win=window.open('','','scrollbars=no,toolbar=no,width=1,height=1');
    popup_win.document.open();
    popup_win.document.write(html_src);
    popup_win.document.close();
}

I'm not sure if that is similar to what you want though.

david_kw

stickfigure · 01-17-2007, 04:36 AM

Thnx, ill give this one a try...i think i might be able to edit this to make it suit my needs... Still, if there are any other ideas please let me know...

TripperTreats · 01-17-2007, 04:45 AM

I've got another one for you to try. What you should do is wrap the entire contents of your popup in a div called "wrapper". So your popup html would look like

Code:

<body>
<div id="wrapper">
content
</div>
</body>

Then in the body tag, insert

Code:

onload="window.resizeTo(document.getElementById('wrapper').offsetWidth, document.getElementById('wrapper').offsetHeight)"

This has a better chance of working than myfirst suggestion.

stickfigure · 01-20-2007, 03:28 PM

Thanks TripperTreats for your latest reply, i used the code you provided and it seems to work partially...
It resizes the window, however not fully, I am actually trying to work with it and trying to get it to work, but im still having a little trouble... I have to define the the wrapper id definitely, keeping it auto doesn't seem to work, which defeats my purpose... Here's what im looking at as the code for my popup window... The wrapper if resizes when i have it as auto, but the window does not along with it.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Player</title>
<style type="text/css">
<!--
body {
	background-color: #666666;
	margin: 0;
	padding: 0;
}
#wrapper {
	width: auto;
	height: auto;
	overflow: auto;
	}
#heading {
	height: 40px;
	width: auto;
	background: url(images/playerheadbac.jpg) repeat-x;
	text-align: right;
	}
#player {
	overflow: auto;
	width: auto;
	height: auto;
	}
-->
</style>
</head>
<body onload="window.resizeTo(document.getElementById('wrapper').offsetWidth, document.getElementById('wrapper').offsetHeight)">
<div id="wrapper">
<div id="heading"><img src="images/playerheadas.jpg" alt="" /></div>
<div id="player">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="640" height="480" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="Untitled-1.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="Untitled-1.swf" quality="high" bgcolor="#ffffff" width="640" height="480" name="Untitled-1" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>

</div>
</body>