Menu
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
352
The resizeTo() method resizes a window to a new width and height.
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? 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.
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.
161
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
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
