Forum Moderators: open
Website viewers can choose their preferance on font size (small, normal, large, extra large) by clicking on a button.
If you click on the image, all the texts on that page gets smaller, larger, and etc. and it does it instantaneously. Meaning, it does not direct you to another page with a different font size but rather it is the same page and all the text size changes size.
Do you happen to know how to accomplish this? One of my site has small font texts and I sometimes have a bit problem reading it myself. I like to give the viewers their choice on font size.
First, add this to your <head>:
<script type="text/javascript" src="textsizer.js">
</script>
Then, open up a text editor and enter the following and save as "textsizer.js" and upload it to your root directory:
//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( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;function ts( trgt,inc ) {
if (!document.getElementById) return
var d = document,cEl = null,sz = startSz,i,j,cTags;sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;
startSz = sz;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 ];
}
}
Finally, add this to your <body>:
<a href="javascript:ts('body',1)">+ Larger Font</a> ¦ <a
href="javascript:ts('body',-1)">+ Smaller Font</a>
I hope this helps!
-kodaks
