View Full Version : Page Dimensions

12-26-2005, 12:43 PM
Hi to all on these wonderful forums..

This is kind of embarrassing - I have no idea where to put this question because I have no idea what language would be the best to solve to problem :D hehe..

Okay.. the problem:

A lot of people doesn't maximize their browser, and even more people keep their "Favourites" open while surfing.. Now, I have noticed that many pages (for example CodingForums.com :D) change their dimensions when you enable / disable the "Favourites"-thingy.....how can I make my page do that?

And what language would be the best to do it in? .. I would prefer JavaScript or PHP if possible :) ...well... HTML if possible too :)

Thanks for all the help :)


12-26-2005, 04:24 PM
There's not really a code to do that.... Coding Forums uses a fluid layout, meaning that it resizes to whatever size the window is. You just need to specify widths in percentages.

12-26-2005, 09:10 PM
The following Javascript functions will tell you how much of your page is visible (useful for substituting different sized images etc.)

function pageWidth() {return window.innerWidth != null? window.innerWidth: document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body != null? document.body.clientWidth:null;}
function pageHeight() {return window.innerHeight != null? window.innerHeight: document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body != null? document.body.clientHeight:null;}

12-27-2005, 11:03 PM
hmm... I see.. well I'll try and work something out.. thanks for the help

12-27-2005, 11:27 PM
hmm... fluid layout you say? .. hmm.. how would you turn something like this code into fluid?

.content {
position: relative;
width: 640px;
min-width: 150px;
margin-top: -52px;
margin-right: 0px;
margin-bottom: 61px;
margin-left: 160px;
border: 1px solid #000;
background-color: #e0eeee;
padding: 10px;
z-index: 4;

or... hmm.. perhaps it is this code that needs to be changed..:

body {
margin-top: 60px; /* take care - if changed - all boxpositions must be changed too */
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
border: 0 none; /* border: 1px solid #fff; for proof only - if - box-positions will change */
padding: 0px;
background-color: #ccccff;
color: #555;
font-size: 10px;
line-height: 16px;
font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
z-index: 1;

or the "<div>" perhaps?

Please help :)