Web Wiz - Green Windows Web Hosting

  New Posts New Posts RSS Feed - User option to change font size?
  FAQ FAQ  Forum Search   Events   Register Register  Login Login

User option to change font size?

 Post Reply Post Reply
Author
sccs View Drop Down
Groupie
Groupie
Avatar

Joined: 31 October 2002
Location: United Kingdom
Status: Offline
Points: 54
Post Options Post Options   Thanks (0) Thanks(0)   Quote sccs Quote  Post ReplyReply Direct Link To This Post Topic: User option to change font size?
    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
Back to Top
Mikey View Drop Down
Senior Member
Senior Member

1979

Joined: 06 October 2003
Location: United Kingdom
Status: Offline
Points: 839
Post Options Post Options   Thanks (0) Thanks(0)   Quote Mikey Quote  Post ReplyReply Direct Link To This Post 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?
Back to Top
sccs View Drop Down
Groupie
Groupie
Avatar

Joined: 31 October 2002
Location: United Kingdom
Status: Offline
Points: 54
Post Options Post Options   Thanks (0) Thanks(0)   Quote sccs Quote  Post ReplyReply Direct Link To This Post Posted: 12 October 2006 at 2:10pm
I would like to have a + and - button on the page to change the size.
Back to Top
iSec View Drop Down
Senior Member
Senior Member
Avatar

Joined: 13 February 2005
Status: Offline
Points: 1140
Post Options Post Options   Thanks (0) Thanks(0)   Quote iSec Quote  Post ReplyReply Direct Link To This Post 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
Back to Top
 Post Reply Post Reply

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.08
Copyright ©2001-2026 Web Wiz Ltd.


Become a Fan on Facebook Follow us on X Connect with us on LinkedIn Web Wiz Blogs
About Web Wiz | Contact Web Wiz | Terms & Conditions | Cookies | Privacy Notice

Web Wiz is the trading name of Web Wiz Ltd. Company registration No. 05977755. Registered in England and Wales.
Registered office: Web Wiz Ltd, Unit 18, The Glenmore Centre, Fancy Road, Poole, Dorset, BH12 4FB, UK.

Prices exclude VAT at 20% unless otherwise stated. VAT No. GB988999105 - $, € prices shown as a guideline only.

Copyright ©2001-2026 Web Wiz Ltd. All rights reserved.