changing window size to fit image with javascript

[junnytony]

http://www.allforchrist.cjb.net

I want to automatically change the size of a window to fit the size of the image that is loaded in it when a picture is clicked in another window

I already tried this:

OpenWin.outerHeight=this.document.getElementById("Picture").height

OpenWin.outerWidth=this.document.getElementById("Picture").width

note :: the window name is OpenWin


Please help..what do I do?

[beetle]

I posted this (http://www.codingforums.com/showthread.php?s=&threadid=9836) a while back, will that work for you?

[junnytony]

Thanks, beetle for the great help. That was exactly what I was looking for.

But I have two more questions...

How can I make the popup window be the focus everytime it loads an image? I've tried putting win.focus() but its not working.

Secondly,
The Scenerio:: I have a div element that loads images as the user chooses(id="picdiv").

<div class='bigpic' style="visibility:hidden" id='picdiv'>
<image ='center' src="pictureURL" name='bigpic'>
<div class='bigpic' style="background-color:#888; height:20px; width:20px; top:7px; left:146px; padding:2px" id="xl">
<a href="#" onclick="popImg(); return false;">XL</a>
</div></div>


I have another div element that is positioned on the image (id="xl") with a link that says XL. The onlclick event calls the function popImg() from here (http://www.codingforums.com/showthread.php?s=&threadid=9836)

when I click the link, the popup window opens and is resized to fit the image in it. Thats fine.
note that function popup gets the src using document.getElementById("bigpic").src

Now, I want to know if there is a way I can load a larger version of the image in the popup window when the link "XL" is clicked. The larger image is in a different folder. I'm have a weird feeling there's no way to do this but somehow I think if characters of the src string can be cut off or retained, using a function like Len() in VisualBasic, the path can be redefined and combined usind the + operator.

Any Insight into how this can be done would be appreciated

If you want to understand better what I'm talking about, visit this link http://all4c.topcities.com/asps/pics.asp and click on any of the pictures.

Thanks in advance

[beetle]

ya, let's say, for example, that your small pics are in the subfolder small and the big pics are in the subfolder big

document.getElementById("bigpic").src.replace( /\/small\//, "/big/" );

That should send the proper source string to the function

[junnytony]

Thanks again beetle.

I'm confused about the subfolder thing. I mean the format for the src.replace(). The src for the small images is "../images/pics/picturename.jpg" and that of the large images is "../images/largepics/picturename.jpg".

note that this is how the src's are included in the img statement:
< img src="../images/pics/picturename.jpg">

[beetle]

Ok, then the line should look like this

document.getElementById("bigpic").src.replace( /\/pics\//, "/largepics/" )

The replace method uses regular expressions, a very handy tool to learn. Here's a post with some links

http://www.codingforums.com/showthread.php?s=&threadid=11066

[junnytony]

thanks a lot beetle! Everything worked wonderfully