# Solved: New window opening using percentages



## danielstoops (Sep 27, 2008)

Hi all,

My website contains pictures, and due to its' layout, the pictures have to be slightly smaller than what their source code is. So I wanted the image to appear in another window and used this code:



I did not make this code, yet I still understand parts of it. I am using this code because there would not show a menubar etc.

What I want to do is instead of using pixels for the width and height, use percentages. I tried putting 100% instead of 900 but it just reads 100 pixels.

Can anyone help me???
Thanks!!!


----------



## Mawer IV (Jun 24, 2007)

First of all I just need to say that this seems a rather inelegant solution which might be better achieved using some nice JavaScript; (it's nothing personal I just hate pop-up windows).

Anyway I think your width and height attrs were in the wrong place and you meant something like this


```
[URL=javascript:void(0)][IMG]image.png[/IMG][/URL]
```
But if you want the pop-up window to be maximized (100% of the screen) then all you have to do is remove the height and width attrs, then it should automatically maximize (at least it does for me in Firefox 3.5).e.g.


```
[URL=javascript:void(0)][IMG]image.png[/IMG][/URL]
```
Hope that helps


----------



## Mawer IV (Jun 24, 2007)

I've had another thought actually, if you want to size the pop-up to a particular percentage e.g. 50% then you could dynamically find the pixel value for that like so:

```
<a href="javascript:void(0)" onclick="window.open('images/precipitation2090.png', 'new', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=yes, 
width='+ window.outerWidth / 2 +', 
height='+ window.outerHeight / 2)">
	<img src="images/precipitation2090.png" width="100" />
</a>
```
Obviously you could substitute the 2 for whatever (e.g. for 25% '4')

Unfortunately to the best of my knowledge the outerHeight / outerWidth properties are not supported in IE (surprise, surprise).

There probably are other ways of doing this but none spring to mind, although you might want to seriously consider something like a Lightbox


----------



## danielstoops (Sep 27, 2008)

I think you have misunderstood me. Sorry for my bad explanations!
What I want is the new window to be the size of the image. So if there was one image that was 900px by 900px, then the window would open 900px by 900px to fit the image fully. And if there was an image that was 350px by 500px, then the new window would open 350px by 500px to fit the whole image again.

Thanks


----------



## Mawer IV (Jun 24, 2007)

I understand now:


```
<img src="images/precipitation2090.png" onclick="popUp('images/precipitation2090.png', this.height, this.width)" style="cursor:pointer;" />
				
<script type="text/javascript">
	function popUp(path, imgHeight, imgWidth) {
		window.open(path, 'new', 'height='+ imgHeight +', width='+ imgWidth);
	}
</script>
```
The only problem with this is that the window will take the size of the image on the page which is not what you want. 
Give me a bit of time and hopefully I'll come up with a solution
but is this the right idea?


----------



## danielstoops (Sep 27, 2008)

Yer, it works and what you said happens: it takes the dimensions of the actual picture.
By the way, you might want to know that I am using a separate picture to display the image. Basically, I made a new image which says 'Enlarge this image' (which is about 30px by 10px). Just thought that might be of use in anyway.

Thank you very much for your help!!!


----------



## Mawer IV (Jun 24, 2007)

Well I'm stumped, I'd be happy for someone else to jump in here and disprove me but I can't seem to think of a simple way to find out the dimensions of a remote image.

But in compensation if done this little function which although isn't what you wanted it's better than nothing.

```
<img src="thumb.jpg" onclick="popUp('fullImage.jpg')" style="cursor:pointer;" />

<script type="text/javascript">
	function popUp(path, heightOveride, widthOveride) {
		// check whether the overides are defined, if true -> set; otherwise set to then screen size or 600 whichever is smaller.
		winHeight = heightOveride ? heightOveride : Math.min(screen.availHeight, 600);
		winWidth = widthOveride ? widthOveride : Math.min(screen.availWidth, 600);
		
		window.open(path, '_blank', 'toolbar=no, menubar=no, height='+ winHeight +', width='+ winWidth);
	}
</script>
```
Basically it will do a popup for the passed path, if you pass a second and/or third argument they will be taken as the windows dimensions.
Otherwise the default dimensions are used (currently 600 feel free to change these).

```
<img src="thumb.jpg" onclick="popUp('fullImage.jpg', 1000, 1000)" style="cursor:pointer;" />

<script type="text/javascript">
	function popUp(path, heightOveride, widthOveride) {
		// check whether the overides are defined, if true -> set; otherwise set to then screen size or 600 whichever is smaller.
		winHeight = heightOveride ? heightOveride : Math.min(screen.availHeight, 600);
		winWidth = widthOveride ? widthOveride : Math.min(screen.availWidth, 600);
		
		window.open(path, '_blank', 'toolbar=no, menubar=no, height='+ winHeight +', width='+ winWidth);
	}
</script>
```
If you only want to pass one dimension just use null for the other dimension argument

```
<img src="thumb.jpg" onclick="popUp('fullImage.jpg', null, 1000)" style="cursor:pointer;" />

<script type="text/javascript">
	function popUp(path, heightOveride, widthOveride) {
		// check whether the overides are defined, if true -> set; otherwise set to then screen size or 600 whichever is smaller.
		winHeight = heightOveride ? heightOveride : Math.min(screen.availHeight, 600);
		winWidth = widthOveride ? widthOveride : Math.min(screen.availWidth, 600);
		
		window.open(path, '_blank', 'toolbar=no, menubar=no, height='+ winHeight +', width='+ winWidth);
	}
</script>
```
If I were documenting this function properly I'd do it like this:

void *popUp* ( string _path_ [, integer _height_, integer _width_] )

Sorry I couldn't completely resolve this for you.


----------



## danielstoops (Sep 27, 2008)

Thanks, but when you enter in the dimensions, for example:
onclick="popUp('fullImage.jpg', 755, 559)",

is it in pixels? Because when I entered in the size of the picture, (755x559 pixels), the picture was scaled to 71%.
Is it because the browser itself takes up, let say, 100x100 pixels, meaning the image will have to be scaled to fit in the new window?

Thanks very much for your help!!!


----------



## Mawer IV (Jun 24, 2007)

It is in pixels yes, but you're probably right about the actual window borders etc. taking up some of the space so I'd probably recommend like you said adding a few pixels to the size of the image in order to compensate.
The only slight problem is that in IE8, Safari, Opera, and Chrome the window opens without the location bar but Firefox for some reason ignores it and shows the bar anyway so you might just want to bear that in mind when you're figuring out how much to add on to the image size.


----------



## danielstoops (Sep 27, 2008)

I know, but it's okay. I worked out that you need to add on 16x16 pixels to the image for it not to be scaled.

Thanks for all your help!!!


----------

