Maintain Window aspect ratio onResize

mshaheen · #1 05-04-2005, 05: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 · #2 05-04-2005, 05:21 PM

Sure, first figure out the ratio (this should be done onload):

Code:

//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:

Code:

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

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

mshaheen · #3 05-05-2005, 09: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.

Code:

<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 · #4 05-05-2005, 11: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:

Code:

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:

Code:

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

Then later you could calculate the ratio as:

Code:

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

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

Code:

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 · #5 05-05-2005, 02:24 PM

access denied error....That error normally occurs with cross domain scripting....

mshaheen · #6 05-05-2005, 02: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 · #7 05-05-2005, 02: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/pascarell...571848000.html

Eric

mshaheen · #8 05-05-2005, 03: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 · #9 07-30-2008, 01: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.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)