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.
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)
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!
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();
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread