Resizing popup window dynamically after creation

Hi folks,

Perhaps this is a rather simple answer, but once you have created a new popup window through a javascript call, is there any way to vertically resize the window based on the extent of the PHP dynamically rendered content?

Example, I am creating a PHP based popup calendar for my client, but some months have 5-6 rows of days that appear. (You can see the working example at http://www.mmcfc.org/test.htm )
If you go back to October using the << link, it fits in the window just fine, but if you come back to November..then, as you can see, the day rows breach the bottom of the fixed size of the popup window.

Any suggestions would be appreciated.

Thanks
LVL 12
Richard DavisSenior Web DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Pawel WitkowskiSenior Javascript DeveloperCommented:
just try: window.resizeTo(800,600)  for example :) Dynamically ? you will need to give value by yourself, so if you need it autochanging - you have to count width of your content.
0
Richard DavisSenior Web DeveloperAuthor Commented:
Hmmmm

but is there anyway of knowing how much vertical space is being consumed by the content after being rendered to the page?

I don't know if you got to check out the link I added, but as you can see, November clearly makes that window far too small. Should I possibly just statically define heights based on which month of the year is displayed then and just make my initial javascript popup call predefined with those values perhaps?
0
Pawel WitkowskiSenior Javascript DeveloperCommented:
after rendering your page just check offsetHeight of div containg calendar:

function loader()
{
window.resizeTo(document.getElementById('main-wrapper').offsetWidth+30, document.getElementById('main-wrapper').offsetHeight+30);

}


in body tag of this element:

<body onload="loader()">


Should work
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard DavisSenior Web DeveloperAuthor Commented:
wilq32...you rock, man!

That's exactly what the doctor ordered! :)
With a few adjustments, I am able to get it to open to proper sizing. :)

Thanks :)
0
NerdsOfTechTechnology ScientistCommented:
I would start off by getting the width you want to set based on your current width *FIXED*... you can get the current size by running the code below in your popup page. You can then figure out what heights are changing to to get a feel of what you are dealing with. After then you can run the resize script right from your calendar (<body onload="start the above code resize function based on div tag container">). Just make sure your script code is in the <head> of your calander code.

size alert source: EE archrajan:

=NerdsOfTech
<head>
<script>
function alertSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement &&
      ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  window.alert( 'Width = ' + myWidth );
  window.alert( 'Height = ' + myHeight );
}
 
</script>
</head>
<BODY>
<input type="button" onclick=alertSize();" value="Check Size">

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.