General Discussion - User option to change font size?

Print Page | Close Window

User option to change font size?

Printed From: Web Wiz Forums
Category: General Discussion
Forum Name: General Discussion
Forum Description: General discussion and chat on any topic.
URL: https://forums.webwiz.net/forum_posts.asp?TID=21579
Printed Date: 29 March 2026 at 8:34pm
Software Version: Web Wiz Forums 12.08 - https://www.webwizforums.com

Topic: User option to change font size?

Posted By: sccs
Subject: User option to change font size?
Date Posted: 12 October 2006 at 1:56pm

Is there a way of using CSS to give the user of the site the option to change the size of the font? I have 3 CSS with different font sizes but want to be able to add the option for the user to change the font size on the page.

Any help please.

Thanks

Replies:

Posted By: Mikey
Date Posted: 12 October 2006 at 2:09pm

So long as the size in the CSS has been stipulated in relative mesaures then a user can adjust font sizes via their browsers options.

-------------
Handyman man?

Posted By: sccs
Date Posted: 12 October 2006 at 2:10pm

I would like to have a + and - button on the page to change the size.

Posted By: iSec
Date Posted: 18 October 2006 at 3:26pm

Step 1: Add the following code to the <HEAD> section of your web page:

<script type="text/javascript">
//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 ];
 }
}
</script>

Step 2: Now set up the two links that will increase and decrease your text size. Here is one nice method:

<a href="javascript:ts('body',1)">+ Larger Font</a> | <a
href="javascript:ts('body',-1)">+ Smaller Font</a>

-------------
"When it gets dark enough, you can see the stars"
-Charles A. Beard