Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 352
Steven A. Lowe Avatar asked Sep 18 '08 06:09

Steven A. Lowe


People also ask

What method is used to resize a browser window?

The resizeTo() method resizes a window to a new width and height.

How do I make my Web page fit my browser?

Whether you're using Internet Explorer, Firefox or Chrome, the F11 key opens and closes full screen mode and the same commands for zooming in and out of the page apply to each browser.

How do I stop a browser window from resizing after a specific size?

How do I stop a browser window from resizing after a specific size? Prevent Browser Resize Css CSS can be used to prevent browser resizing. By using the max-width property, you can set a maximum width for the browser window.


2 Answers

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.

like image 161
Fire Lancer Avatar answered Nov 15 '22 09:11

Fire Lancer


Unless you have some specific requirement here I'm not sure why JS is needed here. Tabular layouts are the easy (and archaic) way to make fluid layouts in html, but div layouts with css allow for fluid layouts as well, see http://www.glish.com/css/2.asp

like image 42
Loren Segal Avatar answered Nov 15 '22 09:11

Loren Segal