Dynadot โ€” .com Registration $8.99

Text Size for Disabilities

Spaceship Spaceship
Watch

D@Z

Established Member
Impact
0
I've seen a couple of website use images, where once clicked, you can increase or decrease the size of the text on the page, making it easier for users with disabilities, such as bad eyesight.

Can anyone point me in the right direction on how to do this? Like is it CSS, JavaScript or any free scripts? Thanks.
 
0
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
.US domains.US domains
textsizer.js:
Code:
/*------------------------------------------------------------
	Document Text Sizer- Copyright 2003 - Taewook Kang.  All rights reserved.
	Coded by: Taewook Kang ([email protected])
	Web Site: http://txkang.com
	Script featured on Dynamic Drive (http://www.dynamicdrive.com)
	
	Please retain this copyright notice in the script.
	License is granted to user to reuse this code on 
	their own website if, and only if, 
	this entire copyright notice is included.
--------------------------------------------------------------*/

//Specify affected tags. Add or remove from list:
var tgs = new Array( 'p','h1','h2','h3','h4');

//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 ];
	}
}

The HTML:
Code:
In your <head>:
<script type="text/javascript" src="textsizer.js"></script>

In your <body>:
<a href="#" onclick="ts('body',1);" title="Make Text Larger">Larger Text</a>
<a href="#" onclick="ts('body',-1);" title="Make Text Smaller">Smaller Text</a>
 
0
•••
Great! Thanks, Dan. I will try this out soon when I have some spare time. On my stylesheet for my website my fonts are set to px, does this matter?
 
0
•••
D@Z said:
On my stylesheet for my website my fonts are set to px, does this matter?
I don't think so. :)
 
Last edited:
0
•••
Ok, thanks for your help anyway. The script works great with my news articles. :)
 
0
•••
Appraise.net
Unstoppable Domains
Domain Recover
DomainEasy โ€” Live Options
  • The sidebar remains visible by scrolling at a speed relative to the pageโ€™s height.
Back