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.
 
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