• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 878
  • Last Modified:

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
0
Richard Davis
Asked:
Richard Davis
  • 2
  • 2
1 Solution
 
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
 
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

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now