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


This video can help you solving your question :)
By: admin