centered popup that fits to page size

[ivo]

Hi!

I want to create a non-resizable centered popup and it's size should be exact like the size of text in destination page.

Here is my page: http://web.1asphost.com/tirova/domaci_cd.htm

Now, when you click on small note at right it opens a popup window, but I want it to fit the text in window and cosequently, should be non-resizable.

If you view source, I use this code:

function NewWindow(mypage, myname, w, h, scroll) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
win = window.open(mypage, myname, winprops)
if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
}

So how must be code changed?

Thanks in advace.

[Pittimann]

Hi!

What you want is really not very practical. It would be possible to adjust the window's size approximately to what you want. For this, you should take into consideration, that different browsers deal with the size differently.

Just for fun: click your link to 'Prljavo Kazaliste' and maximize the window; the contents will not be displayed completely at a resolution of 1024 * 768. As far as I know, there are still a few more people only running at a resolution of 800 by 600 pixels than at a higher one. So a part of the content would be hidden to many users.

What you asked for might make sense, if the window(s) had less stuff to be displayed.

I think, you better enable scrollbars and resizability...

Cheers - Pit

[Kor]

Yes, Pittiman is right. Your case, the tables width are sometimes heigher even than a 1024X768 rez...

In theory yes, you may resize the popup according to the table's dimension (object's offset size)

function reSize(){
h = document.getElementsByTagName('table')[0].offsetHeight;
w = document.getElementsByTagName('table')[0].offsetWidth;
window.resizeTo(w,h);
}
window.onload = reSize;

even in this case, the resizeTo() function will resize the OUTER not the INNER window, so, as Piitiman well says again, you must approximate the size adiing extra pixels, in height case, if the popup up has extra upper browser's elements.

[ivo]

I guess you're right folks, altough I could make smaller fonts.

Ok, now that's my new idea: I think that WIDTH willl never be problematic, even for 800x600 and if it does, I'll split cell text so it would fit. So I still think that widht could be non-resizable, while HEIGHT can have a scrollbar, no panic.

So, I turned 'no' to 'yes', but how can I edit 'widht' and 'height'?
<a onclick="NewWindow(this.href,'name','600','300','yes');return false;" href="Pesmi/prljavo_bozicni.htm">

Should I use (modified) Kor's suggestion:

function reSize(){
w = document.getElementsByTagName('table')[0].offsetWidth;
window.resizeTo(w);
}
window.onload = reSize;

... and how to implement it in page?

By the way, what can I do with 'name' attribute?

Thank's for posting.

[Pittimann]

Hi!

You can use Kor's suggestion and you will have to put it in the files, which are opened in the popup - not in the opener window.

Please do not forget to add a height parameter to the "window.resizeTo(w);" - just passing a value for the width would be some sort of fatal!

I have seen in the examples I looked at, that your table has an id="table1". If you use that in all your pages to be shown in the popup, you could replace:

w = document.getElementsByTagName('table')[0].offsetWidth;
with:
w = document.getElementById('table1').offsetWidth;

If you like to learn about the name property, you can have a look at:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/name_5.asp

Cheers - Pit