[timmerk]

Hi, I was wonder if this is possible:

I have a link on a webpage, and when the user clicks it, a popup window appears, but the popup window's size changed dynamically to the content, without the user seeing the resize.

i only know how to open a popup window at a fix size. Any ideas?

Thanks!

[Simon Mundy]

Originally Posted by timmerk

Hi, I was wonder if this is possible:

I have a link on a webpage, and when the user clicks it, a popup window appears, but the popup window's size changed dynamically to the content, without the user seeing the resize.

i only know how to open a popup window at a fix size. Any ideas?

Thanks!

A lot of modern browsers are really down on JavaScript trying to dynamically resize a window size, so even if you get the correct code in there it may not work as reliably as you'd hoped.

Is it for viewing various different sized images? An alternative would be to embed widths/heights for each link within the Javascript:

Code:
<a href="yourpic.jpg" onclick="launchWindow(this,200,300)">Launch</a>

...

function launchWindow(obj, width, height)
{
	link = obj.href;
	scrx = screen.width;
	scry = screen.height;
	winX = (scrx/2)-(width/2);
	winY = (scry/2)-(height/2);
	enlargementWin = open(link,'_blank','directories=no,location=no,menubar=no,status=no,titlebar=no,toolbar=no,scrollbars=no,width='+width+',height='+height+',left='+winX+',top='+winY+',screenX='+winX+',screenY='+winY+',resizeable=no');
	enlargementWin.moveTo(winX,winY);
	enlargementWin.focus();
	return false;
}

... then the next logical step would be to feed those widths/heights by (for example) getting PHP to iterate through a directory of images, determine the attributes of each image and then dynamically outputting the correct values for each link.

It's a bit of work to set up but I think it would end up being less trouble for you in the long run.

[timmerk]

Nah - I have a table that will show in the popup. I can't do 100% for the width of the table because if the user does not have javascrtipt, the page will open in a normal browser window, and I don't want the table to be 100% width there.

[registered_user]

You have to set the width of the new window if you want it to be a specific size. That's just how it works. If you change the width after the window spawns, it'll be noticed.

So you need to know the width of the content before you spawn the window. You might be able accomplish this with an xmlhttprequest thing if you don't control the content -- but you'll be sacrificing speed because you'll have to load the data before you spawn and write it to the new window.

and FWIW, it's generally considered uncool to resize browser windows. Nothing -- save Flash -- gets me to leave a site faster.

[clam2000]

ok... it took around 20 minutes to get this, a fun challange

the basic idea:

make a new iframe, and load the new page into it.

once it's loaded we grab all the content, and pop it into a div (for easy access)

we look at the div's width and height, and use those for the size of the new window.

the code shouldn't be noticably slower than a simple window opening, except that the window will open after the document is loaded, instead of opening immediately, and then having the content load into it. (you can put a loading thing, or grey out the link when it's clicked for instant notification)

also, i only tried this in safari, no clue how it'll work in anything else.

oh, and demo: here

--Will


ps: i did cheat some, and this demo isn't production quality for two reasons
1: the head of the page won't get put into the new window, so you loose scripts, styling, title
2:i assume that the main body of the page is a div which is explicitly styled... that won't always hold true
3: if you try and load a webpage from a different site, you'll get lots of cross site scripting alerts from your browser "page accessing content not under it's control"


anyways

Code:
function opendynamic(page) {
	var preload=document.createElement('iFrame');
	preload.src=page;
	preload.style.width='0px';
	preload.style.height='0px';
	preload.style.position='absolute';
	document.appendChild(preload);
	preload.onload=function() {
		var windowcontent="";
		if(this.contentDocument) { windowcontent=this.contentDocument;} else
		if(this.contentWindow) {windowcontent=this.contentWindow;} else
		if(this.document) {windowcontent=this.contentWindow;} else
		{
                           //fall back on opening a static window if browser can't get contents of iframe
			window.open(page,'thewindow','width=250,height=250,menubar=0');
		}
		//put it in a div, so we can figure out how big it's supposed to be rendered
		var indiv=document.createElement('div');
		indiv.innerHTML=windowcontent.body.innerHTML;

		document.appendChild(indiv);
		
		var realelement=indiv.children[0];
		//defaults
		var width=250;
		var height=250;
				
		if(realelement.offsetWidth) {
		width = realelement.offsetWidth;
		height=realelement.offsetHeight;
		} else if(realelement.clientWidth) {
		width = realelement.clientWidth;
		height=realelement.clientHeight;
		} else if(realelement.width) {
		width = realelement.width;
		height=realelement.height;
		}
		top.ref=window.open('','thewindow','width='+width+',height='+height+',menubar=0');
		top.ref.document.write(windowcontent.body.innerHTML);
		top.ref.document.close(); //stops writing
	}
}

[Chris O'Brien]

Originally Posted by clam2000

Code:
function opendynamic(page) {
	var preload=document.createElement('iFrame');
	preload.src=page;
	preload.style.width='0px';
	preload.style.height='0px';
	preload.style.position='absolute';
	document.appendChild(preload);
	preload.onload=function() {
		var windowcontent="";
		if(this.contentDocument) { windowcontent=this.contentDocument;} else
		if(this.contentWindow) {windowcontent=this.contentWindow;} else
		if(this.document) {windowcontent=this.contentWindow;} else
		{
                           //fall back on opening a static window if browser can't get contents of iframe
			window.open(page,'thewindow','width=250,height=250,menubar=0');
		}
		//put it in a div, so we can figure out how big it's supposed to be rendered
		var indiv=document.createElement('div');
		indiv.innerHTML=windowcontent.body.innerHTML;

		document.appendChild(indiv);
		
		var realelement=indiv.children[0];
		//defaults
		var width=250;
		var height=250;
				
		if(realelement.offsetWidth) {
		width = realelement.offsetWidth;
		height=realelement.offsetHeight;
		} else if(realelement.clientWidth) {
		width = realelement.clientWidth;
		height=realelement.clientHeight;
		} else if(realelement.width) {
		width = realelement.width;
		height=realelement.height;
		}
		top.ref=window.open('','thewindow','width='+width+',height='+height+',menubar=0');
		top.ref.document.write(windowcontent.body.innerHTML);
		top.ref.document.close(); //stops writing
	}
}

Instead of loading it into a div, why not just check the scrollHeight/Width of the <body> in the iframe?

[timmerk]

Thanks clam2000!

[Oisín]

Originally Posted by clam2000

also, i only tried this in safari, no clue how it'll work in anything else.

oh, and demo: here

Well, it doesn't work in my Safari... clicking your demo link does absolutely nothing... might I suggest fixing the link?

[timmerk]

just remove the first http: part. it should be:

http://www.obatik.com/stuff/dynwin/

[timmerk]

and btw, it doesnt work in other browsers.

[timmerk]

or with popup blockers :-)

[DeathMan]

in other words, don't do that.