Resize all elements on a screen upon window resize in javascript or jquery

[axwell]

I am trying to resize all elements on a web page upon resizing the window. The background image needs to stretch along with draggable items, text boxes, font size, and other images. The draggable items needs to stay in the same place in proportion to the background image. Everything needs to maintain aspect ratio. I have tried numerous methods and none seem to work.

[Angry Black Man]

first:

background images cannot be stretched unelss you use CSS3. CSS3 hasn't been ratified yet, so you may or may not get the desired result across all browsers (especially older browser versions)

second:

doing this in javascript anyway would be math intensive. you'd have to start with obtaining the size of the window. this isn't uniform across all browsers:

http://www.javascripter.net/faq/browserw.htm

then you'd have to master the "onresize" event of the window object to query all the elements on your page and then, using some algorithm, resize the elements.

pretty tall order.

if you want to give it a try, i'm sure many of us could debug your code along the way. be sure to offer an example page for debugging!

[DanInMA]

you can do it with jquery easily enough -
resize event - http://api.jquery.com/resize/


- getting viewport sizes:

To get the width and height of the viewport:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();