Question

On this page, notice how everything is the wrong size when the window is dragged around.

I want the “iframe” to keep a ratio of 1.778 (640*360, 1280*720, etc.) when scaled up or down. (When the user drags the window out, make it bigger. When the user drags the window in, make it smaller in proportion.)

I want the “border” surrounding the page to always be 8px by 8px. (The problem with using margin is that the window increases in size and the user has to scroll. – For my purposes I don’t want this to happen.)

Lastly, the text needs to size up and down with the window. (Currently I am using a ‘%’ to achieve this, but apparently ‘%’ in the context of font-size means “Sets the font-size to a percentage of the parent element’s font size.” So i’ll need a different approach here.)

Answer 1

You need to bind a resize event to the window with jquery and make appropriate changes to the elements you want to rescale:

$(window).resize(function() {
    var currentwidth = $(this).css('width'); //just one way to get the window width
    var scaledwidth = parseInt(currentwidth) * 0.75; //calculate a new width
    $('#iframeId').css('width', scaledwidth); //one way to set an element's width (iframe in this case)

/* Do your other element re-sizing here. */
}

The line var scaledwidth = parseInt(currentwidth) * 0.75; uses parseInt to strip the ‘px’ from currentwidth.