Results 1 to 3 of 3

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

  1. #1
    Join Date
    Apr 2012

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

    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.

  2. #2
    Join Date
    May 2005
    Dirty Jersey

    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)


    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:


    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!

    1. If you reply to my post, and your reply would then appear directly beneath my post, DON'T QUOTE MY ENTIRE POST!!! IT'S REDUNTANT!!! IT'S ASININE!!!! IT'S REDUNDANTLY ASININE!!!!! DON'T DO IT!!!!
    2. jQuery extends the functionality of JavaScript. If you don't know JavaScript, give up on that jQuery script and learn JavaScript. You'll save yourself a lot of frustration, I promise.
    3. Use the [code][/code] tags. Otherwise, you may be left wondering why no one responded to your eyesore of a thread.

  3. #3
    Join Date
    Apr 2010
    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();

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center