Javascript resize popup according to size of content

Craig321

Craig321

Craig321

Soldato
Joined
2 May 2004
Posts
19,950
Hi,

I've been working on someone's website.

I was asked to make a gallery on one of the pages.

Their layout is very specific so I used a scrolling DIV with the thumbnails in and the full images came up in popups, the pop-up was automatically resized to the image size with the following code:

Code: 
<HTML>
<HEAD>
 <TITLE>Fit the Pic Script</TITLE>
 <script language='javascript'>
   var arrTemp=self.location.href.split("&");
   var picUrl = (arrTemp.length>0)?arrTemp[1]:"";
   var NS = (navigator.appName=="Netscape")?true:false;

     function FitPic() {
       iWidth = (NS)?window.innerWidth:document.body.clientWidth;
       iHeight = (NS)?window.innerHeight:document.body.clientHeight;
       iWidth = document.images[0].width - iWidth;
       iHeight = document.images[0].height - iHeight;
       window.resizeBy(iWidth, iHeight);
       self.focus();
     };
 </script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY bgcolor="#FFFFFF" onload='FitPic();' topmargin="0"  
marginheight="0" leftmargin="0" marginwidth="0">
 <script language='javascript'>
 document.write( "<img src='" + picUrl + "' border=0>" );
 </script>
</BODY>
</HTML>

At the bottom of the 'finished' code I've put a DIV with his comment on the image in.

Is there any way to resize the popup to the length of the comment in the DIV & the image?

I hope that all makes sense :p

Thanks,
Craig.
 
thought this was HTML, but i believe it's more javascript than anything else, which i have practically no knowledge of....

Reading the javascript, shows that the window is being resized to the image's height and width dimensions, im not actually sure as to how you would adjust that function to make it resize to your DIV and image..

hopefully you'll get some help soon... :(
 
Currently to make the DIV a little taller I'm using this:

Code: 
 <script language='javascript'>
   var arrTemp=self.location.href.split("&");
   var picUrl = (arrTemp.length>0)?arrTemp[1]:"";
   var NS = (navigator.appName=="Netscape")?true:false;

     function FitPic() {
       iWidth = (NS)?window.innerWidth:document.body.clientWidth;
       iHeight = (NS)?window.innerHeight:document.body.clientHeight  ;
       iWidth = document.images[0].width - iWidth;
       iHeight = document.images[0].height - iHeight+200;
       window.resizeBy(iWidth, iHeight);
       self.focus();
     };
 </script>

As you can see there's and added +200 there which works fine.

Maybe I could do something like this to include the div height when resizing:

Code: 
 <script language='javascript'>
   var arrTemp=self.location.href.split("&");
   var picUrl = (arrTemp.length>0)?arrTemp[1]:"";
   var NS = (navigator.appName=="Netscape")?true:false;

     function FitPic() {
       iWidth = (NS)?window.innerWidth:document.body.clientWidth;
       iHeight = (NS)?window.innerHeight:document.body.clientHeight  ;
       iWidth = document.images[0].width - iWidth;
       iHeight = document.images[0].height - iHeight+document.div[0].height;
       window.resizeBy(iWidth, iHeight);
       self.focus();
     };
 </script>
 
You must log in or register to reply here.
Back
Top Bottom