[Javascript] How to create a web page that fits screens ofallsizes via all

[Troy III Ajnej]

I guess that the point you were missing was the casse where all elements of 
the page created to be viewed on f.i. 1600x1200px monitor should perfectly 
fit in other lower/higher resolution monitors as well. All the gaphics 
paragraphs etc. At 1920x1440 or higher, the text size might become to small 
for reading and other elemends will tend to sllip in to fill empty space 
where not desired, etc., so the wholle layout will suffer. Or when screen 
reso lower than that, objects and text become bigger and many elements of 
the design will end up looking grotesque. 50% of the screen with res at 
800x600 will differ very much from the 50% at res of 1920x1440. 
Disproportion will be as 960:400 that will be twice + extra 160px wider. The 
script (or java applet from '97) that I mentioned was capable of maintaining 
all the proportions no matter what resolution your screen has. It was 
capable of adjusting the font size gaphic size etc imediately as you resize 
your window while maintaining perfect layout as foreseen and designed 
originally. This was what I meant with a lot of hard decisions and a hard 
work while coding this kind of pages.
But i think that it is not imposible with the right aproach from the script.
Right now I have an Idea that I'm not willing to put in to work but might 
help guiding somebody into a (? right) direction onto solving this 
universally, that is: making a script that will perfectly adapt hight width 
and font size for every element on the fly.
As the page loads the script should check for the users window width (solely 
for most designs), itierate all the elements checking for hight and width 
and calculate new size according to proprotion coeficient (extracted from 
width of the original page design/client width) than multiplied with 
elements width and hight than asigned.
For the page designed in resolution of 1600x1400 to be viewed in 1024x768, 
the proportion koeficient should be calculated as: k=1600px/1024px=1.5625 
(const) [px/px=null]
Element of size 750x625px designed for 1600x1400px resolution at screen 
resolution of 1024x768 should be adjusted as:
750px/k=Xpx; that is:
750px/1.5625 = 480px; same goes for its height
625px/1.5625 = 400px
x:y for the new dimensions will equal 480px:400px; to justify this claim we 
calculate the following:
750/625=1.2 as does 480/400=1.2; that is:  750/625 = 480/400
But calculating the font size will be a lot more trickyer than this and I'm 
not prepared to get into it this time. This formula will work for all screen 
sizes and page sizes independent of what resolution was used during design 
time. All that the coder will need to do is include this (!that) script in 
his page and invoke it during load time.




~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Troy III
progressive art enterprise
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


>From: Roger Roelofs <rer at datacompusa.com>
>Reply-To: "\[JavaScript List\]" <javascript at LaTech.edu>
>To: "\[JavaScript List\]" <javascript at LaTech.edu>
>Subject: Re: [Javascript] How to create a web page that fits screens 
>ofallsizes via all Date: Fri, 3 Mar 2006 22:47:22 -0500
>
>Troy and George,
>
>On Mar 3, 2006, at 10:04 PM, Troy III Ajnej wrote:
>
>>The most recent version of NN is IE and FX compliant; alias switchable, 
>>-so no problem with that. Somebody at NN must have read one of my postings 
>>here a few months ago. Might be an year.
>>If you like a page that will display in all monitors/browsers with the 
>>same proportions youll have to build a page that will calculate and parse 
>>dimensions proportional to the window size no matter what size 
>>accordingly. But that's a very tiresome job to do. There used to be a 
>>downloadable script that worked for NN3 or somethig (a decade ago) that 
>>could be downloaded at that time from the net but coding elements were 
>>very simple at that time,  today you'll have to work very hard to make 
>>something like that possible again.
>
>
>I didn't answer this one before because I didn't understand why javascript 
>would be involved, or why it would be hard.  It seems like a perfect job 
>for css.
>----------
><head><title>...</title>
><style type="text/css">
>#col1 {
>float: left;
>width: 50%;
>}
></style>
></head>
><body>
><div id="col1">Whatever</div>
><div>more stuff</div>
></body>
>------------
>
>What am I missing?
>
>
>--
>Roger Roelofs
>Datacomp Appraisal Services
>
>_______________________________________________
>Javascript mailing list
>Javascript at LaTech.edu
>https://lists.LaTech.edu/mailman/listinfo/javascript

_________________________________________________________________
FREE pop-up blocking with the new MSN Toolbar – get it now! 
http://toolbar.msn.click-url.com/go/onm00200415ave/direct/01/