Solved

Resizing popup window dynamically after creation

Posted on 2008-11-01
5
873 Views
Last Modified: 2013-12-13
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
Comment
Question by:adrian_brooks
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 22859721
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
 
LVL 12

Author Comment

by:adrian_brooks
ID: 22859745
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
 
LVL 18

Accepted Solution

by:
Pawel Witkowski earned 500 total points
ID: 22860609
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
 
LVL 12

Author Closing Comment

by:adrian_brooks
ID: 31512420
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
 
LVL 19

Expert Comment

by:NerdsOfTech
ID: 22861843
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question