CODEWITHSUNDEEP
javascriptresize
skos
skos

Reputation: 4212

Adjusting height & width of pop up window on resize to maintain the aspect ratio

I am opening a pop up window using window.open function

window.open('some_page.htm','','width=950,height=500');

Now what I want is when user tries to resize the window, the aspect ratio should be maintained i.e., if width is reduced then accordingly height should also get reduced and vice versa. I just want to calculate the new dimensions. So far I have tried this

function ResizeWindow()
{
    var iOrignalWidth = 950;
    var iOrignalHeight = 500;
    var iOuterHeight = window.outerHeight;
    var iOuterWidth = window.outerWidth;

    var iNewOuterWidth = Math.round((iOrignalWidth / iOrignalHeight) * iOuterHeight);
    var iNewOuterHeight = Math.round((iOrignalHeight / iOrignalWidth) * iNewOuterWidth);

    alert("New Width: "+ iNewOuterWidth + "\t" + "New Height" + iNewOuterHeight);
}

I know that there's something wrong up there since I am not getting desired results. ANy solution on this ?

Upvotes: 0

Views: 2644

Answers (2)

Sinan AKYAZICI
Sinan AKYAZICI

Reputation: 3952

You should do to accoording to one resize for maintain the aspect ratio. For example:

function ResizeWindow()
{
    var iOrignalWidth = 950;
    var iOrignalHeight = 500;
    var iOuterHeight = window.outerHeight; 
    var iOuterWidth = window.outerWidth;

    var w = (window.outerWidth  - iOrignalWidth) / iOrignalWidth; // for exam: (1280-950) / 950= 0.34
    var h = (window.outerHeight - iOrignalHeight) / iOrignalHeight; // for exam : (800 - 500) / 500= 0.60

    var newWidth;
    var newHeight;
    if (w<h)
    {
        // If percentage of width is less than percentage of height, Resize should be according to percentage of width.
        newWidth = iOrignalWidth * w * 100;
        newHeight = iOrignalHeight * w *100;
    }
    else
    {
        // If percentage of height is less than  percentage of width, Resize should be according to percentage of height.
        newWidth = iOrignalWidth * h * 100;
        newHeight = iOrignalHeight * h *100;
    }

    alert("New Width: "+ newWidth + "\t" + "New Height" + newHeight );

}

So that maintain the aspect ratio is always preserved.

Upvotes: 0

Michiel
Michiel

Reputation: 1006

You'll want to either adjust the width to the height or visa versa, not both. In this code, I assumed you want the width adjusted to the height:

function ResizeWindow()
{
    var iOrignalWidth = 1000;
    var iOrignalHeight = 500;
    var iOrginalRatio = iOrignalWidth/iOrignalHeight; // 2

    var iOuterWidth = window.outerWidth; // example: 1083
    var iOuterHeight = window.outerHeight; //example: 600

    var iNewOuterHeight = iOuterHeight; // 600
    var iNewOuterWidth = Math.round(iNewOuterHeight*iOrginalRatio); //600 * 2 = 1200

    alert("New Width: "+ iNewOuterWidth + "\t" + "New Height" + iNewOuterHeight);
}​

I changed to original width to 1000 for the example, but you can change that back in your actual code.

Upvotes: 1

Related Questions