[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2956
  • Last Modified:

Resize a popup window to image size

Hi - I've got some code that loads a popup window with a pic and text underneath it.  This is not a separate html file and was coded this way to avoid hundreds of extra html files.  The enlarge works fine except for one detail - the image height and widths get cached.  Check for yourselves here (click the opaque thumbs at the bottom):

http://www.greenteadesign.ca/reproductions/elmburltest.html

Here is the code:

<script>
      function openWin(url,descr){
        var obj=document.images["tempImg"],txt=document.getElementById("tempDiv");
        obj.src=url;
        obj.style.display="inline";
        var margin=1;
        var w=obj.offsetWidth+2*margin,h=obj.offsetHeight+margin*40;
        obj.style.display="none";
        txt.style.width=w-margin*2;
        txt.innerHTML=descr;
        txt.style.display="inline";
        h+=txt.offsetHeight;
        txt.style.display="none";
        var win=window.open("","win","width="+w+",height="+h+",left=0,top=0,menubar=no,location=no,status=no,directories=no,resizable=yes");
        win.document.write("<img style='border: solid 1px #000' src='"+url+"'><p>"+descr);
        win.document.body.style.margin=margin;
        win.document.body.style.textAlign="center";
        win.document.body.style.fontFamily="Arial";
        win.document.body.style.fontWeight="Bold";
        win.document.body.style.fontSize="14px";
      }
</script>

Links look like this:
<a href="javascript:openWin('/images/reproductions/step_tansu/enlarge-elmburl.jpg','Elm Burl with Golden Pecan stain and Brass Hirute hardware.');">

And the hidden divs:

<img name=tempImg style="display:none;">
<div id=tempDiv style="display:none;">&nbsp;</div>

I need a way to resize the window to the correct size.  When I was using a separate html file for each enlarge I had the following function onload:
function goto() {
self.resizeTo(document.images[0].width+15, document.images[0].height+62)
}

I don't know JS and have been fooling around with win.resizeTo but couldn't figure it out.

Any help would be greatly appreciated,
Hayden

 
0
Quarfelburg
Asked:
Quarfelburg
1 Solution
 
Shailesh15Commented:
If you know width & height before opening the window...

       win.document.body.style.fontWeight="Bold";
       win.document.body.style.fontSize="14px";
       win.resizeTo(w,h);// new line
     }
</script>


On load document use...

window.resizeTo(document.images[0].width+15, document.images[0].height+62)
0
 
QuarfelburgAuthor Commented:
It would be a pain to have to specify width and height of image for hundreds of enlarges.  

How can I do an onload if I am not using a separate html file?
0
 
ZvonkoSystems architectCommented:
You can insert the resize code like this:

<script>
     function openWin(url,descr){
       var obj=document.images["tempImg"],txt=document.getElementById("tempDiv");
       obj.src=url;
       obj.style.display="inline";
       var margin=1;
       var w=obj.offsetWidth+2*margin,h=obj.offsetHeight+margin*40;
       obj.style.display="none";
       txt.style.width=w-margin*2;
       txt.innerHTML=descr;
       txt.style.display="inline";
       h+=txt.offsetHeight;
       txt.style.display="none";
       var win=window.open("","win","width="+w+",height="+h+",left=0,top=0,menubar=no,location=no,status=no,directories=no,resizable=yes");
       win.document.write("<img style='border: solid 1px #000' src='"+url+"'><p>"+descr);
       win.document.body.style.margin=margin;
       win.document.body.style.textAlign="center";
       win.document.body.style.fontFamily="Arial";
       win.document.body.style.fontWeight="Bold";
       win.document.body.style.fontSize="14px";
       newImg = new Image();
       newImg.src = url;
       win.resizeTo(newImg.width+15, newImg.height+62)
     }
</script>


Good luck,
Zvonko

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.

 
HaydnHCommented:
FYI: There appear to be a few problems with your css as they look different in different browsers (namely IE and Mozilla) - if you would like screenies let me know - otherwise download Mozilla to see what I mean.

Haydn.
0
 
QuarfelburgAuthor Commented:
Thanks Zvonko, works great.  HaydenH thanks I will fix it ASAP (client told me not to worry about anything other than ie5 - finally convinced him otherwise).

Hayden.
0
 
ZvonkoSystems architectCommented:
Fine to see it life working for you :-)
Thanks for the points.
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!

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