PDA

Click to See Complete Forum and Search --> : Maintain Window aspect ratio onResize

mshaheen
05-04-2005, 04:01 PM
Does anyone have a script, or know of a way to maintain the aspect ratio of the window when a user resizes it?
nzakas
05-04-2005, 04:21 PM
Sure, first figure out the ratio (this should be done onload):

//look for browser-specific measurements
var iWidth = (typeof self.innerWidth == "number" ? self.innerWidth : document.body.clientWidth);
var iHeight = (typeof self.innerHeight == "number" ? self.innerHeight : document.body.clientHeight);

//get ratio
var fRatio = iWidth/iHeight;


Then onresize, determine if you want the width or the height to control the new dimensions. If it's width, do this:

var iNewWidth = (typeof self.innerWidth == "number" ? self.innerWidth : document.body.clientWidth);

var iNewHeight = Math.round(iNewWidth * (1/fRatio));
window.resizeTo(iNewWidth, iNewHeight);
mshaheen
05-05-2005, 08:34 AM
I knew that seemed too simple. Won't this create an infinite loop? In fact, just using this script gives me an access denied error. In order to see any effect, I placed an alert right before the resize. But, back to my point. Doesn't the resizeTo method trigger the onResize event? So, it will continuously try to adjust the size.

<script language="JavaScript" type="text/JavaScript">
var fRatio;
function getRatio() {
//look for browser-specific measurements
var iWidth = (typeof self.innerWidth == "number" ? self.innerWidth : document.body.clientWidth);
var iHeight = (typeof self.innerHeight == "number" ? self.innerHeight : document.body.clientHeight);

//get ratio
fRatio = iWidth/iHeight;
}

function adjustSize() {
var iNewWidth = (typeof self.innerWidth == "number" ? self.innerWidth : document.body.clientWidth);

var iNewHeight = Math.round(iNewWidth * (1/fRatio));

alert(fRatio);
window.resizeTo(iNewWidth, iNewHeight);
}

</script>
</HEAD>

<BODY scroll="no" onLoad="getRatio();" onResize="adjustSize();">
nzakas
05-05-2005, 10:16 AM
Good point, that's what I get for quickly typing a response while heading home from work!

This should work in Firefox/Mozilla:

var fRatio;
var bDontFire = false;

function getRatio() {
fRatio = top.outerWidth/top.outerHeight;
}

function adjustSize() {
if (bDontFire) return;

if (top.outerWidth/top.outerHeight != fRatio) {
var iNewHeight = Math.round(top.outerWidth * (1/fRatio));
bDontFire = true;
window.resizeTo(top.outerWidth, iNewHeight);
bDontFire = false;
}
}

The problem in IE is that you can't get the actual width and height of the window itself, only of the content area (the document body), making this a tough problem to solve. You could start out by resizing the window to a particular size, then getting the width and height of the body to make the calculations:

self.resizeTo(500,400);
var iDiffWidth = 500 - document.body.clientWidth;
var iDiffHeight = 400 - document.body.clientHeight;


Then later you could calculate the ratio as:

fRatio = (document.body.clientWidth + iDiffWidth)/(document.body.clientHeight + iDiffHeight);

And then you could calculate the new window width, height, and ratio like this:

var iNewWidth = document.body.clientWidth + iDiffWidth;
var iNewHeight = document.body.clientHeight + iDiffHeight;
var fNewRatio = iNewWidth/iNewHeight;

And then go from there (sorry, I don't have time to test all that out right now).
A1ien51
05-05-2005, 01:24 PM
access denied error....That error normally occurs with cross domain scripting....
mshaheen
05-05-2005, 01:43 PM
Not sure I know exactly what you mean. But, I can tell you that I am working solely on my local machine right now. Using a text editor and testing using localhost. So, I wouldn't think it should have anything to do with domains. But, I'm no expert. I think I have to throw in the towell on this because of time constraints. I'm not giving up completely, but now the quest is solely because I can't stand to not get something to work properly.

So, please, everyone, don't kill yourselves over this issue, but if anyone does find ways to get this feature to work, you will be my hero. And, once it is working, i definitely will use it in our final app.
A1ien51
05-05-2005, 01:47 PM
I have a piece of code here that forces a min. size of a page, you might want to look at how I do the sizing there

http://radio.javaranch.com/pascarello/2005/02/16/1108571848000.html

Eric
mshaheen
05-05-2005, 02:00 PM
that does give me some ideas for another way of getting my desired result. HOWEVER, I tried your script verbatim and I get the access denied error when it tries to do the resizeTo. Now, this script has obviously worked for you in the past. What could be causing the access error?
0xG
07-30-2008, 12:05 PM
I struggled with this for some time, too.
Here is the solution:

This is due to a race condition; the window has not actually finished loading, and so is not ready to accept a resize command. Sure, it "works" for some people, probably because they already have their browser window open - rather than clicking the HTML (or HTA) file to cause the browser to launch.
I used a delay to launch the ResizeTo:

Window.SetTimeout "Window.ResizeTo 800, 600", 1000 ' (vbscript)
Window.SetTimeout ( "Window.ResizeTo ( 800, 600)", 1000) /* other */

The above uses a 1 second (1000 ms) delay; this may be tuneable but you don't always know how slow the users PC is; mine is quite fast.

PS I am not sure of the exact syntax in the second example, but you get the idea. This totally solves the issue.