Solved

Resize a popup window to image size

Posted on 2004-04-19
6
2,951 Views
Last Modified: 2007-12-19
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
Comment
Question by:Quarfelburg
6 Comments
 
LVL 10

Expert Comment

by:Shailesh15
ID: 10863182
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
 

Author Comment

by:Quarfelburg
ID: 10863289
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
 
LVL 63

Accepted Solution

by:
Zvonko earned 125 total points
ID: 10864297
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
Industry Leaders: 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!

 
LVL 8

Expert Comment

by:HaydnH
ID: 10867103
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
 

Author Comment

by:Quarfelburg
ID: 10870252
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 10870352
Fine to see it life working for you :-)
Thanks for the points.
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

679 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