This Question have 3 answers right now.

How to implement a web page that scales when the browser window is resized?

Question!

How to implement a web page that scales when the browser window is resized?

I can lay out the elements of the page using either a table or CSS float sections, but i want the display to rescale when the browser window is resized

i have a working solution using AJAX PRO and DIVs with overflow:auto and an onwindowresize hook, but it is cumbersome. Is there a better way?

  • thanks everyone for the answers so far, i intend to try them all (or at least most of them) and then choose the best solution as the answer to this thread

  • using CSS and percentages seems to work best, which is what I did in the original solution; using a visibility:hidden div set to 100% by 100% gives a way to measure the client area of the window [difficult in IE otherwise], and an onwindowresize javascript function lets the AJAXPRO methods kick in when the window is resized to redraw the layout-cell contents at the new resolution

EDIT: my apologies for not being completely clear; i needed a 'liquid layout' where the major elements ('panes') would scale as the browser window was resized. I found that i had to use an AJAX call to re-display the 'pane' contents after resizing, and keep overflow:auto turned on to avoid scrolling



Answers

< body onresize="resizeWindow()" onload="resizeWindow()" > PAGE < /body >

    /**** Page Rescaling Function ****/

    function resizeWindow() 
    {
        var windowHeight = getWindowHeight();
        var windowWidth = getWindowWidth();

        document.getElementById("content").style.height = (windowHeight - 4) + "px";
    }

    function getWindowHeight() 
    {
        var windowHeight=0;
        if (typeof(window.innerHeight)=='number') 
        {
            windowHeight = window.innerHeight;
        }
        else {
            if (document.documentElement && document.documentElement.clientHeight) 
            {
                windowHeight = document.documentElement.clientHeight;
            }
            else 
            {
                if (document.body && document.body.clientHeight) 
                {
                    windowHeight = document.body.clientHeight;
                }
            }
        }
        return windowHeight;
    }

The solution I'm currently working on needs a few changes as to width otherwise height works fine as of so far ^^

-Ozaki

By : Sphvn


instead of using in css say "width: 200px", use stuff like "width: 50%"

This makes it use 50% of whatever it's in, so in the case of:

<body>
 <div style="width:50%">
  <!--some stuff-->
 </div>
</body>

The div will now always take up half the window horizontaly.



use ems. jontangerine.com and simplebits.com are both amazing examples. Further reading - The Incredible Em & Elastic Layouts with CSS by Jon Tan

By : Andy Ford



HTML Classes WITH IDs

Why are iframes so slow?

How would you code this: The SO Menu [closed]

How do I code CSS to “change” when I load/pull content using ajax?

What is the best to learn next to aply extra functionality to CMS templates?

How does Google achieve the fading effect on the home page?

Set default content for target div

slanted design via html css and javascript?

jQuery - Can someone help stitching jQuery code with .ajaxComplete()?

Styling 'FILE' input type element

How to scroll a <li> while appending it into group of <li>

How can I resize an image, added via ajax, to fit within specific dimensions while maintaining aspect ratio using JQuery/CSS?

How to display the content of a tab when a button is clicked

Input field that gets cleared on document ready

JQuery highlighting a row in an ajax loaded table

Applying styles to a dynamically-injected div via AJAX call (xhrGet)

Making large text box for ajax search

Video about How to implement a web page that scales when the browser window is resized?