[OT] auto-resizing text according to current window width

[Kerberos]

This afternoon I tweaked a script that does just that: independantly on
the screen resolution of the visitor, if he/she resizes his current
window, text size will increase/decrease alone. Pretty handy when you want
your content to automatically adapt to the user's current window ;-)
This script in action: http://osresources.com/resizing_content.html
Not only is the text justified, but also the actual size changes according
to current window width, and image proportions also always remains 33%
(thanks to Jake)

--
K.

http://www.osresources.com/


1. Put this inside the body tag:
onload="ts('body',0);" onresize="ts('body',0);"

2. Paste this code in the body, if pasted in the head it won't work:

<script type="text/javaScript">
function ts( trgt,inc ) {
w = 640;
h = 480;
NS4Plus = (document.layers) ? 1 : 0;
IE4Plus = (document.all) ? 1 : 0;
if (navigator.appName=="Netscape") {
w = window.innerWidth;
h = window.innerHeight;
}
if (IE4Plus) {
/* The script must be inside the body tags - there is no body in the head
of the document */
w = document.body.clientWidth;
h = document.body.clientHeight;
}
// alert(w+'x'+h);

//Specify affected tags. Add or remove from list:
var tgs = new Array( 'div','td','tr');

//Specify spectrum of different font sizes:
var szs = new
Array( '12px','14px','16px','18px','20px','24px','28px','36px' );
var startSz;
if (w <= 800) startSz = 0;
else if (w <= 1024) startSz = 1;
else if (w <= 1152) startSz = 2;
else if (w <= 1268) startSz = 3;
else if (w <= 1600) startSz = 4;
else if (w <= 1900) startSz = 5;
else startSz = 2;
if (!document.getElementById) return
var sz = startSz
sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 7 ) sz = 7;
startSz = sz;
var d = document,cEl = null,i,j,cTags;
if ( !( cEl = d.getElementById( trgt ) ) ) cEl =
d.getElementsByTagName( trgt )[ 0 ];

cEl.style.fontSize = szs[ sz ];

for ( i = 0 ; i < tgs.length ; i++ ) {
cTags = cEl.getElementsByTagName( tgs[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize =
szs[ sz ];
}
}
</script>

 

[Randy Webb]

This afternoon I tweaked a script that does just that: independantly on
the screen resolution of the visitor, if he/she resizes his current
window, text size will increase/decrease alone. Pretty handy when you
want your content to automatically adapt to the user's current window ;-)
This script in action: http://osresources.com/resizing_content.html
Not only is the text justified, but also the actual size changes
according to current window width, and image proportions also always
remains 33% (thanks to Jake)

That is about the *worst* thing I have seen in a while. I resize my
browser so I can see more, yet I don't see more. Thats real intuitive.

Just glad it doesn't "work" in my preferred browser (Mozilla).

 

[Kerberos]

That is about the *worst* thing I have seen in a while. I resize my
browser so I can see more, yet I don't see more. Thats real intuitive.

A customer asked for this because he said he doesn't want a fixed width
design of his web site. I said that in %, his design would look very
streched on large screens such as 1600x1200 and above. Then I showed him
this solution of having the whole content proportional, and he said this
is what he wants. He also said he doesn't like black bars in movies on
television, and fixed-width content on web sites is similar to this. Oh
well, the most important is that he's now happy with his new web site ;-)

Just glad it doesn't "work" in my preferred browser (Mozilla).

Really? I tried it with Mozilla on FreeBSD and it worked just fine...
I'll try it on Windows.

 

[Kerberos]

Just glad it doesn't "work" in my preferred browser (Mozilla).

It is working fine on Mozilla v.1.7.3 for Windows.