[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

set pop up height and width based on the content?

Posted on 2009-05-01
21
Medium Priority
?
853 Views
Last Modified: 2013-12-17
I have 2 aspx pages
page1 has a link that opens page 2 in a popup window, page 2 width and height keeps changing daily ... how can i make the popup to open EXACTLY same as the content of page 2? ? i need a way to check width and height of page 2 when user clicks on the link on page 1.
0
Comment
Question by:Raul77
  • 8
  • 8
  • 2
  • +1
19 Comments
 
LVL 2

Expert Comment

by:Cognize
ID: 24294635
JavaScript is probably the best way forward with this. You haven't attached any code, so difficult to see exactly what you are working with, but I'd take this approach:

Use javascript to check some of the properties of an element on the page. For example - you may have div element with the same id, that always contains the content on the page. You could inspect properties of that element to find out how many pixels width and height it's using (I'm guessing that offsets is the way to go here), and use the returned values to set the window size.

Some pseudoish code below - this is how I would approach it.

<script type="text/javascript">

// Something like....

function ObjectPosition(obj) {
    var curleft = 0;
      var curtop = 0;
      if (obj.offsetParent) {
            do {
                  curleft += obj.offsetLeft;
                  curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
      }
      return [curleft,curtop];
}

</script>

<div id="foo">

 Your variable size content here

</div>

<script type="text/javascript">

// Something like......

window.height = ObjectPosition (document.getElementById('foo'));

</script>
0
 

Author Comment

by:Raul77
ID: 24296298
Cognize: thank you for explaining however the challenge is the <div> is in "another" file
so i have a page
1.aspx ... it has a line in it "click here to see stats"
the actual stats are on page 2.aspx
when the user clicks on page 1, it has to go to page 2 get the width and height and then set that as popup. is that even possible?  i believe you code is if the <div> was in the same page.

Thank you,
0
 
LVL 2

Expert Comment

by:wvuser1
ID: 24296369
I think it also applies, if you use it to measure the second pages' element.. just add this script to an event when the all 2nd page has just loaded, then resize it based on the element that has the largest dimension there (with, height etc)
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:Raul77
ID: 24296519
here is some code:
1.aspx

    <script language="JavaScript">


function op1() {
    window.open("./Planning/Stats.aspx","Window1","menubar=no,width=550,height=600,toolbar=no,scrollbars=yes");
}

</script>

and this is how i open the popup (still on page 1.apsx) i got no java script on page2.aspx

<a href="javascript:op1()" onMouseOver="self.status='Open A Stat'; return true;"><b>
                     <span class="style2">Operations Stats </span>&nbsp;</b></a>

is it possible to provide me with example of what need to go on page 1 and what needs to be on page 2?
0
 
LVL 2

Expert Comment

by:Cognize
ID: 24296598
Hi Raul77,

I believe you can get information from page 1. Since that window scripts has the code for the second window, I suspect you'll be able to access information from page 1 using the 'parent' property on page 2


So in page 2 -

var height = parent.<Property or Variable you want to access>

I believe that you can use variables as well as dom objects.


That said though, it does sound strange that you can't control at least some of the elements that appear on the 2nd page. Really the second page should be looking after it's own width and height based on it's content I feel.
0
 

Author Comment

by:Raul77
ID: 24296664
dont i need to set the popup size in page 1 in my javascript function like i have now

<script language="JavaScript">


function op1() {
    window.open("./Planning/Stats.aspx","Window1","menubar=no,width=550,height=600,toolbar=no,scrollbars=yes");
}

</script>

is it possible to provide an example with code please?
0
 

Author Comment

by:Raul77
ID: 24320943
Cognize: can you please provide a better example? thanks
0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24393807
I have no idea what those experts trying to tell you, but ... no offence... they sux ;)

Main problem is that you want to open window with dynamic size that you dont know when opening this window (because to count how much space it uses, javascript firstly have to display it). There are at least two solution for you:

1. Put this content (invisibly) on page 1,  store its  width and height (like  document.getElementById('someDivId').offsetWidth    and .offsetHeight)  and then :

window.open("./Planning/Stats.aspx","Window1","menubar=no,width="+ storedWidth +",height="+ storedHeight +",toolbar=no,scrollbars=yes");

2. Doing this after page is rendered. So open new window, store width and height of container that holds all elements then do:

window.resizeTo( width,height )

Remember that this solution might have some problems so if it wont work we will have to figure out something then
0
 

Author Comment

by:Raul77
ID: 24551589
wilg32: is it possible to perhaps make some VERY SIMPLE 2 page content and post as example?
0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24569765
Example 1
<html>
<body>
<script type="text/javascript">
function newPage()
{
var invisibleContent=document.getElementById('invisibleContent');
var storedWidth=invisibleContent.offsetWidth +30;
var storedHeight=invisibleContent.offsetHeight+30;
 
var wind=window.open("about:blank","Window1","menubar=no,width="+ storedWidth +",height="+ storedHeight +",toolbar=no,scrollbars=yes");
wind.document.write(invisibleContent.innerHTML);
 
}
</script>
 
 
<div id="invisibleContent" style="visibility:hidden;position:absolute">
	<div style="width:420px;height:200px;border:1px red dashed">
   Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text 
   Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text 
   Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text 
	</div>
	<div style="width:320px;height:400px;border:1px black solid">
   Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text 
   Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text 
   Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text 
	</div>	
</div>
 
<button onclick="newPage()">click me</button>
 
</body>
 
</html>

Open in new window

0
 
LVL 18

Accepted Solution

by:
Pawel Witkowski earned 2000 total points
ID: 24569786
Example 2





Notice that in both examples there are some numbers added to width and height. It is because you need also to add some space there because i.e. Firefox header takes some space,etc. Just try with diffrent sizes to get what you need.
<html>
<head>
<script type="text/javascript">
 
function resize()
{
	var invisibleContent=document.getElementById('visibleContent');
	var storedWidth=invisibleContent.offsetWidth +40;
	var storedHeight=invisibleContent.offsetHeight+200;
	window.resizeTo(storedWidth,storedHeight);
}
 
</script>
</head>
<body onload="resize()">
<div id="visibleContent" style="float:left">
	<div style="width:420px;height:200px;border:1px red dashed">
   Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text 
   Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text 
   Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text 
	</div>
	<div style="width:320px;height:400px;border:1px black solid">
   Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text 
   Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text 
   Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text Alot of text 
	</div>	
</div>
 
</body>
 
</html>

Open in new window

0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24569790
Ahh and second example might not work if you have maximized window. So try this as a target of window to open. Or try in not maximized status.
0
 

Author Comment

by:Raul77
ID: 24573524
wilg32: thanks for the example, however i think there was a misunderstanding, based on your example my content need to be all on "ONE" page, but my problem is i have page 1 and page 2... 2 FILES
in page 1 there is a link to page 2 which opens as a pop up i need that popup to set its height and width.

2 pages, 2 files is my challenge.

Thanks
0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24573712
Well maybe you did not get mine idea. This is only an example how to solve it. You will of course need a little more work here - pass this variable to second window that opens a popup and then use those values to create it. I though that those examples will show you idea. You dont know how to pass variables between pages?
0
 

Author Comment

by:Raul77
ID: 24573837
excuse my n00bines :) but in your example 1 the <div> invisible text</div> what is the content of that? as i said in my first page (page1) i dont know anything about the page that is about to be open (page2), i dont what it has, all i know is the link to the page and nothing more.
if i understand correctly based on your example you are assuming the content of the page about to be open is on the page where the link is?
sorry if i sound totally dumb !
0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24573850
So lets to sum up:


Example 1:

This example has its own needs - just put content for popup page2 on page1 in invisible content and then fire window.open.


Example 2:

This example needs to put content of page2 inside one big div, then when its loaded it will be automatically resized to proper size.



As you see both solutions got its own cons:

Example 1 :
- You need to put content of another page in main page.

Example 2:
- User will need to wait until whole body is loaded to have window resized.
# solution here is usually opening window with minimum width and height that will expand when its loaded
0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24573867
Well you said that it keeps changing daily but you did not told me that you dont have access to it :))

So if you cant change this second page content you can do one more thing:

Just connect from your Server side with this page then take content of it and put in invisibleContent div (example1). In PHP you could use for that a CURL
0
 

Author Comment

by:Raul77
ID: 24573872
example 2 will work for me, let me try it and get back :)

Thanks
0
 
LVL 18

Expert Comment

by:Pawel Witkowski
ID: 24573882
Example 2 will work for you if you can change this daily content a little (by putting everything  there inside <div> </div> and run script over it)
0

Featured Post

Technology Partners: 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

This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn how to implement Singleton Design Pattern in Java.
This tutorial will introduce the viewer to VisualVM for the Java platform application. This video explains an example program and covers the Overview, Monitor, and Heap Dump tabs.
Suggested Courses
Course of the Month18 days, 7 hours left to enroll

826 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